full-calendar basic example

by kaljak

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>
<div id='calendar'></div>

CSS

body {
    margin: 40px 10px;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;
  }

  #calendar {
    max-width: 900px;
    margin: 0 auto;
  }

JavaScript

$(document).ready(function() {
  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay,listWeek'
    },
    defaultDate: '2018-01-01',
    defaultView: 'month',
    navLinks: true, // can click day/week names to navigate views
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    events: function(_start, _end, _timezone, callback) {
      setTimeout(function() {
        callback([
          {
            title: 'All Day Event',
            start: '2018-03-01',
          }, {
            title: 'Long Event',
            start: '2018-03-07',
            end: '2018-03-10'
          }, {
            id: 999,
            title: 'Repeating Event',
            start: '2018-03-09T16:00:00'
          }, {
            id: 999,
            title: 'Repeating Event',
            start: '2018-03-16T16:00:00'
          }, {
            title: 'Conference',
            start: '2018-03-11',
            end: '2018-03-13'
          }, {
            title: 'Meeting',
            start: '2018-03-12T10:30:00',
            end: '2018-03-12T12:30:00'
          }, {
            title: 'Lunch',
            start: '2018-03-12T12:00:00'
          }, {
            title: 'Birthday Party',
            start: '2018-03-13T07:00:00'
          }
        ]);
      },5000);
    }
  });
});