I'm using a datepicker set to "range" to select a range istead of a singular date.
When trying to set the range config for dayresource and resource views at runtime, the corresponding views don't update correctly .
Unintended behavior:
- the top bar doesn't update at all, it always displays the initial dates
- the schedule area only updates its width / colums per day upon triggering a onLayout (here demonstrated by changing the minEventHeight using the slider)
- even upon onLayout the data doesn't actually update -> only empty columns are displayed
When setting a range in the initial config, the views render as intended. Are those properties not intended to change at runtime? How could i trigger a full "reload" of a view / the whole calendar? I tried using
calendar.refresh();
calendar.refreshSoon();
both to no avail...
Here is the eventHandler which is triggered when the datepicker fires "selectionChanged", as well as the relevant configuration on the calendar object:
// Relevant calendar config:
new Calendar({
date: "2024-03-04",
...
modes: {
day: null,
week: null,
month: null,
year: null,
agenda: null,
list: null,
resource: {
title: "Kanaele",
minEventHeight: "0px",
view: {
type: "week",
syncCalendarDate: false,
range: "7d",
},
listeners: {
layoutUpdate: "up.onViewLayout",
show({ source: Widget }) {
const { hourHeightSlider } = calendar.widgetMap;
Widget.views?.forEach(wv => {
wv.zoomTo?.(hourHeightSlider.value);
});
}
},
},
dayresource: {
title: "Kanaele pro Tag",
minEventHeight: "0px",
syncCalendarDate: false,
range: "7d",
listeners: {
layoutUpdate: "up.onViewLayout",
show({ source: Widget }) {
if (calendar) {
const { hourHeightSlider } = calendar.widgetMap;
Widget.zoomTo?.(hourHeightSlider.value);
}
}
},
}
}
...
sidebar: {
width: '20em',
items: {
datePicker: null,
dateRangePicker: {
weight: 0,
type: 'datepicker',
date: selectedStartAndEndDates[0],
selection: selectedStartAndEndDates,
// In this mode, the "selection" is applied to any child
// EventList views - EventList and AgendaView
multiSelect: 'range',
listeners: {
selectionChange: 'up.onDatePickerRangeSelected'
}
},
}
}
....
// EventHandler listening on selectionChange from datepicker
onDatePickerRangeSelected: ({ source, selection: [startDate, endDate] }) => {
if (source.multiSelect === 'range') {
const rangeInMilliseconds = endDate - startDate;
const rangeInDays = Math.ceil(rangeInMilliseconds / (1000 * 3600 * 24)) + 1;
calendar.views.forEach(v => {
switch (v.type) {
case "resourceview":
v.views?.forEach(wv => {
wv.range = rangeInDays + "d";
});
break;
case "dayresource":
v.range = rangeInDays + "d";
break;
default:
break;
}
});
calendar.date = startDate;
calendar.refresh();
}
}
....
});
Edit: Another finding I have is, when I toggle a resource, this causes the dayResourceView to render the events for the empty columns in the previous video clip. However the eventColumns still don't match with the day headers, which are incorrect
Edit 2:
This is the behvior after additionally setting the views.allDayEvents.range property, as well as setting a startDate
Showcase of the flexibility the views should offer:
