I keep my dayStartTime / dayEndTime in a state. When I change it, it changes the calendar start and end times. However, when you then try to drag an event, it will no longer work. I can also no longer drag create an event.
I'm not getting any error at all. The only error I get is when I try to make my event bigger / smaller:
calendar.umd.js?13d5:1424 Uncaught (in promise) TypeError: Cannot read property 'startDate' of null
at DayZone._callee5$ (calendar.umd.js?13d5:1424)
at tryCatch (calendar.umd.js?13d5:232973)
at Generator.invoke [as _invoke] (calendar.umd.js?13d5:233203)
at Generator.eval [as next] (calendar.umd.js?13d5:233028)
at asyncGeneratorStep (calendar.umd.js?13d5:232173)
at _next (calendar.umd.js?13d5:232195)
Here is the code I'm using.
import React, { Component, createRef } from "react";
import { BryntumCalendar } from "@bryntum/calendar-react";
import { Popup } from "@bryntum/calendar/calendar.umd";
class CalendarPlanning extends Component {
calendar = createRef();
state = {
dayStartTime: 6,
dayEndTime: 18
};
crudManager = {
transport: {
load: {
url: "/api/v1/planning/crud",
headers: {
"X-CSRF-TOKEN": document.querySelector("meta[name='csrf-token']").getAttribute("content")
}
},
sync: {
url: "/api/v1/planning/crud",
method: "PATCH",
headers: {
"X-CSRF-TOKEN": document.querySelector("meta[name='csrf-token']").getAttribute("content")
}
}
},
autoLoad: true
};
constructor(props) {
super(props);
}
getCalendar() {
return this.calendar?.current?.calendarInstance;
}
settings(event) {
const { dayStartTime, dayEndTime } = this.state;
let startDate = new Date();
let endDate = new Date();
startDate.setHours(dayStartTime, 0, 0, 0);
endDate.setHours(dayEndTime, 0, 0, 0);
const popup = new Popup({
forElement: event.source.currentElement,
items: [
{
type: "container",
itemCls: "b-popup-horizontal",
items: [
{
type: "timefield",
label: "Start time",
value: startDate,
step: 15,
onChange: this.setDayStartTime.bind(this)
},
{
type: "timefield",
label: "End time",
value: endDate,
step: 15,
onChange: this.setDayEndTime.bind(this)
}
]
}
]
});
}
setDayStartTime(event) {
this.setState({ dayStartTime: event.value.getHours() });
}
setDayEndTime(event) {
this.setState({ dayEndTime: event.value.getHours() });
}
render() {
const { dayStartTime, dayEndTime } = this.state;
const calendarConfig = {
style: "height: 100%",
ref: this.calendar,
crudManager: this.crudManager,
sidebar: this.sidebar,
weekStartDay: 1,
tbar: {
items: {
commit: {
text: __("Commit"),
icon: "fas fa-calendar-check",
onClick: () => this.getCalendar().crudManager.sync()
},
settings: {
icon: "b-fa b-fa-cog",
onClick: this.settings.bind(this)
},
view: this.props.switch()
}
},
scheduleMenuFeature: true,
modes: {
week: {
dayStartTime,
dayEndTime
}
}
};
return (<BryntumCalendar {...calendarConfig} />);
}
}
export default CalendarPlanning;