fix multy day and udpate style

fr-calendar.css

@@ -92,7 +92,8 @@
 }
 
 .frcal__event span {
-	background-color: var(--color-accent);
+	background-color: var(--frcal--event-background, var(--color-accent));
+	color: var(--frcal--event-text-color, var(--text-normal));
 	border-radius: 5px;
 	min-height: inherit;
 	padding: 5px;
@@ -107,36 +108,88 @@
 
 .frcal__timed_item .frcal__event span {
 	margin: 0 3px;
+	vertical-align: middle;
 }
 
-.frcal__event[data-state="canceled"] span,
+.frcal__event[data-state="-"] span,
-.frcal__event[data-state="moved"] span {
+.frcal__event[data-state=">"] span {
 	opacity: 0.3;
 	filter: saturate(0.4);
 }
-.frcal__event[data-state="done"] span,
+.frcal__event[data-state="x"] span,
-.frcal__event[data-state="partly finished"] span {
+.frcal__event[data-state="/"] span {
 	opacity: 0.5;
 	/* filter: saturate(0.4); */
 }
 
 .frcal__event[data-group="volta"] span {
-	background-color: var(--color-green);
+	--frcal--event-text-color: black;
-	color: black;
+	--frcal--event-background: var(--color-green);
 }
 .frcal__event[data-group="hr"] span {
-	background-color: var(--color-yellow);
+	--frcal--event-text-color: black;
-	color: black;
+	--frcal--event-background: var(--color-yellow);
 }
 .frcal__event[data-group="mbc"] span {
-	background-color: var(--color-purple);
+	--frcal--event-text-color: white;
-	color: white;
+	--frcal--event-background: var(--color-purple);
 }
 .frcal__event[data-group="eriks"] span {
-	background-color: var(--color-blue);
+	--frcal--event-text-color: white;
-	color: white;
+	--frcal--event-background: var(--color-blue);
 }
 .frcal__event[data-group="woco"] span {
-	background-color: var(--color-red);
+	--frcal--event-text-color: black;
-	color: black;
+	--frcal--event-background: var(--color-red);
 }
+
+.workspace-leaf-content[data-type='fr-calendar'] .task-list-item-checkbox {
+	vertical-align: middle;
+	border-color: var(--frcal--event-text-color, var(--text-normal));
+}
+
+.workspace-leaf-content[data-type='fr-calendar'] .task-list-item-checkbox:checked {
+	background-color: var(--frcal--event-text-color, var(--text-normal));
+	border-color: var(--frcal--event-text-color, var(--text-normal));
+}
+
+.workspace-leaf-content[data-type='fr-calendar'] .task-list-item-checkbox:checked::before {
+	position: absolute;
+	color: var(--frcal--event-text-color, var(--text-normal));
+	text-align: center;
+	font-weight: 900;
+	line-height: 15px;
+	width: 10px;
+	left: 2px;
+	right: 2px;
+}
+
+.workspace-leaf-content[data-type='fr-calendar'] .task-list-item-checkbox[data-task="x"]:checked::before {
+	content: '';
+	top: 2px;
+	bottom: 2px;
+	background-color: var(--frcal--event-background, var(--color-accent));
+	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpolygon points='5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039'%3E%3C/polygon%3E%3C/svg%3E");
+}
+
+.workspace-leaf-content[data-type='fr-calendar'] .task-list-item-checkbox[data-task="/"]:checked::before {
+	content: '';
+	top: 2px;
+	bottom: 2px;
+	background-color: var(--frcal--event-background, var(--color-accent));
+	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpolygon points='5.5 11.9993304 5.5 8.99933039 1.5 4.9968652 0 6.49933039'%3E%3C/polygon%3E%3C/svg%3E");
+}
+.workspace-leaf-content[data-type='fr-calendar'] .task-list-item-checkbox[data-task=">"]:checked::before {
+	content: '';
+	top: 2px;
+	bottom: 2px;
+	background-color: var(--frcal--event-background, var(--color-accent));
+	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.12 7L3.26667 11.76L4.57333 13.0667L10.7333 7L4.57333 0.933332L3.26667 2.24L8.12 7Z'/%3E%3C/svg%3E");
+}
+.workspace-leaf-content[data-type='fr-calendar'] .task-list-item-checkbox[data-task="-"]:checked::before {
+	content: '';
+	top: 2px;
+	bottom: 2px;
+	background-color: var(--frcal--event-background, var(--color-accent));
+	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='6.5' width='13' height='1'/%3E%3C/svg%3E");
+  }

main.js

@@ -13,7 +13,7 @@ DateFormat.date = "(?:" + DateFormat.week + ")?(?: ?(?:" + DateFormat.days.join(
 
 function parseSingleDate(d, defal)
 {
-	let year = -1, week = -1, dow = -1, time = defal;
+	let year = -1, week = -1, dow = -1, time = moment(defal);
 
 	d = d.toLowerCase();
 
@@ -182,7 +182,8 @@ function processLine(line, noDate, date, data)
 		"title": "Untitled",
 		"group": "default",
 		"location": null,
-		"state": "reminder"
+		"state": "reminder",
+		"type": "reminder"
 	};
 
 	// id
@@ -210,29 +211,11 @@ function processLine(line, noDate, date, data)
 	res = noDate.match(/^[ \t]*- \[(.)\] /);
 	if (res != null)
 	{
-		switch (res[1])
+		item['type'] = "task";
-		{
+		item['state'] = res[1];
-			case ' ':
-				item["state"] = "task";
-				break;
-			case 'x':
-				item["state"] = "done";
-				break;
-			case '-':
-				item["state"] = "canceled";
-				break;
-			case '>':
-				item["state"] = "moved";
-				break;
-			case '/':
-				item["state"] = "partly finished";
-				break;
-			default:
-				item['state'] = res[1];
-				break;
-		}
 		noDate = noDate.replace('[' + res[1] + '] ', '');
 	}
+
 	
 	noDate = noDate.replace(/[ \t][ \t]+/g, ' '); // remve multeple spaces/tabs in a row
 
@@ -476,23 +459,55 @@ class CalendarView extends ItemView
 				|| (date[1] > start && date[1] < end)
 			)
 			{
-				let day = date[0].day() - 1
+				let res = [...event.date.matchAll("(?:" + DateFormat.days.join('|') + ")")];
-				day = (day == -1) ? 6 : day;
+				if ((res.length <= 1) || (res[0][0] == res[1][0]))
-				if (event.date.match(DateFormat.time)[0] == '12:00am')
 				{
-					this.renderEvent(event, this.allday[day]);
+					this.renderEvent(event);
 				}
 				else
 				{
-					this.renderEvent(event, this.timed[day]);
+					let date_split = event.date.split('-');
+					let start = DateFormat.days.indexOf(res[0][0]), end = DateFormat.days.indexOf(res[1][0]);
+					let part = JSON.parse(JSON.stringify(event));
+					// first day
+					part.date = date_split[0].match(DateFormat.week)[0] + ' ' + DateFormat.days[start] + ' ' + date_split[0].match(DateFormat.time)[0];
+					part.date += '-' + date_split[1].match(DateFormat.week)[0] + ' ' + DateFormat.days[start] + ' 23:59pm';
+					this.renderEvent(part);
+
+					// middel days
+					for (let day = start+1; day < ((end == 0) ? 7 : end); day++)
+					{
+						part.date = date_split[0].match(DateFormat.week)[0] + ' ' + DateFormat.days[day] + ' 12:00am';
+						part.date += '-' + date_split[1].match(DateFormat.week)[0] + ' ' + DateFormat.days[day] + ' 23:59pm';
+						this.renderEvent(part);
+					}
+
+					// last day
+					part.date = date_split[0].match(DateFormat.week)[0] + ' ' + DateFormat.days[end] + ' 12:00am';
+					part.date += '-' + date_split[1].match(DateFormat.week)[0] + ' ' + DateFormat.days[end] + ' ' + date_split[0].match(DateFormat.time)[0];
+					this.renderEvent(part);
 				}
 			}
 		}
 	}
 
-	renderEvent(event, container)
+	renderEvent(event)
 	{
 		let time = parseDate(event.date);
+		let container = {}, allDay;
+		let day = time[0].day() - 1;
+		day = (day == -1) ? 6 : day;
+		if (event.date.match(DateFormat.time)[0] == '12:00am')
+		{
+			container = this.allday[day];
+			allDay = true;
+		}
+		else
+		{
+			container = this.timed[day];
+			allDay = false;
+		}
+
 		time[0] = time[0].hour()*60 + time[0].minute();
 		time[1] = time[1].hour()*60 + time[1].minute();
 		let el = container.createEl('div', {
@@ -501,17 +516,45 @@ class CalendarView extends ItemView
 			attr: {
 				'data-group': event.group,
 				'data-state': event.state,
+				'data-type': event.type,
 				'data-start': time[0].toString(),
 				'data-duration': (time[1] - time[0]).toString(),
-				'style': 'top:' + (time[0]*this.zoom).toString() + 'px'
+				'style': ((allDay) ? '' : 'top:' + (time[0]*this.zoom).toString() + 'px')
 			},
 		});
-		el.createEl('span', { 
+		let eventEl = el.createEl('span', {
-			text: event.title,
 			attr: {
-				'style': 'min-height:' + ((time[1] - time[0]) * this.zoom).toString() + 'px'
+				'style': ((allDay) ? '' : 'min-height:' + ((time[1] - time[0]) * this.zoom).toString() + 'px')
 			}
 		});
+		switch (event.type)
+		{
+			case 'task':
+				if (event.state == ' ')
+				{
+					eventEl.createEl('input', {
+						cls: 'task-list-item-checkbox',
+						attr: {
+							'data-task': event.state,
+							'type': 'checkbox'
+						}
+					});
+				}
+				else
+				{
+					eventEl.createEl('input', {
+						cls: 'task-list-item-checkbox is-checked',
+						attr: {
+							'data-task': event.state,
+							'type': 'checkbox',
+							'checked': ''
+						}
+					});
+				}
+			default:
+				eventEl.appendText(event.title);
+				break;
+		}
 		return el;
 	}
 }

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "fr-calander",
 	"name": "calendar thingimegig",
-	"version": "0.0.1",
+	"version": "0.1.0",
 	"minAppVersion": "1.3.0",
 	"description": "creates a calender from notes",
 	"author": "Finn van Reenen",