JSFiddle - React, Tailwind, and code Playground

by Doomsday

HTML

<script src="http://www.kula.org.uk/publicscripts/fullcalendar/fullcalendar.min.js"></script>
<link rel="stylesheet" href="http://www.kula.org.uk/publicscripts/fullcalendar/fullcalendar.css">

<div id='mycalendarcontrol'></div>
<div id='mycalendar1' class='calendar'></div>
<div id='mycalendar2' class='calendar'></div>

CSS

#mycalendarcontrol .fc-content {
  display:none;
}

JavaScript

function init(min, max) {
        if(min == undefined)
          min = 10;
        if(max == undefined)
          max = 14;

        $('#mycalendar1').fullCalendar({ 
            defaultView: 'agendaDay',
            minTime:min,
            maxTime:max,
            width: 300,
            height:300,
            header: {
                left: '',
                center: '',
                right: ''
            }
        });
          
        $('#mycalendar2').fullCalendar({ 
            defaultView: 'agendaDay',
            minTime:min,
            maxTime:max,
            width: 300,
            height:300,
            header: {
                left: '',
                center: '',
                right: ''
            }
        });
    }
    var curDate;
    $(document).ready(function() {
    
   $('#mycalendarcontrol').fullCalendar({ 
        defaultView: 'agendaDay',
        width: 300,
        height:100
    });
    init(10,14);
        
    $("#mycalendarcontrol .fc-button-prev").each(function() {
      $(this).click(function() {
          curDate = $('#mycalendarcontrol').fullCalendar('getDate');
          $(".calendar").each(function() {
            $(this).fullCalendar('destroy');
          });
          init(11,13);
          $(".calendar").each(function() {
            $(this).fullCalendar('gotoDate', curDate);
          });
      });
    });
    $("#mycalendarcontrol .fc-button-next").each(function() {
      $(this).click(function() {
          $(".calendar").each(function() {
            $(this).fullCalendar('destroy');
          });
           init(10,14);
          $(".calendar").each(function() {
            $(this).fullCalendar('next');
          });
      });
    });
    $("#mycalendarcontrol .fc-button-today").each(function() {
      $(this).click(function() {
          $(".calendar").each(function() {
            $(this).fullCalendar('today');
          });
      });
    });
    
  });