timeline-google-calendar.html 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8' />
  5. <link href='../packages-premium/bundle/main.css' rel='stylesheet' />
  6. <script src='../packages-premium/bundle/main.js'></script>
  7. <script src='../packages-premium/bundle/google-calendar.js'></script>
  8. <script>
  9. document.addEventListener('DOMContentLoaded', function() {
  10. var calendarEl = document.getElementById('calendar');
  11. var calendar = new FullCalendar.Calendar(calendarEl, {
  12. now: '2020-09-07',
  13. editable: true, // enable draggable events
  14. aspectRatio: 1.8,
  15. scrollTime: '00:00', // undo default 6am scrollTime
  16. headerToolbar: {
  17. left: 'today prev,next',
  18. center: 'title',
  19. right: 'timelineMonth,timelineYear'
  20. },
  21. initialView: 'timelineMonth',
  22. /*
  23. NOTE: unfortunately, Scheduler doesn't know how to associated events from
  24. Google Calendar with resources, so if you specify a resource list,
  25. nothing will show up :( Working on some solutions.
  26. */
  27. // THIS KEY WON'T WORK IN PRODUCTION!!!
  28. // To make your own Google API key, follow the directions here:
  29. // http://fullcalendar.io/docs/google_calendar/
  30. googleCalendarApiKey: 'AIzaSyDcnW6WejpTOCffshGDDb4neIrXVUA1EAE',
  31. // US Holidays
  32. events: '[email protected]',
  33. eventClick: function(arg) {
  34. // opens events in a popup window
  35. window.open(arg.event.url, 'gcalevent', 'width=700,height=600');
  36. // prevent browser from visiting event's URL in the current tab
  37. arg.jsEvent.preventDefault();
  38. }
  39. });
  40. calendar.render();
  41. });
  42. </script>
  43. <style>
  44. body {
  45. margin: 0;
  46. padding: 0;
  47. font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  48. font-size: 14px;
  49. }
  50. #calendar {
  51. max-width: 1100px;
  52. margin: 50px auto;
  53. }
  54. </style>
  55. </head>
  56. <body>
  57. <div id='calendar'></div>
  58. </body>
  59. </html>