prepared calendar

src/main/resources/static/css/style.css

@@ -75,7 +75,7 @@ body {
 }
 
 .body {
-	height: calc(100% - 2px);
+	height: calc(100% - 4px);
 	width: 100%;
 	overflow: auto;
 }
@@ -189,10 +189,14 @@ body {
 .hoverlink {
 	text-decoration: none;
 	color: black;
+	padding: 4px;
+	border: 1px solid rgba(1, 1, 1, 0.0);
+	border-radius: 4px;
 }
 
 .hoverlink:hover {
-	color: #1a5f64;
+	color: white;
+	background-image: linear-gradient(to right bottom, #99c1f1, #1a5f64);
 }
 
 .boldtext {
@@ -276,4 +280,12 @@ body {
 .clock {
 	background-image: url("../png/clock.png");
 	background-repeat: no-repeat;
+}
+
+.schedule {
+	min-width: 90vh;
+	max-width: 90vh;
+	min-height: calc(90vh - 100px);
+	max-height: calc(90vh - 100px);
+	margin: 8px;
 }

src/main/resources/static/js/schedule.js

@@ -0,0 +1,64 @@
+class Schedule {
+	constructor(selector, width, height) {
+		var canvas = $("<canvas>");
+		canvas.attr("id", "scheduleCanvas");
+		canvas.width(width);
+		canvas.height(height);
+		canvas.attr("width", width);
+		canvas.attr("height", height);
+		canvas[0].getContext("2d").canvas.width = parseInt(width);
+		canvas[0].getContext("2d").canvas.height = parseInt(height);
+
+		$(selector).append(canvas);
+		var ctx = canvas[0].getContext("2d");
+		this.ctx = ctx;
+		this.drawBackgroundWeek(ctx, width, height);
+	}
+	
+	drawBackgroundDay = function(ctx, width, height, offsetx) {
+		var hourHeight = parseInt(height / 24);
+		for (var i = 0; i < 24; i++) {
+			var x = parseInt(offsetx);
+			var y = parseInt(i * hourHeight);
+			var w = parseInt(width);
+			var h = parseInt(hourHeight);
+			ctx.fillStyle = (i > 8 & i <= 17) ? (i % 2 ? "#cdf0fa" : "#9acbd9") : (i % 2 ? "#faf0fa" : "#d9cbd9");
+			ctx.fillRect(x, y, w, h);
+		}
+		ctx.strokeStyle = "white";
+    ctx.strokeRect(offsetx, 0, width, height);
+	}
+	
+	drawBackgroundWeek = function(ctx, width, height) {
+		var dayWidth = width / 7;
+		for (var i = 0; i < 7; i++) {
+			this.drawBackgroundDay(ctx, dayWidth, height, i * dayWidth + 1);
+		}
+	}
+	
+	time2pixel = function (time, hourHeight) {
+		var timeArray = time.split(":");
+		var hours = parseInt(timeArray[0]);
+		var minutes = parseInt(timeArray[1]);
+		var pixels = parseInt((hours + (minutes / 60)) * hourHeight);
+		console.log("convert " + time + " to " + pixels);
+		return pixels;
+	}
+	
+	drawSlot = function(ctx, slotNr, from, until, color, fillColor) {
+		ctx.strokeStyle = color;
+		ctx.fillStyle = fillColor;
+		ctx.lineCap = "round";
+		ctx.lineWidth = 1;
+		var hourHeight = parseInt(parseInt($("#scheduleCanvas").height()) / 24);
+		var dayWidth = parseInt(parseInt($("#scheduleCanvas").width()) / 7);
+		var x = parseInt(slotNr * dayWidth);
+		var y = parseInt(this.time2pixel(from, hourHeight));
+		var w = dayWidth;
+		var h = parseInt(this.time2pixel(until, hourHeight) - y);
+		ctx.beginPath();
+		console.log("draw " + x + "," + y + " -> +" + w + "," + h);
+		ctx.fillRect(x, y, w, h);
+		ctx.strokeRect(x, y, w, h);
+	}
+}