JSFiddle - React, Tailwind, and code Playground
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(
{
defaultView: 'agendaWeek',
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: 'agendaWeek',
header: {
left: '',
center: '',
right: ''
},
events: [
{
title : 'event2',
start : '2011-03-10',
end : '2011-07-25'
}
]
});
$('#mycalendar2').fullCalendar('next');
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');
$(this).fullCalendar('next');
});
});
});