Our powerful JS Calendar component


Post by SemFA »

Hello,

I've upgraded to the latest version 4.1.0 and am using the NPM packages (@bryntum/calendar and @bryntum/calendar-react). When I create a new event and run the sync() function on the crudManager it won't sync my event. However, when I move the event just a tiny bit in the calendar view and then sync() it syncs the event. Any idea why this is happening?

Here's the code I'm running:

import React, { Component, createRef } from "react";
import { BryntumCalendar } from "@bryntum/calendar-react";

class CalendarPlanning extends Component {
    calendar = createRef();
    state = React.createRef();

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
};

sidebar = {
    items: {
        resourceFilter: {
            weight: 190,
            style: "flex: 0 0 auto; margin-top: 1em",

            label: __("Search users"),
            id: "b-textfield-users-1",
            type: "textfield",
            keyStrokeChangeDelay: 100,
            onChange: "up.onResourceFilterChange"
        },
        eventFilter: {
            label: __("Search tasks")
        }
    },
    onResourceFilterChange({ value }) {
        this.widgetMap.resourceFilter.store.filter({
            id: "resourceFilter",
            filterBy: (data) => data.name.toLowerCase().includes(value.toLowerCase())
        });
    }
};

calendarConfig = {
    style: "height: 100%",
    ref: this.calendar,
    crudManager: this.crudManager,
    sidebar: this.sidebar,
    tbar: {
        items: {
            commit: {
                text: __("Commit"),
                icon: "fas fa-code-commit",
                onClick: () => this.getCalendar().crudManager.sync()
            }
        }
    },
    scheduleMenuFeature: true
};

constructor(props) {
    super(props);
}

getCalendar() {
    return this.calendar?.current?.calendarInstance;
}

render() {
    const { calendarConfig } = this;

    return (
        <div>
            <BryntumCalendar {...calendarConfig} />
        </div>
    );
}
}

export default CalendarPlanning;

Post by mats »

Do you press sync while the editor is still open?


Post by SemFA »

mats wrote: Wed Apr 21, 2021 4:32 pm

Do you press sync while the editor is still open?

I drag on the calendar, make an event, fill in the information. Click on save. Then I press the commit button that I made in the toolbar.


Post by mats »


Post by SemFA »

mats wrote: Wed Apr 21, 2021 8:36 pm

Reproduced, ticket opened: https://github.com/bryntum/support/issues/2719

thank you, any ETA on when this goes live?


Post by mats »

tomorrow!


Post by SemFA »

Thank you this issue is now resolved with the newest v4.1.1 version :)


Post Reply