JSFiddle - React, Tailwind, and code Playground
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/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>
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');
});
});
});