time-zones.php 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. <?php require_once '../../public/load_lang.php';?>
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8" />
  6. <link href="../lib/main.css" rel="stylesheet" />
  7. <script src="../lib/main.js"></script>
  8. <script src="../../public/js/jquery.js"></script>
  9. <script>
  10. function getCookie(name) {
  11. var start = document.cookie.indexOf(name + "=");
  12. var len = start + name.length + 1;
  13. if (!start && name != document.cookie.substring(0, name.length)) {
  14. return null;
  15. }
  16. if (start == -1) return null;
  17. var end = document.cookie.indexOf(";", len);
  18. if (end == -1) end = document.cookie.length;
  19. return decodeURI(document.cookie.substring(len, end));
  20. }
  21. document.addEventListener("DOMContentLoaded", function () {
  22. var initialTimeZone = "local";
  23. var timeZoneSelectorEl = document.getElementById("time-zone-selector");
  24. var loadingEl = document.getElementById("loading");
  25. var calendarEl = document.getElementById("calendar");
  26. var calendar = new FullCalendar.Calendar(calendarEl, {
  27. timeZone: initialTimeZone,
  28. locale: getCookie("language"),
  29. headerToolbar: {
  30. left: "prev,next today",
  31. center: "title",
  32. right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
  33. },
  34. //initialDate: '2020-09-12',
  35. navLinks: true, // can click day/week names to navigate views
  36. editable: false,
  37. selectable: true,
  38. dayMaxEvents: true, // allow "more" link when too many events
  39. events: {
  40. url: "php/get-events.php",
  41. failure: function () {
  42. document.getElementById("script-warning").style.display = "inline"; // show
  43. },
  44. },
  45. loading: function (bool) {
  46. if (bool) {
  47. loadingEl.style.display = "inline"; // show
  48. } else {
  49. loadingEl.style.display = "none"; // hide
  50. }
  51. },
  52. eventClick: function (info) {
  53. info.jsEvent.preventDefault(); // don't let the browser navigate
  54. if (info.event.url) {
  55. window.open(info.event.url);
  56. }
  57. },
  58. eventTimeFormat: { hour: "numeric", minute: "2-digit" }, //timeZoneName: "short"
  59. dateClick: function (arg) {
  60. console.log("dateClick", calendar.formatIso(arg.date));
  61. },
  62. select: function (arg) {
  63. console.log("select", calendar.formatIso(arg.start), calendar.formatIso(arg.end));
  64. },
  65. });
  66. calendar.render();
  67. // load the list of available timezones, build the <select> options
  68. // it's HIGHLY recommended to use a different library for network requests, not this internal util func
  69. FullCalendar.requestJson(
  70. "GET",
  71. "php/get-time-zones.php",
  72. {},
  73. function (timeZones) {
  74. timeZones.forEach(function (timeZone) {
  75. var optionEl;
  76. if (timeZone !== "UTC") {
  77. // UTC is already in the list
  78. optionEl = document.createElement("option");
  79. optionEl.value = timeZone;
  80. optionEl.innerText = timeZone;
  81. timeZoneSelectorEl.appendChild(optionEl);
  82. }
  83. });
  84. },
  85. function () {
  86. // TODO: handle error
  87. }
  88. );
  89. // when the timezone selector changes, dynamically change the calendar option
  90. timeZoneSelectorEl.addEventListener("change", function () {
  91. calendar.setOption("timeZone", this.value);
  92. });
  93. });
  94. </script>
  95. <style>
  96. body {
  97. margin: 0;
  98. padding: 0;
  99. font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  100. font-size: 14px;
  101. }
  102. #top {
  103. background: #eee;
  104. border-bottom: 1px solid #ddd;
  105. padding: 0 10px;
  106. line-height: 40px;
  107. font-size: 12px;
  108. }
  109. .left {
  110. float: left;
  111. font-size: 150%;
  112. }
  113. .right {
  114. float: right;
  115. }
  116. .clear {
  117. clear: both;
  118. }
  119. #script-warning,
  120. #loading {
  121. display: none;
  122. }
  123. #script-warning {
  124. font-weight: bold;
  125. color: red;
  126. }
  127. #calendar {
  128. max-width: 1100px;
  129. margin: 40px auto;
  130. padding: 0 10px;
  131. }
  132. .tzo {
  133. color: #000;
  134. }
  135. #time-zone-selector{
  136. font-size: 100%;
  137. }
  138. .fc-direction-ltr .fc-daygrid-event.fc-event-end, .fc-direction-rtl .fc-daygrid-event.fc-event-start {
  139. flex-flow: wrap;
  140. }
  141. .fc-event-title{
  142. margin-left: 16px;
  143. }
  144. </style>
  145. </head>
  146. <body>
  147. <div id="top">
  148. <div class="left">
  149. <?php echo $_local->gui->timezone;?>:
  150. <select id="time-zone-selector">
  151. <option value="local" selected>
  152. <?php echo $_local->gui->local;?>
  153. </option>
  154. <option value="UTC">UTC</option>
  155. </select>
  156. </div>
  157. <div class="right">
  158. <span id="loading">
  159. <?php echo $_local->gui->loading;?>...</span>
  160. <span id="script-warning"><code>php/get-events.php</code> must be running.</span>
  161. </div>
  162. <div class="clear"></div>
  163. </div>
  164. <div id="calendar"></div>
  165. </body>
  166. </html>
  167. <script>
  168. document.addEventListener('load',function(){
  169. $("button").each(function () {
  170. if ($(this).html() == "today") {
  171. $(this).html(gLocal.gui.today);
  172. }
  173. if ($(this).html() == "list") {
  174. $(this).html(gLocal.gui.list);
  175. }
  176. if ($(this).html() == "week") {
  177. $(this).html(gLocal.gui.week);
  178. }
  179. if ($(this).html() == "month") {
  180. $(this).html(gLocal.gui.month);
  181. }
  182. if ($(this).html() == "day") {
  183. $(this).html(gLocal.gui.day);
  184. }
  185. });
  186. $("button").click(function () {
  187. $("button").each(function () {
  188. if ($(this).html().indexOf("today") != -1) {
  189. $(this).html(gLocal.gui.today);
  190. }
  191. if ($(this).html().indexOf("list") != -1) {
  192. $(this).html(gLocal.gui.list);
  193. }
  194. if ($(this).html().indexOf("week") != -1) {
  195. $(this).html(gLocal.gui.week);
  196. }
  197. if ($(this).html().indexOf("month") != -1) {
  198. $(this).html(gLocal.gui.month);
  199. }
  200. if ($(this).html().indexOf("day") != -1 && $(this).html().indexOf("today") == -1) {
  201. $(this).html(gLocal.gui.day);
  202. }
  203. });
  204. });
  205. $("div").click(function () {
  206. $("button").each(function () {
  207. if ($(this).html().indexOf("today") != -1) {
  208. $(this).html(gLocal.gui.today);
  209. }
  210. if ($(this).html().indexOf("list") != -1) {
  211. $(this).html(gLocal.gui.list);
  212. }
  213. if ($(this).html().indexOf("week") != -1) {
  214. $(this).html(gLocal.gui.week);
  215. }
  216. if ($(this).html().indexOf("month") != -1) {
  217. $(this).html(gLocal.gui.month);
  218. }
  219. if ($(this).html().indexOf("day") != -1 && $(this).html().indexOf("today") == -1) {
  220. $(this).html(gLocal.gui.day);
  221. }
  222. });
  223. });
  224. })
  225. for(wait_i=1;wait_i<50;wait_i++){
  226. if(document.readyState!="complete"){
  227. setTimeout("",100)
  228. }
  229. else{
  230. break;
  231. }
  232. }
  233. </script>