Django Fullcalendar

Pro Component

Our Django Fullcalendar is a full-sized drag & drop event calendar.
Keep reading our Django Fullcalendar examples and learn how to use this plugin.

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:

Copy

<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:

Copy

<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:

Copy

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.'
    }
]

Example

Calendar

Copy

<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>