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

<!-- javascript for init -->
var calendarEl = document.getElementById('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', 'timeGrid' ],
  defaultView: 'dayGridMonth',
  header: {
    center: 'dayGridMonth,timeGridWeek,timeGridDay',
    left: 'title',
    right: 'prev,next today'
  },
  selectable: true,
  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: 'Nud-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'
    }
  ],
  select: info => {
    Swal.fire({
      title: 'Create an Event',
      html: '<div class="form-group">' +
            '<input class="form-control" placeholder="Event Title" id="input-field">' +
            '</div>',
      showCancelButton: true,
      confirmButtonClass: 'btn btn-success',
      cancelButtonClass: 'btn btn-danger',
      buttonsStyling: false
    }).then((result) => {
        let event_title = $('#input-field').val();

        if (event_title) {
          calendar.addEvent({
            title: event_title,
            start: info.startStr,
            allDay: true
          });
        }
    });
  }
});

calendar.render();