JSFiddle - React, Tailwind, and code Playground

by Shin Okada

HTML

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

JavaScript

var repeatingEvents = [{
  title: "My repeating event",
  id: 1,
  start: '10:00', // a start time (10am in this example)
  end: '14:00', // an end time (6pm in this example)
  dow: [1, 3, 5], // Repeat monday and thursday
  ranges: [{ //repeating events are only displayed if they are within one of the following ranges.
    start: moment().startOf('week'), //next two weeks
    end: moment().endOf('week').add(7, 'd'),
  }, {
    start: moment('2017-08-01', 'YYYY-MM-DD'), //all of february
    end: moment('2017-08-01', 'YYYY-MM-DD').endOf('month'),
  }],
}];

//emulate server
var getEvents = function(start, end) {
  return repeatingEvents;
}

$('#calendar').fullCalendar({
  defaultDate: moment(),
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
  },
  eventSources: [
    {
      events: [ // put the array in the `events` property
        {
          title: 'event1',
          start: '2017-06-11'
        }, {
          title: 'event2',
          start: '2017-06-15',
          end: '2017-06-17'
        }, {
          title: 'event3',
          start: '2017-06-09T12:30:00',
        }
      ],
    }
  ],
  defaultView: 'month',
  eventRender: function(event, element, view) {
    if (event.ranges) {
      return (event.ranges.filter(function(range) {
        return (event.start.isBefore(range.end) &&
          event.end.isAfter(range.start));
      }).length) > 0;
    };
  },
  events: function(start, end, timezone, callback) {
    var events = getEvents(start, end); //this should be a JSON request

    callback(events);
  },
});