iapt-platform
/
mint
spogulis no https://github.com/iapt-platform/mint.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link href="../lib/main.css" rel="stylesheet" />
		<script src="../lib/main.js"></script>
		<script>
			function getCookie(name) {
				var start = document.cookie.indexOf(name + "=");
				var len = start + name.length + 1;
				if (!start && name != document.cookie.substring(0, name.length)) {
					return null;
				}
				if (start == -1) return null;
				var end = document.cookie.indexOf(";", len);
				if (end == -1) end = document.cookie.length;
				return decodeURI(document.cookie.substring(len, end));
			}

			document.addEventListener("DOMContentLoaded", function () {
				var initialTimeZone = "local";
				var timeZoneSelectorEl = document.getElementById("time-zone-selector");
				var loadingEl = document.getElementById("loading");
				var calendarEl = document.getElementById("calendar");

				var calendar = new FullCalendar.Calendar(calendarEl, {
					timeZone: initialTimeZone,
					locale: getCookie("language"),
					headerToolbar: {
						left: "prev,next today",
						center: "title",
						right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
					},
					//initialDate: "2020-12-12",
					navLinks: true, // can click day/week names to navigate views
					editable: true,
					selectable: true,
					dayMaxEvents: true, // allow "more" link when too many events
					events: {
						url: "php/get-events.php",
						failure: function () {
							document.getElementById("script-warning").style.display = "inline"; // show
						},
					},
					eventClick: function (info) {
						info.jsEvent.preventDefault(); // don't let the browser navigate

						if (info.event.url) {
							window.open(info.event.url);
						}
					},

					loading: function (bool) {
						if (bool) {
							loadingEl.style.display = "inline"; // show
						} else {
							loadingEl.style.display = "none"; // hide
						}
					},

					eventTimeFormat: { hour: "numeric", minute: "2-digit" },

					dateClick: function (arg) {
						console.log("dateClick", calendar.formatIso(arg.date));
					},
					select: function (arg) {
						console.log("select", calendar.formatIso(arg.start), calendar.formatIso(arg.end));
					},
				});

				calendar.render();

				// load the list of available timezones, build the <select> options
				// it's HIGHLY recommended to use a different library for network requests, not this internal util func
				FullCalendar.requestJson(
					"GET",
					"php/get-time-zones.php",
					{},
					function (timeZones) {
						timeZones.forEach(function (timeZone) {
							var optionEl;

							if (timeZone !== "UTC") {
								// UTC is already in the list
								optionEl = document.createElement("option");
								optionEl.value = timeZone;
								optionEl.innerText = timeZone;
								timeZoneSelectorEl.appendChild(optionEl);
							}
						});
					},
					function () {
						// TODO: handle error
					}
				);

				// when the timezone selector changes, dynamically change the calendar option
				timeZoneSelectorEl.addEventListener("change", function () {
					calendar.setOption("timeZone", this.value);
				});
			});
		</script>
		<style>
			body {
				margin: 0;
				padding: 0;
				font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
				font-size: 14px;
			}

			#top {
				background: #eee;
				border-bottom: 1px solid #ddd;
				padding: 0 10px;
				line-height: 40px;
				font-size: 12px;
			}
			.left {
				float: left;
			}
			.right {
				float: right;
			}
			.clear {
				clear: both;
			}

			#script-warning,
			#loading {
				display: none;
			}
			#script-warning {
				font-weight: bold;
				color: red;
			}

			#calendar {
				max-width: 1100px;
				margin: 40px auto;
				padding: 0 10px;
			}

			.tzo {
				color: #000;
			}
		</style>
	</head>
	<body>
		<div id="top">
			<div class="left">
				Timezone:
				<select id="time-zone-selector">
					<option value="local" selected>local</option>
					<option value="UTC">UTC</option>
				</select>
			</div>

			<div class="right">
				<span id="loading">loading...</span>
				<span id="script-warning"><code>php/get-events.php</code> must be running.</span>
			</div>

			<div class="clear"></div>
		</div>

		<div id="calendar"></div>
	</body>
</html>