Bootstrap Fullcalendar

Pro Component

Our Bootstrap Fullcalendar is a full-sized drag & drop event calendar.
Keep reading our Bootstrap 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:

<link rel="stylesheet" href="assets/css/fullcalendar/fullcalendar.min.css">
<link rel="stylesheet" href="assets/css/sweetalert2/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/plugins/moment.min.js"></script>
<script src="assets/plugins/fullcalendar/fullcalendar.min.js"></script>
<script src="assets/plugins/fullcalendar/daygrid.min.js"></script>
<script src="assets/plugins/fullcalendar/timegrid.min.js"></script>
<script src="assets/plugins/fullcalendar/list.min.js"></script>
<script src="assets/plugins/fullcalendar/interaction.min.js"></script>
<script src="assets/plugins/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:

events: [
  {
    title: 'All Day Event',
    start: new Date(y, m, 1),
    className: 'event-default'
  },
  {
    id: 999,
    title: 'Repeating Event',
    start: new Date(y, m, d - 4, 6, 0),
    allDay: false,
    className: 'event-rose'
  }
]

Example

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="fullCalendar"></div>
   </div>
</div>

Options

Title

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

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.

Month Week Day

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

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