-
+
diff --git a/public/js/components/Calendar/Mode/Range/View.js b/public/js/components/Calendar/Mode/Range/View.js
index 20103d55f..bdd763f42 100644
--- a/public/js/components/Calendar/Mode/Range/View.js
+++ b/public/js/components/Calendar/Mode/Range/View.js
@@ -2,6 +2,7 @@ import CalendarGrid from "../../Base/Grid.js";
import LabelDay from "../../Base/Label/Day.js";
import LabelDow from "../../Base/Label/Dow.js";
import LabelTime from "../../Base/Label/Time.js";
+import FormInput from "../../../Form/Input.js";
export default {
name: "RangeView",
@@ -10,11 +11,14 @@ export default {
LabelDay,
LabelDow,
LabelTime,
+ FormInput
},
inject: {
timeGrid: "timeGrid",
timezone: "timezone",
events: "events",
+ hoursPlan: { from: "hoursPlan", default: null },
+ isHeaderSticky: { from: "isHeaderSticky", default: true },
},
props: {
day: {
@@ -24,8 +28,13 @@ export default {
collapseEmptyDays: Boolean,
rangeLength: Number,
},
+ data() {
+ return {
+ visibleDays: JSON.parse(localStorage.getItem('fhc-calender-visible-days')) ?? [true, true, true, true, true, true, true],
+ }
+ },
computed: {
- axisMainGroupedByWeek() {
+ daysGroupedByWeek() {
const focusDayStartOfWeek = this.$props.day.startOf("week");
const prefixedDaysCount = this.$props.day.weekday - 1;
let rangeLength = this.$props.rangeLength + prefixedDaysCount;
@@ -34,27 +43,28 @@ export default {
let axisMain = Array.from({ length: rangeLength }, (e, i) =>
focusDayStartOfWeek.plus({ days: i }),
);
+
return Object.groupBy(axisMain, (day) => {
return day.startOf("week").toISO().slice(0, 10);
});
},
- weeks() {
- return Object.keys(this.axisMainGroupedByWeek).sort();
+ weekStartDays() {
+ return Object.keys(this.daysGroupedByWeek).sort();
},
- axisParts() {
+ timeAxisSegments() {
if (this.timeGrid) {
- // create {start, end} array
- return this.timeGrid.map((tu) => {
+ return this.timeGrid.map(tu => {
return {
start: luxon.Duration.fromISOTime(tu.start),
- end: luxon.Duration.fromISOTime(tu.end),
+ end: luxon.Duration.fromISOTime(tu.end)
};
});
+ } else if (this.hoursPlan) {
+ const start = this.hoursPlan?.start ?? 7;
+ const end = this.hoursPlan?.end ?? 23;
+ return Array.from({ length: end - start + 1 }, (e, i) => luxon.Duration.fromObject({ hours: i + start }));
} else {
- // create 07:00-23:00
- return Array.from({ length: 17 }, (e, i) =>
- luxon.Duration.fromObject({ hours: i + 7 }),
- );
+ return Array.from({ length: 17 }, (e, i) => luxon.Duration.fromObject({ hours: i + 7 }));
}
},
eventsGroupedByWeek() {
@@ -65,6 +75,9 @@ export default {
},
);
},
+ dayVisibility() {
+ return this.daysGroupedByWeek[this.weekStartDays[0]].map(date => this.visibleDays[date.weekday -1])
+ },
},
methods: {
isToday(date) {
@@ -73,23 +86,31 @@ export default {
"day",
);
},
+ toggleDay(day)
+ {
+ this.visibleDays.splice(day, 1, !this.visibleDays[day])
+ localStorage.setItem('fhc-calender-visible-days', JSON.stringify(this.visibleDays))
+ //this.$nextTick(() => this.queueGridWidthSync('day visibility'));
+ },
},
template: /* html */ `