FullCalendar v3.9.0 - Pro Component

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 -->
$calendar = $('#fullCalendar');

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

$calendar.fullCalendar({
    viewRender: function(view, element) {
        // We make sure that we activate the perfect scrollbar when the view isn't on Month
        if (view.name != 'month'){
            $(element).find('.fc-scroller').perfectScrollbar();
        }
    },
    header: {
left: 'title',
center: 'month,agendaWeek,agendaDay',
right: 'prev,next,today'
},
defaultDate: today,
selectable: true,
selectHelper: true,
    views: {
        month: { // name of view
            titleFormat: 'MMMM YYYY'
            // other view-specific options here
        },
        week: {
            titleFormat: " MMMM D YYYY"
        },
        day: {
            titleFormat: 'D MMM, YYYY'
        }
    },

select: function(start, end) {

        // on select we show the Sweet Alert modal with an input
swal({
    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(function(result) {

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

            if (event_title) {
      eventData = {
        title: event_title,
        start: start,
        end: end
      };
      $calendar.fullCalendar('renderEvent', eventData, true); // stick? = true
    }

    $calendar.fullCalendar('unselect');

        });
},
editable: true,
eventLimit: true, // allow "more" link when too many events


    // color classes: [ event-blue | event-azure | event-green | event-orange | event-red ]
    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'
}
]
});