FullCalendar Debugging Template

by vanHuntsman

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.3/fullcalendar.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.3/fullcalendar.min.js"></script>
<div id='calendar'></div>

CSS

body {
    margin-top: 40px;
    text-align: center;
    font-size: 13px;
    font-family:"Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}
#calendar {
    width: 900px;
    margin: 0 auto;
}

JavaScript

var today = Date.now();
var dayMiliseconds = 86400000;

// A simple event object
basicEvent = {
    title: 'basicEvent1, so sticky ',
    start: Date.now() / 1000    
};
basicEvent2 = {
    title: 'basicEvent2, so sticky',
    start: (Date.now() - dayMiliseconds) / 1000
};

// Create calendar with basic events
// These events are sticky
// It works ok
$("#calendar").fullCalendar({
    events: [basicEvent, basicEvent2]
});

// Remove event from the calendar
$("#calendar").fullCalendar('removeEvents', 1);

//Adding a new event, without specify 'stick' property, will just render it, but it's not maintain.
// It works ok
nonStickyEvent = {
    title: 'new nonStickyEvent',
    start: (Date.now() + dayMiliseconds) / 1000
};
$("#calendar").fullCalendar('renderEvent',
                            nonStickyEvent
                            // stick property is undefined
);

// Adding a new event, specifying the 'stick' property as true, will maintain it.
// It works ok
stickyEvent = {

    title: 'new stickyEvent',
    start: (Date.now() + dayMiliseconds*2) / 1000
};
$("#calendar").fullCalendar('renderEvent', 
                            stickyEvent, 
                            true //we want to stick it
);
console.log($("#calendar").fullCalendar('clientEvents'));

//Adding a sticky event for a non current calendar view E.g: 2 months in advance.
// It works ok
futureEvent = {
    title: 'future sticky Event', 
    start: (Date.now() + dayMiliseconds*60) / 1000
};
$("#calendar").fullCalendar('renderEvent', 
                            futureEvent, 
                            true //we want to stick it
);