Calendar
JS
In order to use this plugin on your page you will need to include the following script in the page.
<script src="js/pages/calendar-event.js"></script>
<script src='plugins/full-calendar/core/main.min.js'></script>
<script src='plugins/full-calendar/interaction/main.min.js'></script>
<script src='plugins/full-calendar/daygrid/main.min.js'></script>
<script src='plugins/full-calendar/timegrid/main.min.js'></script>
<script src='plugins/full-calendar/list/main.min.js'></script>
CSS
In order to use this plugin on your page you will need to include the following css in the page.
<link rel="stylesheet" href="plugins/full-calendar/core/main.css" />
<link rel="stylesheet" href="plugins/full-calendar/daygrid/main.css" />
<link rel="stylesheet" href="plugins/full-calendar/timegrid/main.css" />
<link rel="stylesheet" href="plugins/full-calendar/list/main.css" />
Basic Modal
My Event 1
My Event 2
My Event 3
My Event 4
My Event 5
<div id="external-events">
<div id='external-events-list'>
<div class="fc-event mb-2 p-2">My Event 1</div>
<div class="fc-event mb-2 p-2">My Event 2</div>
<div class="fc-event mb-2 p-2">My Event 3</div>
<div class="fc-event mb-2 p-2">My Event 4</div>
<div class="fc-event mb-2 p-2">My Event 5</div>
</div>
<p class="mb-0">
<input type='checkbox' id='drop-remove' />
<label for='drop-remove'>Remove after drop</label>
</p>
</div>
<div id='calendar'></div>
<div style='clear:both'></div>