Brak opisu

google-calendar.html 2.1KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8' />
  5. <link href='../packages/core/main.css' rel='stylesheet' />
  6. <link href='../packages/daygrid/main.css' rel='stylesheet' />
  7. <link href='../packages/list/main.css' rel='stylesheet' />
  8. <script src='../packages/core/main.js'></script>
  9. <script src='../packages/interaction/main.js'></script>
  10. <script src='../packages/daygrid/main.js'></script>
  11. <script src='../packages/list/main.js'></script>
  12. <script src='../packages/google-calendar/main.js'></script>
  13. <script>
  14. document.addEventListener('DOMContentLoaded', function() {
  15. var calendarEl = document.getElementById('calendar');
  16. var calendar = new FullCalendar.Calendar(calendarEl, {
  17. plugins: [ 'interaction', 'dayGrid', 'list', 'googleCalendar' ],
  18. header: {
  19. left: 'prev,next today',
  20. center: 'title',
  21. right: 'dayGridMonth,listYear'
  22. },
  23. displayEventTime: false, // don't show the time column in list view
  24. // THIS KEY WON'T WORK IN PRODUCTION!!!
  25. // To make your own Google API key, follow the directions here:
  26. // http://fullcalendar.io/docs/google_calendar/
  27. googleCalendarApiKey: 'AIzaSyDcnW6WejpTOCffshGDDb4neIrXVUA1EAE',
  28. // US Holidays
  29. events: 'en.usa#holiday@group.v.calendar.google.com',
  30. eventClick: function(arg) {
  31. // opens events in a popup window
  32. window.open(arg.event.url, 'google-calendar-event', 'width=700,height=600');
  33. arg.jsEvent.preventDefault() // don't navigate in main tab
  34. },
  35. loading: function(bool) {
  36. document.getElementById('loading').style.display =
  37. bool ? 'block' : 'none';
  38. }
  39. });
  40. calendar.render();
  41. });
  42. </script>
  43. <style>
  44. body {
  45. margin: 40px 10px;
  46. padding: 0;
  47. font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  48. font-size: 14px;
  49. }
  50. #loading {
  51. display: none;
  52. position: absolute;
  53. top: 10px;
  54. right: 10px;
  55. }
  56. #calendar {
  57. max-width: 900px;
  58. margin: 0 auto;
  59. }
  60. </style>
  61. </head>
  62. <body>
  63. <div id='loading'>loading...</div>
  64. <div id='calendar'></div>
  65. </body>
  66. </html>