Fullcalendar

Full-sized drag & drop event calendar

Usage

CSS

In order to use this plugin on your page you will need to include the following styles in the “Page plugins” area from the page’s head section:

<link rel="stylesheet" href="assets/vendor/fullcalendar/dist/fullcalendar.min.css">
<link rel="stylesheet" href="assets/vendor/sweetalert2/dist/sweetalert2.min.css">

JS

In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer:

<script src="assets/vendor/moment/min/moment.min.js"></script>
<script src="assets/vendor/fullcalendar/dist/fullcalendar.min.js"></script>
<script src="assets/vendor/sweetalert2/dist/sweetalert2.min.js"></script>

Init

In the JS components folder located in assets/js/components you will find the fullcalendar.js file with the init script you need to use in order to make Fullcalendar work.

Use the events variable to store the events you want to display in the calendar:

var events = [
    {
        id: 1,
        title: 'Call with Dave',
        start: '2018-10-18',
        allDay: true,
        className: 'bg-red',
        description: 'Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.'
    },    
    {
        id: 2,
        title: 'Lunch meeting',
        start: '2018-10-21',
        allDay: true,
        className: 'bg-orange',
        description: 'Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.'
    }
]

Calendar

<div class="card card-calendar">
    
    <!-- Card header -->
    <div class="card-header">
        
    



<!-- Title -->


<h5 class="h3 mb-0">Calendar</h5>








    </div>
    

    

    

    

    
    <!-- Card body -->
    <div class="card-body p-0">
        
    <div class="calendar" data-toggle="calendar" id="calendar"></div>

    </div>

    

    
</div>

Options

Title

Use the fullcalendar-title class on the element you want to inject the calendar current date.

Result
HTML

Fullcalendar

<h6 class="fullcalendar-title h2 mb-0">Fullcalendar</h6>

Controls

Use the following controls and add them next to your calendar to switch between Month, week and day and also navigate through different periods of time with the Next/Prev buttons.

Result
HTML

Month Week Day

<a href="#" class="fullcalendar-btn-prev btn btn-sm btn-info">
    <i class="fas fa-angle-left"></i>
</a>
<a href="#" class="fullcalendar-btn-next btn btn-sm btn-info">
    <i class="fas fa-angle-right"></i>
</a>

<a href="#" class="btn btn-sm btn-info" data-calendar-view="month">Month</a>
<a href="#" class="btn btn-sm btn-info" data-calendar-view="basicWeek">Week</a>
<a href="#" class="btn btn-sm btn-info" data-calendar-view="basicDay">Day</a>

Actions

If you want to add create/edit functionality to your calendar you will need to include the modals corresponding to that action.

Result
HTML

<!-- Create calendar event -->
<!--* Modal header *-->


<!--* Modal body *-->


<!--* Modal footer *-->



<!--* Modal init *-->
<div class="modal fade" id="new-event" tabindex="-1" role="dialog" aria-labelledby="new-event-label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            

            

            
            <!-- Modal body -->
            <div class="modal-body">
                
<form class="new-event--form">
    <div class="form-group">
        <label class="form-control-label">Event title</label>
        <input type="text" class="form-control form-control-alternative new-event--title" placeholder="Event Title">
    </div>
    <div class="form-group mb-0">
        <label class="form-control-label d-block mb-3">Status color</label>
        <div class="btn-group btn-group-toggle btn-group-colors event-tag" data-toggle="buttons">
            <label class="btn bg-info active"><input type="radio" name="event-tag" value="bg-info" autocomplete="off" checked></label>
            <label class="btn bg-warning"><input type="radio" name="event-tag" value="bg-warning" autocomplete="off"></label>
            <label class="btn bg-danger"><input type="radio" name="event-tag" value="bg-danger" autocomplete="off"></label>
            <label class="btn bg-success"><input type="radio" name="event-tag" value="bg-success" autocomplete="off"></label>
            <label class="btn bg-default"><input type="radio" name="event-tag" value="bg-default" autocomplete="off"></label>
            <label class="btn bg-primary"><input type="radio" name="event-tag" value="bg-primary" autocomplete="off"></label>
        </div>
    </div>
    <input type="hidden" class="new-event--start" />
    <input type="hidden" class="new-event--end" />
</form>

            </div>
            

            
            <!-- Modal footer -->
            <div class="modal-footer">
                
<button type="submit" class="btn btn-primary new-event--add">Add event</button>
<button type="button" class="btn btn-link ml-auto" data-dismiss="modal">Close</button>

            </div>
            
        </div>
    </div>
</div>



<!-- Edit calendar event -->
<!--* Modal body *-->


<!--* Modal footer *-->



<!--* Modal init *-->
<div class="modal fade" id="edit-event" tabindex="-1" role="dialog" aria-labelledby="edit-event-label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            

            

            
            <!-- Modal body -->
            <div class="modal-body">
                
<form class="edit-event--form">
    <div class="form-group">
        <label class="form-control-label">Event title</label>
        <input type="text" class="form-control form-control-alternative edit-event--title" placeholder="Event Title">
    </div>

    <div class="form-group">
        <label class="form-control-label d-block mb-3">Status color</label>
        <div class="btn-group btn-group-toggle btn-group-colors event-tag mb-0" data-toggle="buttons">
            <label class="btn bg-info active"><input type="radio" name="event-tag" value="bg-info" autocomplete="off" checked></label>
            <label class="btn bg-warning"><input type="radio" name="event-tag" value="bg-warning" autocomplete="off"></label>
            <label class="btn bg-danger"><input type="radio" name="event-tag" value="bg-danger" autocomplete="off"></label>
            <label class="btn bg-success"><input type="radio" name="event-tag" value="bg-success" autocomplete="off"></label>
            <label class="btn bg-default"><input type="radio" name="event-tag" value="bg-default" autocomplete="off"></label>
            <label class="btn bg-primary"><input type="radio" name="event-tag" value="bg-primary" autocomplete="off"></label>
        </div>
    </div>

    <div class="form-group">
        <label class="form-control-label">Description</label>
        <textarea class="form-control form-control-alternative edit-event--description textarea-autosize" placeholder="Event Desctiption"></textarea>
        <i class="form-group--bar"></i>
    </div>

    <input type="hidden" class="edit-event--id">
</form>

            </div>
            

            
            <!-- Modal footer -->
            <div class="modal-footer">
                
<button class="btn btn-primary" data-calendar="update">Update</button>
<button class="btn btn-danger" data-calendar="delete">Delete</button>
<button class="btn btn-link ml-auto" data-dismiss="modal">Close</button>

            </div>
            
        </div>
    </div>
</div>