gcal.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8' />
  5. <link href='../fullcalendar.min.css' rel='stylesheet' />
  6. <link href='../fullcalendar.print.min.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.min.js'></script>
  11. <script>
  12. $(document).ready(function() {
  13. $('#calendar').fullCalendar({
  14. header: {
  15. left: 'prev,next today',
  16. center: 'title',
  17. right: 'month,listYear'
  18. },
  19. displayEventTime: false, // don't show the time column in list view
  20. // THIS KEY WON'T WORK IN PRODUCTION!!!
  21. // To make your own Google API key, follow the directions here:
  22. // http://fullcalendar.io/docs/google_calendar/
  23. googleCalendarApiKey: 'AIzaSyDcnW6WejpTOCffshGDDb4neIrXVUA1EAE',
  24. // US Holidays
  25. events: 'en.usa#holiday@group.v.calendar.google.com',
  26. eventClick: function(event) {
  27. // opens events in a popup window
  28. window.open(event.url, 'gcalevent', 'width=700,height=600');
  29. return false;
  30. },
  31. loading: function(bool) {
  32. $('#loading').toggle(bool);
  33. }
  34. });
  35. });
  36. </script>
  37. <style>
  38. body {
  39. margin: 40px 10px;
  40. padding: 0;
  41. font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  42. font-size: 14px;
  43. }
  44. #loading {
  45. display: none;
  46. position: absolute;
  47. top: 10px;
  48. right: 10px;
  49. }
  50. #calendar {
  51. max-width: 900px;
  52. margin: 0 auto;
  53. }
  54. </style>
  55. </head>
  56. <body>
  57. <div id='loading'>loading...</div>
  58. <div id='calendar'></div>
  59. </body>
  60. </html>