Hi bryntum team,
I'm using the "dateRangeRequested" to request new events on my calendar. However I'm running into a bug when I change to views, sometimes some events are not rendered in the calendar.
I have 2 events on Thursday of the second week of the month, when I change the view day to Sunday (of that week) I will see the empty calendar, and when I click on week again, I will keep seeing an empty calendar.
While debugging, I noticed that "project.events" gets updated with the latest value of the view but seems like this value is not updated in the calendar.
Wondering if someone can provide additional insight into the issue and/or the best practices to do the update. This is how my code looks:
The calendar component:
const Calendar = ({ eventsData }) => {
const [calendarHandler] = useState(new CalendarHandler());
const [project] = useState(new ProjectModel());
useEffect(() => {
const saveEvents = async () => {
await calendarHandler.saveEvents(eventsData);
}
saveEvents();
}, [calendarHandler, eventsData]);
const calendarInstance = useCallback(ref => {
calendarHandler.setInstance(ref);
calendarHandler.addDateRangeListener();
}, [calendarHandler]);
<BryntumCalendar
ref={calendarInstance}
project={project}
date={calendarHandler.currentDate}
eventEditFeature={false}
eventMenuFeature={false}
eventTooltipFeature={false}
dragFeature={false}
{...calendarHandler.config}
/>
}
and the handler class:
class CalendarHandler {
_instance;
constructor() {
this.initializeCalendarConfig();
}
setInstance(instance) {
this._instance = instance;
}
async saveEvents() {
const inlineData = {
eventsData: events
}
const project = this._instance.project;
await project.loadInlineData(inlineData);
}
addDateRangeListener(){
this._instance?.addListener('dateRangeRequested', this.onDateRangeChange)
}
onDateRangeChange(event){
const { startDate, endDate } = event.new;
if (!event.changed) {
return;
}
// api call that will update the value of props.eventsData in Calendar component
requestEventCalendar(startDate, endDate);
}
Thanks a lot!
