FullCalendar v4.3.1

We have created the design of the FullCalendar. We have changed the colors, typography and buttons, so it can look like the rest of the dashboard.

For more information please check FullCalendar.

Here is a coded example:

<!-- markup -->
<div class="card">
  <div class="card-body">
    <div id="fullCalendar"></div>
  </div>
</div>

<!-- javascript for init -->
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('fullCalendar');
$calendar = $('#fullCalendar');

var today = new Date();
var y = today.getFullYear();
var m = today.getMonth();
var d = today.getDate();

var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'interaction', 'dayGrid', 'timeGridPlugin' ],
  editable: true,
  header: {
    left: 'title',
    center: 'dayGridMonth,dayGridWeek,dayGridDay',
    right: 'prev,next,today'
  },

  selectable: true,
  droppable: true,
  rendering: 'background',


  defaultDate: today,
  selectable: true,
  selectHelper: true,

  select: function(info) {
    // on select we show the Sweet Alert modal with an input
    Swal.fire({
      title: 'Create an Event',
      html: '<div class="form-group">' +
        '<input class="form-control text-default" placeholder="Event Title" id="input-field">' +
        '</div>',
      showCancelButton: true,
      confirmButtonClass: 'btn btn-success',
      cancelButtonClass: 'btn btn-danger',
      buttonsStyling: false
    }).then(function(result) {

      var eventData;
      event_title = $('#input-field').val();

      if (event_title) {
        eventData = {
          title: event_title,
          start: info.startStr,
          end: info.endStr
        };
        calendar.addEvent(eventData);
      }
    });
  },
  editable: true,
  eventLimit: true, // allow "more" link when too many events
  events: [
    {
      title: 'All Day Event',
      start: new Date(y, m, 1),
      className: 'event-default'
    },
    {
      title: 'Meeting',
      start: new Date(y, m, d-1, 10, 30),
      allDay: false,
      className: 'event-green'
    },
    {
      title: 'Lunch',
      start: new Date(y, m, d+7, 12, 0),
      end: new Date(y, m, d+7, 14, 0),
      allDay: false,
      className: 'event-red'
    },
    {
      title: 'BD-pro Launch',
      start: new Date(y, m, d-2, 12, 0),
      allDay: true,
      className: 'event-azure'
    },
    {
      title: 'Birthday Party',
      start: new Date(y, m, d+1, 19, 0),
      end: new Date(y, m, d+1, 22, 30),
      allDay: false,
                className: 'event-azure'
    },
    {
      title: 'Click for Creative Tim',
      start: new Date(y, m, 21),
      end: new Date(y, m, 22),
      url: 'http://www.creative-tim.com/',
      className: 'event-orange'
    },
    {
      title: 'Click for Google',
      start: new Date(y, m, 21),
      end: new Date(y, m, 22),
      url: 'http://www.creative-tim.com/',
      className: 'event-orange'
    }
  ]
});

  calendar.render();
});