JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css">
<script src="http://www.arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js"></script>
<script src="http://arshaw.com/js/fullcalendar-1.5.4/fullcalendar/gcal.js"></script>
<div style="border:solid 2px red;">
<div id='calendar'></div>
</div>
JavaScript
$(document).ready(function () {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var lastView;
var daySource = new Object();
daySource.title = 'DAY'; // this should be string
daySource.start = new Date(y, m, d); // this should be date object
daySource.end = new Date(y, m, d);
var day = new Array();
day[0] = daySource;
var monthSource = new Object();
monthSource.title = 'MONTH'; // this should be string
monthSource.start = new Date(y, m, d); // this should be date object
monthSource.end = new Date(y, m, d);
var month = new Array();
month[0] = monthSource;
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
columnFormat: {
month: 'ddd',
week: 'ddd d/M',
day: 'dddd d/M'
},
defaultView: 'agendaDay',
viewDisplay: function (view) {
if (lastView == 'undefined') {
lastView = 'firstRun';
}
if (view.name !== lastView) {
if (view.name == 'agendaWeek') {
$('#calendar').fullCalendar('addEventSource', month);
$('#calendar').fullCalendar('removeEventSource', day);
$('#calendar').fullCalendar('removeEventSource', day);
$('#calendar').fullCalendar('renderEvents');
}
if (view.name == 'agendaDay') {
$('#calendar').fullCalendar('addEventSource', day);
$('#calendar').fullCalendar('removeEventSource', month);
$('#calendar').fullCalendar('removeEventSource', month);
$('#calendar').fullCalendar('renderEvents');
}
if (view.name == 'month') {
...