gcal.html 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  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='../../node_modules/jquery/dist/jquery.js'></script>
  7. <script src='../../node_modules/moment/moment.js'></script>
  8. <script src='../../dist/fullcalendar.js'></script>
  9. <script src='../../dist/plugins/google-calendar.js'></script>
  10. <script>
  11. $(document).ready(function() {
  12. $('#calendar').fullCalendar({
  13. weekends: false,
  14. headerToolbar: {
  15. left: 'prev,next today',
  16. center: 'title',
  17. right: 'dayGridMonth,week,dayGridWeek,day,dayGridDay'
  18. },
  19. //editable: true,
  20. eventSources: [
  21. {
  22. url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
  23. editable: true,
  24. className: 'holiday'
  25. },
  26. /*
  27. FullCalendar.gcalFeed(
  28. "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
  29. {
  30. editable: true,
  31. className: 'holiday'
  32. }
  33. ),
  34. */
  35. {
  36. url: "https://www.google.com/calendar/feeds/ht3jlfaac5lfd6263ulfh4tql8%40group.calendar.google.com/public/basic",
  37. currentTimezone: 'America/Edmonton', // 'America/Los_Angeles' 'America/Los Angeles'
  38. editable: true
  39. }
  40. ],
  41. eventClick: function(event) {
  42. console.log(event.start);
  43. console.log(event.end);
  44. return false;
  45. }
  46. });
  47. });
  48. </script>
  49. <style>
  50. .holiday * {
  51. color: yellow !important;
  52. }
  53. </style>
  54. </head>
  55. <body style='font-size:12px'>
  56. <div id='calendar' style='width:900px;margin:20px auto 0;font-family:arial'></div>
  57. </body>
  58. </html>