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