gcal.html 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8' />
  5. <link href='../fullcalendar.css' rel='stylesheet' />
  6. <link href='../fullcalendar.print.css' rel='stylesheet' media='print' />
  7. <script src='../lib/moment.min.js'></script>
  8. <script src='../lib/jquery.min.js'></script>
  9. <script src='../fullcalendar.min.js'></script>
  10. <script src='../gcal.js'></script>
  11. <script>
  12. $(document).ready(function() {
  13. $('#calendar').fullCalendar({
  14. // US Holidays
  15. events: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',
  16. eventClick: function(event) {
  17. // opens events in a popup window
  18. window.open(event.url, 'gcalevent', 'width=700,height=600');
  19. return false;
  20. },
  21. loading: function(bool) {
  22. $('#loading').toggle(bool);
  23. }
  24. });
  25. });
  26. </script>
  27. <style>
  28. body {
  29. margin: 40px 10px;
  30. padding: 0;
  31. font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  32. font-size: 14px;
  33. }
  34. #loading {
  35. display: none;
  36. position: absolute;
  37. top: 10px;
  38. right: 10px;
  39. }
  40. #calendar {
  41. max-width: 900px;
  42. margin: 0 auto;
  43. }
  44. </style>
  45. </head>
  46. <body>
  47. <div id='loading'>loading...</div>
  48. <div id='calendar'></div>
  49. </body>
  50. </html>