<!DOCTYPE html> <html> <head> <link href='../fullcalendar/fullcalendar.css' rel='stylesheet' /> <link href='../fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' /> <script src='../jquery/jquery-1.9.1.min.js'></script> <script src='../jquery/jquery-ui-1.10.2.custom.min.js'></script> <script src='../fullcalendar/fullcalendar.min.js'></script> <script src='../fullcalendar/gcal.js'></script> <script> $(document).ready(function() { $('#calendar').fullCalendar({ // US Holidays events: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic', eventClick: function(event) { // opens events in a popup window window.open(event.url, 'gcalevent', 'width=700,height=600'); return false; }, loading: function(bool) { if (bool) { $('#loading').show(); }else{ $('#loading').hide(); } } }); }); </script> <style> body { margin-top: 40px; text-align: center; font-size: 14px; font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; } #loading { position: absolute; top: 5px; right: 5px; } #calendar { width: 900px; margin: 0 auto; } </style> </head> <body> <div id='loading' style='display:none'>loading...</div> <div id='calendar'></div> </body> </html>