schedule.html

---
layout: schedule
title: Schedule
permalink: /schedule/
---

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-fullscreen-sm">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="modalLabel">Modal title</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
			</div>
			<div class="modal-footer">
				
				<button type="button " class="btn btn-outline-primary schedule_modal_button" id="ICS"> <a href="#" onclick="javascript:download_cal()"> Add to Calendar </a></button>
				<button type="button " class="btn btn-outline-primary schedule_modal_button" id="details"> </button>
				<button type="button " class="btn btn-outline-primary schedule_modal_button" id="midspace_url"> </button>
				<button type="button " class="btn btn-outline-primary schedule_modal_button"
					data-bs-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>


<div class="dropdown" style="z-index:1000000; display: hidden;">

	<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown"
		aria-expanded="false">
		UTC
	</a>

	<ul class="dropdown-menu tz_dropdown" aria-labelledby="dropdownMenuLink" style="z-index: 100000;">
	</ul>
</div>



<div id="dp"> </div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.33/moment-timezone-with-data-2012-2022.min.js"> </script>
<script src="{{ '/assets/js/daypilot-all.min.js' | relative_url }}?v={{ site.time | date: '%Y%m%d%H%M%S' }}"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ical.js/1.4.0/ical.min.js"></script>
<link type="text/css" rel="stylesheet" href="{{ '/assets/css/calendar_white.css' | relative_url }}?v={{ site.time | date: '%Y%m%d%H%M%S' }}" />


