fullCalendar

by Edward Tanguay

HTML

<link rel="stylesheet" href="http://www.kula.org.uk/publicscripts/fullcalendar/fullcalendar.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.js"></script>
<div id="call-detail-tab">
                    <ul>
                        <li><a href="#call-detail-tab-1">Call Information</a></li>
                    </ul>
                    <div id="call-detail-tab-1">
                     
                    </div>
</div>

<div id="mycalendar"></div>

JavaScript

$('#call-detail-tab').tabs();

var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        $('#mycalendar').fullCalendar({
            theme: true,
            header: {
                left: 'prev today',
                center: 'title',
                right: 'next'
            },
            dayClick: function(date, allDay, jsEvent, view) {
                if (allDay) {
                    alert('Clicked on the entire day: ' + date);
                }else{
                    alert('Clicked on the slot: ' + date);
                }
                alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
                alert('Current view: ' + view.name);
                // change the day's background color just for fun
                $(this).css('background-color', 'red');
            },
            eventClick: function(calEvent, jsEvent, view) {
                alert('Event: ' + calEvent.title);
                alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
                alert('View: ' + view.name);
                // change the border color just for fun
                $(this).css('border-color', 'red');
            },
            eventAfterAllRender: function( view ) { 
                alert('All Items Rendered!');
            },
            eventBackgroundColor: '#C7E89B',
            eventBorderColor: '#E4FCA7',
            eventTextColor: '#000000',
            events: [
                {
                    title: 'All Day Event',
                    start: new Date(y, m, 1)
                },
                {
                    title: 'Long Event',
                    start: new Date(y, m, d-5),
                    end: new Date(y, m, d-2)
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d-3, 16, 0),
                    allDay: false
               ...