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">
CalendarMonth<div id="mycalendar1"></div>
CalendarDay<div id="mycalendar2"></div>

JavaScript

$('#mycalendar1').fullCalendar(
{
    header: {
        left: 'prev,next today',
        center: 'title',
        right: ''
    },
    dayClick: function( date, allDay, jsEvent, view ) {
        dayClicked(date);
    },
    events: [                         
        {
            title  : 'event2',
            start  : '2011-03-10',
            end    : '2011-07-25'
        }
    ]
}); 


$('#mycalendar2').fullCalendar(
            {
                defaultView: 'agendaDay',
                header: {
                    left: '',
                    center: '',
                    right: ''
                },              
                events: [                         
                        {
                            title  : 'event2',
                            start  : '2011-03-10',
                            end    : '2011-07-25'
                        }
                    ]
           }); 


function dayClicked(date){
    $('#mycalendar2').fullCalendar( 'gotoDate', date );
}

$("#mycalendar1 .fc-button-prev").each(function() {
  $(this).click(function() {
      $("#mycalendar2").each(function() {
        $(this).fullCalendar('prev');
      });
  });
});
$("#mycalendar1 .fc-button-next").each(function() {
  $(this).click(function() {
      $("#mycalendar2").each(function() {
        $(this).fullCalendar('next');
      });
  });
});
$("#mycalendar1 .fc-button-today").each(function() {
  $(this).click(function() {
      $("#mycalendar2").each(function() {
        $(this).fullCalendar('today');
      });
  });
});