gcal.html 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  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. // THIS KEY WON'T WORK IN PRODUCTION!!!
  15. // To make your own Google API key, follow the directions here:
  16. // http://fullcalendar.io/docs/google_calendar/
  17. googleCalendarApiKey: 'AIzaSyDcnW6WejpTOCffshGDDb4neIrXVUA1EAE',
  18. // US Holidays
  19. events: 'usa__en@holiday.calendar.google.com',
  20. eventClick: function(event) {
  21. // opens events in a popup window
  22. window.open(event.url, 'gcalevent', 'width=700,height=600');
  23. return false;
  24. },
  25. loading: function(bool) {
  26. $('#loading').toggle(bool);
  27. }
  28. });
  29. });
  30. </script>
  31. <style>
  32. body {
  33. margin: 40px 10px;
  34. padding: 0;
  35. font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  36. font-size: 14px;
  37. }
  38. #loading {
  39. display: none;
  40. position: absolute;
  41. top: 10px;
  42. right: 10px;
  43. }
  44. #calendar {
  45. max-width: 900px;
  46. margin: 0 auto;
  47. }
  48. </style>
  49. </head>
  50. <body>
  51. <div id='loading'>loading...</div>
  52. <div id='calendar'></div>
  53. </body>
  54. </html>