Our powerful JS Calendar component


Post by SemFA »

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;

Post by mats »

https://lh/bryntum-suite/calendar/docs/#Calendar/widget/DayView#property-dayStartTime + endTime are expressed in ms so your code should be adjusted. Seems also we have a small bug here that needs fixing. https://github.com/bryntum/support/issues/2780


Post by SemFA »

mats wrote: Wed Apr 28, 2021 1:44 pm

https://lh/bryntum-suite/calendar/docs/#Calendar/widget/DayView#property-dayStartTime + endTime are expressed in ms so your code should be adjusted. Seems also we have a small bug here that needs fixing. https://github.com/bryntum/support/issues/2780

Strange, if I change it to ms, it crashes instantly, but if I put in hours, it renders fine for me. am I doing something wrong?

In the documentation, I can find this one: https://www.bryntum.com/docs/calendar/#Calendar/widget/DayView#config-dayStartTime

Where it says it's either an hour of the day, or 24hour HH:MM notation.


Post by mats »

That's the config that you provide at instantiation, if you change it during runtime you should use the property https://www.bryntum.com/docs/calendar/#Calendar/widget/DayView#property-dayStartTime


Post by SemFA »

So I should not use react states to change this value, instead I should change the property of the view. How do I get the current view from the calendarInstance?


Post by SemFA »

I think I found it by using this.calendar.current.calendarInstance.activeView.dayStartTime. However, when I try to set it to a certain hour in ms (for example, 18000000 = 5am) it gives me this error:

calendar.umd.js?13d5:12699 Uncaught TypeError: Cannot read property 'style' of undefined
    at WeekView.updateElementLayout [as updateElementLayoutNow] (calendar.umd.js?13d5:12699)
    at WeekView.eval (calendar.umd.js?13d5:74647)
    at Function.invoker (calendar.umd.js?13d5:73793)
    at Function.wrapFn.now (calendar.umd.js?13d5:73853)
    at WeekView.syncHours (calendar.umd.js?13d5:12367)
    at WeekView.updateDayStartTime (calendar.umd.js?13d5:12296)
    at WeekView.set (calendar.umd.js?13d5:29673)
    at CalendarPlanning.setDayStartTime (calendar.js?d01a:204)
    at TimeField.callback (calendar.umd.js?13d5:28111)
    at TimeField.trigger (calendar.umd.js?13d5:76711)
    

The hours on the left side disappear and the calendar is now broken.

Edit: In addition, when I use a 24hour HH:MM string again in this property it works the same with the same issues as original issue.


Post by mats »

Yes, this will all be fixed in ticket above!


Post Reply