<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <script type='text/javascript' src='loader.js'></script> <script type='text/javascript'> var cal; var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); var gcalFeed = $.fullCalendar.gcalFeed("http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic"); var jsonFeed = "../examples/json-events.php"; var staticEvents = [ { 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) }, { title: 'T event', start: y + '-06-06T10:20:00', allDay: false }, { title: 'No T event', start: y + '-06-06 11:30:00', allDay: false }, { id: 999, title: 'Repeating Event', start: new Date(y, m, d-3, 16, 0), allDay: false }, { id: 999, title: 'Repeating Event', start: new Date(y, m, d+4, 16, 0), allDay: false }, { title: 'Meeting', start: new Date(y, m, d, 10, 30), allDay: false }, { id: 777, title: 'Lunch', start: new Date(y, m, d, 12, 0), end: new Date(y, m, d, 14, 0), allDay: false, //className: 'yellow-event black-text-event', className: ['yellow-event', 'black-text-event'] }, { title: 'Birthday Party', start: new Date(y, m, d+1, 19, 0), end: new Date(y, m, d+1, 22, 30), allDay: false }, { title: 'Click for Google', start: new Date(y, m, 28), end: new Date(y, m, 29), url: 'http://google.com/' } ]; var customSource = function(start, end, callback) { callback([ { title: 'FIRST', start: start }, { title: 'LAST', start: new Date(end - 1) } ]); }; //$.ajaxSetup({ // cache: false // should NOT insert an extra _ parameter //}); $(document).ready(function() { cal = $('#calendar').fullCalendar({ editable: true, header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,basicWeek,agendaDay,basicDay' }, //events: staticEvents, eventSources: [ staticEvents, jsonFeed, gcalFeed, customSource ], loading: function(bool) { if (bool) { $('#loading').show(); }else{ $('#loading').hide(); } } /* , startParam: 'mystart', endParam: 'myend', cacheParam: 'uniq' */ }); }); </script> <style> .red-event a { background: red; } .yellow-event a { background: yellow; } .black-text-event a { color: #000; } button { font-size: 11px; } </style> </head> <body style='font-size:12px'> <div id='loading' style='position:absolute;top:0;left:0;display:none'>loading...</div> <p> <button onclick="cal.fullCalendar('refetchEvents')">refetch</button> </p> <div id='calendar' style='width:900px;margin:20px auto 0;font-family:arial'></div> </body> </html>