add dayView and buttons

fr-calendar.css

@@ -6,6 +6,10 @@
 .workspace-leaf-content[data-type="fr-calendar"] .view-content {
 	max-width: 100vw;
 	overflow-x: auto;
+	--frcal--min-width: 1000px;
+}
+.workspace-leaf-content[data-type="fr-calendar"] .view-content.frcal__dayView {
+	--frcal--min-width: 400px;
 }
 
 .frcal__time {
@@ -16,7 +20,7 @@
 .frcal__month {
 	width: 100%;
 	display: flex;
-	min-width: 1000px;
+	min-width: var(--frcal--min-width, 1000px);
 	z-index: 10;
 }
 
@@ -37,7 +41,7 @@
 .frcal__days {
 	display: flex;
 	flex-wrap: nowrap;
-	min-width: 1000px;
+	min-width: var(--frcal--min-width, 1000px);
 }
 .frcal__day {
 	flex: 10;
@@ -250,4 +254,8 @@
 	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");
-  }
+}
+
+.frcal__button {
+	margin: 5px;
+}

main.js

@@ -274,6 +274,7 @@ class CalendarView extends ItemView
 		this.plugin = plugin;
 		this.week = stringifySingleDate(moment()).match(DateFormat.week)[0];
 		this.zoom = 30/60; // in px/min
+		this.dayViewIndex = -1;
 	}
 
 	getViewType()
@@ -319,8 +320,8 @@ class CalendarView extends ItemView
 		this.dayHeads = [null, null, null, null, null, null, null];
 		for (let i = 0; i < 7; i++)
 		{
-			let dayEl = this.headEl.createEl("div", { cls: "frcal__day frcal__day_head_item" });
+			this.dayHeads[i] = this.headEl.createEl("div", { cls: "frcal__day frcal__day_head_item" });
-			this.dayHeads[i] = dayEl.createEl("span");
+			this.dayHeads[i].createEl("span");
 		}
 
 		// all day events
@@ -352,6 +353,37 @@ class CalendarView extends ItemView
 			this.timed[i] = this.timedEl.createEl("div", { cls: "frcal__day frcal__timed_item" });
 		}
 
+		let btn;
+		btn = container.createEl('button', { cls: "frcal__button"});
+		btn.innerText = 'week-';
+		btn.addEventListener('click', () => {
+			this.gotoPreviusWeek();
+		})
+		
+		btn = container.createEl('button', { cls: "frcal__button"})
+		btn.innerText = 'week+';
+		btn.addEventListener('click', () => {
+			this.gotoNextWeek();
+		})
+
+		btn = container.createEl('button', { cls: "frcal__button"});
+		btn.innerText = 'day-';
+		btn.addEventListener('click', () => {
+			this.dayViewIndex--;
+			if (this.dayViewIndex < -1)
+				this.dayViewIndex = 6;
+			this.dayView();
+		})
+		
+		btn = container.createEl('button', { cls: "frcal__button"})
+		btn.innerText = 'day+';
+		btn.addEventListener('click', () => {
+			this.dayViewIndex++;
+			if (this.dayViewIndex >= 7)
+				this.dayViewIndex = -1;
+			this.dayView();
+		})
+
 		this.addEvents();
 		this.updateWeek();
 	}
@@ -526,14 +558,14 @@ class CalendarView extends ItemView
 		for (let day = 0; day < 7; day++)
 		{
 			let date = parseSingleDate(this.week + " " + DateFormat.days[(day + 1) % 7] + " 12:00pm");
-			this.dayHeads[day].innerHTML = DateFormat.daysLong[day] + "<br/>" + date.date().toString();
+			this.dayHeads[day].children[0].innerHTML = DateFormat.daysLong[day] + "<br/>" + date.date().toString();
 			if (date.diff(today, "minutes") == 0)
 			{
-				this.dayHeads[day].style.color = "var(--color-accent)";
+				this.dayHeads[day].children[0].style.color = "var(--color-accent)";
 			}
 			else
 			{
-				this.dayHeads[day].style.color = "";
+				this.dayHeads[day].children[0].style.color = "";
 			}
 		}
 
@@ -798,6 +830,27 @@ class CalendarView extends ItemView
 
 		menu.showAtPosition(location);
 	}
+
+	dayView()
+	{
+		let containers = [this.dayHeads, this.allday, this.timed];
+		if (this.dayViewIndex == -1)
+		{
+			this.containerEl.children[1].removeClass('frcal__dayView');
+		}
+		else
+		{
+			this.containerEl.children[1].addClass('frcal__dayView');
+		}
+		for (let i in containers)
+		{
+			for (let ii=0; ii<7; ii++)
+			{
+				containers[i][ii].style.display = ((this.dayViewIndex == -1) || (ii == this.dayViewIndex)) ? "" : "none";
+			}
+		}
+
+	}
 }