json.html 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8' />
  5. <link href='../dist/fullcalendar.css' rel='stylesheet' />
  6. <link href='../dist/fullcalendar.print.css' rel='stylesheet' media='print' />
  7. <script src='../node_modules/superagent/superagent.js'></script>
  8. <script src='../dist/fullcalendar.js'></script>
  9. <script>
  10. document.addEventListener('DOMContentLoaded', function() {
  11. var calendarEl = document.getElementById('calendar');
  12. var calendar = new FullCalendar.Calendar(calendarEl, {
  13. header: {
  14. left: 'prev,next today',
  15. center: 'title',
  16. right: 'month,agendaWeek,agendaDay,listWeek'
  17. },
  18. defaultDate: '2018-04-12',
  19. editable: true,
  20. navLinks: true, // can click day/week names to navigate views
  21. eventLimit: true, // allow "more" link when too many events
  22. events: {
  23. url: 'php/get-events.php',
  24. error: 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: "Lucida Grande",Helvetica,Arial,Verdana,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: 900px;
  62. margin: 40px auto;
  63. padding: 0 10px;
  64. }
  65. </style>
  66. </head>
  67. <body>
  68. <div id='script-warning'>
  69. <code>php/get-events.php</code> must be running.
  70. </div>
  71. <div id='loading'>loading...</div>
  72. <div id='calendar'></div>
  73. </body>
  74. </html>