diff --git a/fr-calendar.css b/fr-calendar.css index 60d5fe4..5936288 100644 --- a/fr-calendar.css +++ b/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"); - } \ No newline at end of file +} + +.frcal__button { + margin: 5px; +} diff --git a/main.js b/main.js index 2f3bf6d..3de2efd 100644 --- a/main.js +++ b/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] = dayEl.createEl("span"); + this.dayHeads[i] = this.headEl.createEl("div", { cls: "frcal__day frcal__day_head_item" }); + 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] + "
" + date.date().toString(); + this.dayHeads[day].children[0].innerHTML = DateFormat.daysLong[day] + "
" + 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"; + } + } + + } }