stickercalendar/htdocs/index.php

<?php require_once('../config.inc'); ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style type="text/css">
	html,body {
		margin: 0px;
		padding: 0px;
	}
	.navigation {
		height: 5%;
	}
	.content {
		width: 100%;
		height: 95%;
		display: flex;
	}
	.calendar-view {
		width: 80%;
		max-height: 80%;
		text-align: center;
		padding-right: 3px;
		margin: 5px;
	}
	#calendar {
		background-color: lightgray;
		max-width: 100%;
		width: 100%;
	}

	#calendar-header {
		border-top: 2px solid black;
		border-left: 2px solid black;
		border-right: 2px solid black;
		padding: 30px;
	}

	#calendar-header h1 {
		margin: 0px;

	}
	.sticker-sidebar {
		width: 20%;
		height: 100%;
		overflow-x: hidden;
		overflow-y: scroll;
		padding-left: 3px;

	}
	.sticker-sidebar button {
		width: 100%;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.sticker-sidebar img {
		max-width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
</style>
<div class="navigation"><a href="/">Today</a> <a href="/chart">Chart</a></div>
<div class="content">
	<div class="calendar-view">
		<div id="calendar-header"><h1><a href="">&lt;&lt</a> September 2017 <a href="">&gt;&gt</a></h1></div>
		<canvas id="calendar"></canvas>
	</div>
	<div class="sticker-sidebar">
		<button>Upload Sticker</button>
		<img class="sticker" id="sticker-B7875B4B" src="/images/stickers/sticker_1.png" draggable="true" />
		<img class="sticker" id="sticker-EC13AB35" src="/images/stickers/sticker_2.png" draggable="true" />
		<img class="sticker" id="sticker-29B49FCE" src="/images/stickers/sticker_3.png" draggable="true" />
		<img class="sticker" id="sticker-ACDABF8A" src="/images/stickers/sticker_4.png" draggable="true" />
		<img class="sticker" id="sticker-64AFE39D" src="/images/stickers/sticker_5.png" draggable="true" />
		<img class="sticker" id="sticker-F0919683" src="/images/stickers/sticker_6.png" draggable="true" />
		<img class="sticker" id="sticker-081B2451" src="/images/stickers/sticker_7.png" draggable="true" />
		<img class="sticker" id="sticker-DEFB64A3" src="/images/stickers/sticker_8.png" draggable="true" />
		<img class="sticker" id="sticker-017BB5B7" src="/images/stickers/sticker_9.png" draggable="true" />
	</div>
</div>
<footer class="footer"></footer>
<script type="text/javascript">
	window.addEventListener("resize", function(event){
		resizeCanvas();
		drawCalendar();
	});

	document.addEventListener("DOMContentLoaded", function() {
		resizeCanvas();
		drawCalendar();

		var stickers = document.getElementsByClassName("sticker");
		for(var i = 0; i < stickers.length; i++) {
			stickers[i].addEventListener("dragstart", function(event) {
				event.dataTransfer.setData("image", event.target.id);
				event.dataTransfer.setData("grab-location-x", event.offsetX);
				event.dataTransfer.setData("grab-location-y", event.offsetY);
				//event.dataTransfer.setDragImage(image, event.offsetX, event.offsetY);
			});
		}

		var canvas = document.getElementById("calendar");
		canvas.addEventListener("dragover", function(event) {
			event.preventDefault();
		}, false);
		canvas.addEventListener("drop", function(event) {
			event.preventDefault();
    		var imageId = event.dataTransfer.getData("image");
    		var grabX = event.dataTransfer.getData('grab-location-x');
    		var grabY = event.dataTransfer.getData('grab-location-y');
    		var sticker = document.getElementById(imageId);
    		addStickerToDay(sticker, event.offsetX - grabX, event.offsetY - grabY);
		}, false);
	});

	function addStickerToDay(sticker, x, y) {
		var canvas = document.getElementById("calendar");
		var context = canvas.getContext("2d");

		var width = canvas.width;
		var height = canvas.height;

		var dayColumns = parseInt(width / 7);
		var weekColumns = parseInt(height / 5);

		//var scaled = scaleImage(sticker.width, sticker.height, dayColumns - 10, weekColumns - 10);
		//context.drawImage(sticker, x, y, scaled.width, scaled.height);
		context.drawImage(sticker, x, y);
	}

	function resizeCanvas() {
		var canvas = document.getElementById("calendar");
		var container = canvas.parentNode;

		var containerStyle = window.getComputedStyle(container, null);

		var fullWidth = containerStyle.getPropertyValue("width");
		var fullHeight = containerStyle.getPropertyValue("height");

		canvas.width  = parseInt(fullWidth);
		canvas.height = parseInt(fullHeight);
	}

	function populateCalendarData() {
		var canvas = document.getElementById("calendar");
		canvas.setAttribute("data-month", 9);
	}

	function drawCalendar() {

		populateCalendarData();

		var canvas = document.getElementById("calendar");
		var context = canvas.getContext("2d");

		var width = canvas.width;
		var height = canvas.height;

		var dayColumns = parseInt(width / 7);
		var weekColumns = parseInt(height / 5);

		context.fillStyle = "#FFFFFF";
		context.strokeStyle = "#000000";
		context.lineWidth = 2;
		
		context.fillRect(0, 0, width, height);
		context.rect(1,1,width - 2, height - 2);
		
		context.stroke();

		for(var x = 0; x < 7; x++) {
			context.beginPath();
			context.moveTo(x * dayColumns,0);
			context.lineTo(x * dayColumns, height);
			context.stroke();
		}

		for(var y = 0; y < 5; y++) {
			context.beginPath();
			context.moveTo(0, y * weekColumns);
			context.lineTo(width, y * weekColumns);
			context.stroke();
		}

		context.fillStyle = "#808080";
		context.font = "16px Arial";
		var calendarData = [
		{"number" : 27, "currentmonth": false, stickers: ["B7875B4B"]},
		{"number" : 28, "currentmonth": false, stickers: ["EC13AB35"]},
		{"number" : 29, "currentmonth": false, stickers: ["29B49FCE"]},
		{"number" : 30, "currentmonth": false, stickers: ["ACDABF8A"]},
		{"number" : 31, "currentmonth": false, stickers: ["64AFE39D"]},
		{"number" : 1, "currentmonth": true, stickers: ["F0919683"]},
		{"number" : 2, "currentmonth": true, stickers: ["081B2451"]},
		{"number" : 3, "currentmonth": true, stickers: ["DEFB64A3"]},
		{"number" : 4, "currentmonth": true, stickers: ["017BB5B7"]},
		{"number" : 5, "currentmonth": true, stickers: ["E6AF1DD5"]},
		{"number" : 6, "currentmonth": true, stickers: []},
		{"number" : 7, "currentmonth": true, stickers: []},
		{"number" : 8, "currentmonth": true, stickers: []},
		{"number" : 9, "currentmonth": true, stickers: []},
		{"number" : 10, "currentmonth": true, stickers: ["F0919683"]},
		{"number" : 11, "currentmonth": true, stickers: ["F0919683"]},
		{"number" : 12, "currentmonth": true, stickers: []},
		{"number" : 13, "currentmonth": true, stickers: ["F0919683"]},
		{"number" : 14, "currentmonth": true, stickers: []},
		{"number" : 15, "currentmonth": true, stickers: []},
		{"number" : 16, "currentmonth": true, stickers: []},
		{"number" : 17, "currentmonth": true, stickers: []},
		{"number" : 18, "currentmonth": true, stickers: []},
		{"number" : 19, "currentmonth": true, stickers: ["F0919683","081B2451"]},
		{"number" : 20, "currentmonth": true, stickers: ["081B2451"]},
		{"number" : 21, "currentmonth": true, stickers: ["081B2451"]},
		{"number" : 22, "currentmonth": true, stickers: ["081B2451"]},
		{"number" : 23, "currentmonth": true, stickers: ["081B2451"]},
		{"number" : 24, "currentmonth": true, stickers: ["081B2451"]},
		{"number" : 25, "currentmonth": true, stickers: ["081B2451"]},
		{"number" : 26, "currentmonth": true, stickers: []},
		{"number" : 27, "currentmonth": true, stickers: []},
		{"number" : 28, "currentmonth": true, stickers: ["F0919683"]},
		{"number" : 29, "currentmonth": true, stickers: ["F0919683"]},
		{"number" : 30, "currentmonth": true, stickers: ["F0919683"]}
		];

		var calendarGridIndex = 0;
		for(var y = 0; y < 5; y++) {
			for(var x = 0; x < 7; x++) {
				var dayData = calendarData[calendarGridIndex++];
				
				//stickers
				for(var i = 0; i < dayData.stickers.length; i++) {
					var image = document.getElementById("sticker-"+dayData.stickers[i]);
					if(image == null) {
						continue;
					}
					var scaled = scaleImage(image.width, image.height, dayColumns - 10, weekColumns - 10);
					context.drawImage(image,x * dayColumns + 5, y * weekColumns + 5, scaled.width, scaled.height);
				}

				//number labels
				if(!dayData.currentmonth) {
					context.fillStyle = "#808080";
				} else {
					context.fillStyle = "#000000";
				}
				context.fillText(dayData.number,x * dayColumns + 3, y * weekColumns + 16);
			}
		}
	}

	function scaleImage(imageWidth, imageHeight, targetWidth, targetHeight) {
		var newSize = {width: imageWidth, height: imageHeight};
		var imageRatio = imageWidth / imageHeight;

		if(newSize.width > targetWidth) {
			//shrink by width
			newSize.width = targetWidth;
			newSize.height = newSize.width / imageRatio;
		}

		if(newSize.height > targetHeight) {
			//shrink by height
			newSize.height = targetHeight;
			newSize.width = newSize.height * imageRatio;
		}
		return newSize;
	}
</script>