icalendar.html 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8' />
  5. <script src='https://github.com/mozilla-comm/ical.js/releases/download/v1.4.0/ical.js'></script>
  6. <script src='../../packages/core/dist/index.global.js'></script>
  7. <script src='../../packages/daygrid/dist/index.global.js'></script>
  8. <script src='../../packages/list/dist/index.global.js'></script>
  9. <script src='../../packages/icalendar/dist/index.global.js'></script>
  10. <script>
  11. document.addEventListener('DOMContentLoaded', function() {
  12. var calendarEl = document.getElementById('calendar');
  13. var calendar = new FullCalendar.Calendar(calendarEl, {
  14. displayEventTime: false,
  15. initialDate: '2019-04-01',
  16. headerToolbar: {
  17. left: 'prev,next today',
  18. center: 'title',
  19. right: 'dayGridMonth,listYear'
  20. },
  21. events: {
  22. url: 'ics/feed.ics',
  23. format: 'ics',
  24. failure: function() {
  25. document.getElementById('script-warning').style.display = 'block';
  26. }
  27. },
  28. loading: function(bool) {
  29. document.getElementById('loading').style.display =
  30. bool ? 'block' : 'none';
  31. }
  32. });
  33. calendar.render();
  34. });
  35. </script>
  36. <style>
  37. body {
  38. margin: 0;
  39. padding: 0;
  40. font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  41. font-size: 14px;
  42. }
  43. #script-warning {
  44. display: none;
  45. background: #eee;
  46. border-bottom: 1px solid #ddd;
  47. padding: 0 10px;
  48. line-height: 40px;
  49. text-align: center;
  50. font-weight: bold;
  51. font-size: 12px;
  52. color: red;
  53. }
  54. #loading {
  55. display: none;
  56. position: absolute;
  57. top: 10px;
  58. right: 10px;
  59. }
  60. #calendar {
  61. max-width: 1100px;
  62. margin: 40px auto;
  63. padding: 0 10px;
  64. }
  65. </style>
  66. </head>
  67. <body>
  68. <div id='script-warning'>
  69. <code>ics/feed.ics</code> must be servable
  70. </div>
  71. <div id='loading'>loading...</div>
  72. <div id='calendar'></div>
  73. </body>
  74. </html>