prepared calendar

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);
+	}
+}