gcal.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link href='../dist/fullcalendar.css' rel='stylesheet' />
  5. <link href='../dist/fullcalendar.print.css' rel='stylesheet' media='print' />
  6. <script src='../lib/jquery/jquery.js'></script>
  7. <script src='../lib/jquery-ui/ui/jquery-ui.js'></script>
  8. <script src='../lib/moment/moment.js'></script>
  9. <script src='../dist/fullcalendar.js'></script>
  10. <script src='../dist/gcal.js'></script>
  11. <script>
  12. $(document).ready(function() {
  13. $('#calendar').fullCalendar({
  14. weekends: false,
  15. header: {
  16. left: 'prev,next today',
  17. center: 'title',
  18. right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
  19. },
  20. //editable: true,
  21. eventSources: [
  22. {
  23. url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
  24. editable: true,
  25. className: 'holiday'
  26. },
  27. /*
  28. $.fullCalendar.gcalFeed(
  29. "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
  30. {
  31. editable: true,
  32. className: 'holiday'
  33. }
  34. ),
  35. */
  36. {
  37. url: "https://www.google.com/calendar/feeds/ht3jlfaac5lfd6263ulfh4tql8%40group.calendar.google.com/public/basic",
  38. currentTimezone: 'America/Edmonton', // 'America/Los_Angeles' 'America/Los Angeles'
  39. editable: true
  40. }
  41. ],
  42. eventClick: function(event) {
  43. console.log(event.start);
  44. console.log(event.end);
  45. return false;
  46. }
  47. });
  48. });
  49. </script>
  50. <style>
  51. .holiday * {
  52. color: yellow !important;
  53. }
  54. </style>
  55. </head>
  56. <body style='font-size:12px'>
  57. <div id='calendar' style='width:900px;margin:20px auto 0;font-family:arial'></div>
  58. </body>
  59. </html>