<script>

	function download(filename, text) {
		var element = document.createElement('a');
		element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
		element.setAttribute('download', filename);

		element.style.display = 'none';
		document.body.appendChild(element);

		element.click();

		document.body.removeChild(element);
	}

	function create_event(event_details){
		var comp = new ICAL.Component(['vcalendar', [], []])
		comp.updatePropertyWithValue('prodid', '-//ISMIR Calendar')
		var vevent = new ICAL.Component('vevent'),
			event = new ICAL.Event(vevent);
		
		// Add vtimezone
		var comp2 = new ICAL.Component('vtimezone');    
		comp2.updatePropertyWithValue('tzid', 'UTC');  
	

		var subject = new ICAL.Timezone({
			tzid: 'UTC',
			component: comp2,
		});
		comp.addSubcomponent(comp2);

		// event details
		event.uid = event_details.id;
		event.startDate = new ICAL.Time.fromJSDate(event_details.start_date, true);
		event.endDate = new ICAL.Time.fromJSDate(event_details.end_date, true);
		event.location = event_details.location;
		event.summary = event_details.title;
		event.description = event_details.title;
		event.url = event_details.url;
		event.zone = ICAL.Timezone.utcTimezone;
		comp.addSubcomponent(vevent);
		return comp;
	}




	$(document).ready(() => {
		const time_zones = moment.tz.names();
		const no_etc = time_zones.filter((i) => i.split("/")[0] !== "Etc")
		no_etc.map((i) => {
			$(".tz_dropdown").append(
				`<li> <a class='dropdown-item time_button' data-timezone=${i} href="#"> ${i} </a> </li>`
				);

		});
		$(".dropdown").show();
		myModal = new bootstrap.Modal(document.getElementById('myModal'));
		$(".time_zones").show();
		var current_timezone = "utc";

		$(".time_button").click((e) => {
			const target = $(e.target);
			const selected_timezone = target.data("timezone");
			console.log(selected_timezone);
			$("#dropdownMenuLink").text(selected_timezone);
			const DeleteEvents = new Promise((resolve, reject) => {
				const dp_events = dp.events.list;
				var eventIdx = dp_events.length - 1;
				for (eventIdx; eventIdx >= 0; eventIdx--) {
					var myE = dp.events.find(dp.events.list[eventIdx].id);
					dp.events.remove(myE);
					if (eventIdx === 0) {
						resolve(1);
					}
				}
			});

			DeleteEvents.then((i) => {
				days.map(j => add_to_DayPilot(dp, j, selected_timezone));

			});
			current_timezone = selected_timezone;


		});
		
	});

	const colormap = {
		"Special": "#BA274A",
		"Tutorial": "#0CA7DB",
		"WiMIR": "#19535f",
		"Music": "#ECE5F0",
		"Social": "#9D6381",
		"Main": "#FAA916",
		"Poster": "#ff5733",
		"Keynote": " #3371ff",
		"Industry": " #029e5f",
		"LBD": " #819e02",
		"Satellite": "#0f0f0f"
	};


	function download_cal(){
		download('cal.ics', cal.toString());
	}
	var cal = undefined;

	function add_to_DayPilot(dp, json, timezone) {
		for (var i in json.schedule) {
			const date = json.schedule[i].date;
			const start = json.schedule[i].start_time;
			const end = json.schedule[i].end_time;
			const ends = end.split(" ");

			const event_type = json.schedule[i].type;
			var event_start;
			var event_end;
			if (timezone === "utc") {
				event_start = moment.utc(date + " " + start).toDate();
				if (ends.length === 2) {
					event_end = moment.utc(ends[0] + " " + ends[1]).toDate();
				} else {
					event_end = moment.utc(date + " " + end).toDate();
				}


			} else {
				event_start = moment.utc(date + " " + start).tz(timezone).format("YYYY-MM-DD HH:mm:ss");
				if (ends.length === 2) {
					event_end = moment.utc(ends[0] + " " + ends[1]).tz(timezone).format("YYYY-MM-DD HH:mm:ss");
				} else {
					event_end = moment.utc(date + " " + end).tz(timezone).format("YYYY-MM-DD HH:mm:ss");
				}
			}
			const dp_e = new DayPilot.Event({
				start: new DayPilot.Date(event_start, false),
				end: new DayPilot.Date(event_end, false),
				id: DayPilot.guid(),
				text: `${json.schedule[i].title}`,
				tag: {
					"type": event_type,
					"details_url": json.schedule[i].details,
					"midspace_url": json.schedule[i].midspace,
					"utc_start": moment.utc(date + " " + start).toDate(),
					"utc_end": moment.utc(date + " " + end).toDate(),
					"description": json.schedule[i].description,
				},
				backColor: colormap[event_type],
				fontColor: event_type === "Music" ? "black" : "white",
				fontSize: "1em"
			});
			dp.events.add(dp_e);
		}
	}

	const nov6 = JSON.parse('{{ site.data.nov6 | jsonify }}');
	const nov7 = JSON.parse('{{ site.data.nov7 | jsonify }}');
	const nov8 = JSON.parse('{{ site.data.nov8 | jsonify }}');
	const nov9 = JSON.parse('{{ site.data.nov9 | jsonify }}');
	const nov10 = JSON.parse('{{ site.data.nov10 | jsonify }}');
	const nov11 = JSON.parse('{{ site.data.nov11 | jsonify }}');
	const nov12 = JSON.parse('{{ site.data.nov12 | jsonify }}');
	const nov13 = JSON.parse('{{ site.data.nov13 | jsonify }}');

	const days = [nov6, nov7, nov8, nov9, nov10, nov11, nov12, nov13];

	var dp = $("#dp").daypilotCalendar({
		cssClassPrefix: "calendar_white",
		startDate: new DayPilot.Date("2021-11-07"),
		endDate: new DayPilot.Date("2021-11-13"),
		rowHeaderWidthAutoFit: true,
		rowHeaderScrolling: true,
		dynamicEventRendering: true,
		progressiveRowRendering: true,
		dayBeginsHour: 6,
		dayEndsHour: 0,
		days: 7,
		cellDuration: 30,
		cellWidthSpec: "Auto",
		viewType: "Resource",
		allowEventOverlap: false,
		eventArrangement: "SideBySide",
		timeRangeSelectedHandling: "Disabled",
		eventDeleteHandling: "Disabled",
		eventMoveHandling: "Disabled",
		eventResizeHandling: "Disabled",
		onEventClicked: (args) => {
			const my_data = args.e.data.tag;	
			const details_url = my_data.details_url;
			const midspace_url = my_data.midspace_url;
			const description = my_data.description;
			if (details_url !== undefined) {
				$("#details").html(`<a href="${details_url}" target="_blank">Details</a>`);
				$("#details").show();
			} else {
				$("#details").html(`<a href="#" target="_blank">Details</a>`);
				$("#details").hide();
			}
			
			if (midspace_url !== undefined) {
				$("#midspace_url").html(`<a href="${midspace_url}" target="_blank">Midspace</a>`);
				$("#midspace_url").show();
			} else {
				$("#midspace_url").hide();
			}

			if (description !== undefined){ 
				$(".modal-body").html(description);
			}else{
				$(".modal-body").html("");			
			}

			cal = create_event({
				id: args.e.data.id,
				"start_date": my_data.utc_start,
				"end_date": my_data.utc_end,
				"title": args.e.text(),
				"location": "https://ismir2021.ismir.net",
				"description": description				
			});

			
			$('#myModal').appendTo("body");
			$(".modal-title").html(`${args.e.text()}`);
			myModal.show();
			$(".modal-backdrop").hide()
		},
		eventHoverHandling: "Disabled",
	});
	days.map(i => add_to_DayPilot(dp, i, "utc"));
	dp.init();
	
	var myModalEl = document.getElementById('myModal');
	myModalEl.addEventListener('hide.bs.modal', function (event) {
		cal = undefined;
	});

</script>