full-calendar basic example

by bhupendra negi

HTML

<link rel="stylesheet" href="http://fullcalendar.io/js/fullcalendar-2.2.5/fullcalendar.css">
<script src="http://fullcalendar.io/js/fullcalendar-2.2.5/lib/moment.min.js"></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.2.5/fullcalendar.min.js"></script>
<div id='calendar'></div>
<div class='legends'>
  <div class='legend bank-holiday'> Bank Holiday
  </div>
    <div class='legend floating-holiday'> Floating Holiday
  </div>
   <div class='legend sick-leave'> Sick Leave
  </div>
   <div class='legend planned-leave'> Planned Leave
  </div>
</div>

CSS

.sick-leave {
  background-color:#9e2c2c;
}
.planned-leave {
  background-color:#208820;
}

.bank-holiday {
  background-color:  #6d6dc3;
  word-wrap:break-word
}

.floating-holiday {
  background-color: #826f6f;
}
.legends {
  display:flex;
  justify-content:space-around ;
  margin-top:10px;
  font-family:monospace
}
.legend {
  padding:8px;
  color:white;
  border-radius:10px
}
.fc-day-grid-event > .fc-content {
    white-space: normal;
    letter-spacing:.75px;
    font-family:monospace
}

JavaScript

$(document).ready(function() {

  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month year'
    },

    events: [{
        title: 'Gandhi Jayanti',
        start: '2018-10-02',
        className: 'bank-holiday'

      },
      {
        title: 'Dusheera 🎇',
        start: '2018-10-19',
        className: 'bank-holiday'
      },
      {
        id: 999,
        title: 'Repeating Event',
        start: '2014-06-09T16:00:00'
      },
      {
        id: 999,
        title: 'Repeating Event',
        start: '2014-06-16T16:00:00'
      },
      {
        title: 'Ganesh Chaturthi',
        start: '2018-09-13',
        className: 'floating-holiday'
      },
      {
        title: 'Diwali 😇',
        start: '2018-11-06',
        end: '2018-11-08',
        className: 'bank-holiday'
      },
      {
        title: 'Christmas',
        start: '2018-12-25',
        className: 'bank-holiday'
      }
    ]
  });

});