Açıklama Yok

time-zones.html 4.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  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/timegrid/main.css' rel='stylesheet' />
  8. <link href='../packages/list/main.css' rel='stylesheet' />
  9. <script src='../packages/core/main.js'></script>
  10. <script src='../packages/interaction/main.js'></script>
  11. <script src='../packages/daygrid/main.js'></script>
  12. <script src='../packages/timegrid/main.js'></script>
  13. <script src='../packages/list/main.js'></script>
  14. <script>
  15. document.addEventListener('DOMContentLoaded', function() {
  16. var initialTimeZone = 'local';
  17. var timeZoneSelectorEl = document.getElementById('time-zone-selector');
  18. var loadingEl = document.getElementById('loading');
  19. var calendarEl = document.getElementById('calendar');
  20. var calendar = new FullCalendar.Calendar(calendarEl, {
  21. plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
  22. timeZone: initialTimeZone,
  23. header: {
  24. left: 'prev,next today',
  25. center: 'title',
  26. right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
  27. },
  28. defaultDate: '2019-08-12',
  29. navLinks: true, // can click day/week names to navigate views
  30. editable: true,
  31. selectable: true,
  32. eventLimit: true, // allow "more" link when too many events
  33. events: {
  34. url: 'php/get-events.php',
  35. failure: function() {
  36. document.getElementById('script-warning').style.display = 'inline'; // show
  37. }
  38. },
  39. loading: function(bool) {
  40. if (bool) {
  41. loadingEl.style.display = 'inline'; // show
  42. } else {
  43. loadingEl.style.display = 'none'; // hide
  44. }
  45. },
  46. eventTimeFormat: { hour: 'numeric', minute: '2-digit', timeZoneName: 'short' },
  47. dateClick: function(arg) {
  48. console.log('dateClick', calendar.formatIso(arg.date));
  49. },
  50. select: function(arg) {
  51. console.log('select', calendar.formatIso(arg.start), calendar.formatIso(arg.end));
  52. }
  53. });
  54. calendar.render();
  55. // load the list of available timezones, build the <select> options
  56. // it's HIGHLY recommended to use a different library for network requests, not this internal util func
  57. FullCalendar.requestJson('GET', 'php/get-time-zones.php', {}, function(timeZones) {
  58. timeZones.forEach(function(timeZone) {
  59. var optionEl;
  60. if (timeZone !== 'UTC') { // UTC is already in the list
  61. optionEl = document.createElement('option');
  62. optionEl.value = timeZone;
  63. optionEl.innerText = timeZone;
  64. timeZoneSelectorEl.appendChild(optionEl);
  65. }
  66. });
  67. }, function() {
  68. // TODO: handle error
  69. });
  70. // when the timezone selector changes, dynamically change the calendar option
  71. timeZoneSelectorEl.addEventListener('change', function() {
  72. calendar.setOption('timeZone', this.value);
  73. });
  74. });
  75. </script>
  76. <style>
  77. body {
  78. margin: 0;
  79. padding: 0;
  80. font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  81. font-size: 14px;
  82. }
  83. #top {
  84. background: #eee;
  85. border-bottom: 1px solid #ddd;
  86. padding: 0 10px;
  87. line-height: 40px;
  88. font-size: 12px;
  89. }
  90. .left { float: left }
  91. .right { float: right }
  92. .clear { clear: both }
  93. #script-warning, #loading { display: none }
  94. #script-warning { font-weight: bold; color: red }
  95. #calendar {
  96. max-width: 900px;
  97. margin: 40px auto;
  98. padding: 0 10px;
  99. }
  100. .tzo {
  101. color: #000;
  102. }
  103. </style>
  104. </head>
  105. <body>
  106. <div id='top'>
  107. <div class='left'>
  108. Timezone:
  109. <select id='time-zone-selector'>
  110. <option value='local' selected>local</option>
  111. <option value='UTC'>UTC</option>
  112. </select>
  113. </div>
  114. <div class='right'>
  115. <span id='loading'>loading...</span>
  116. <span id='script-warning'><code>php/get-events.php</code> must be running.</span>
  117. </div>
  118. <div class='clear'></div>
  119. </div>
  120. <div id='calendar'></div>
  121. </body>
  122. </html>