<apex:page showHeader="true" sidebar="true">
<apex:stylesheet value="{!URLFOR($Resource.FullCalendar, '/fullcalendar-3.1.0/fullcalendar.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.FullCalendar,'/fullcalendar-3.1.0/lib/jquery.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.FullCalendar,'/fullcalendar-3.1.0/lib/moment.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.FullCalendar,'/fullcalendar-3.1.0/fullcalendar.js')}"/>

<script>
        $(document).ready(function() {
    // page is now ready, initialize the calendar...
    $('#calendar').fullCalendar({           header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            editable: false,
            events:
            [{
                title:'Event Number 1',
                start:new moment('2017-01-24 13:00:00').add(1, 'hours').format('LLL'),
                end:new moment('2017-01-24 14:45:00').format('LLL'),
                backgroundColor:'transparent',
                textColor:'black',
                allDay:false
            },{
                title:'Event Number 2',
                start:new moment('2017-01-26').format('YYYY-MM-DD'),
                end:new moment('2017-01-26').format('YYYY-MM-DD'),
                backgroundColor:'transparent',
                textColor:'red',
                allDay:true
            }]
    });});
    </script>
    <div id='calendar'></div>
</apex:page>