gcal.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. <link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.css' />
  5. <link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.print.css' media='print' />
  6. <script type='text/javascript' src='../jquery/jquery-1.7.1.min.js'></script>
  7. <script type='text/javascript' src='../jquery/jquery-ui-1.8.17.custom.min.js'></script>
  8. <script type='text/javascript' src='../fullcalendar/fullcalendar.min.js'></script>
  9. <script type='text/javascript' src='../fullcalendar/gcal.js'></script>
  10. <script type='text/javascript'>
  11. $(document).ready(function() {
  12. $('#calendar').fullCalendar({
  13. // US Holidays
  14. events: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',
  15. eventClick: function(event) {
  16. // opens events in a popup window
  17. window.open(event.url, 'gcalevent', 'width=700,height=600');
  18. return false;
  19. },
  20. loading: function(bool) {
  21. if (bool) {
  22. $('#loading').show();
  23. }else{
  24. $('#loading').hide();
  25. }
  26. }
  27. });
  28. });
  29. </script>
  30. <style type='text/css'>
  31. body {
  32. margin-top: 40px;
  33. text-align: center;
  34. font-size: 14px;
  35. font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  36. }
  37. #loading {
  38. position: absolute;
  39. top: 5px;
  40. right: 5px;
  41. }
  42. #calendar {
  43. width: 900px;
  44. margin: 0 auto;
  45. }
  46. </style>
  47. </head>
  48. <body>
  49. <div id='loading' style='display:none'>loading...</div>
  50. <div id='calendar'></div>
  51. </body>
  52. </html>