Evince

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>