We do have such demo, see the screenshot please. The demo initially loads data with CrudManager, but this is not the must, you can modify it to use axios. Axios is use for all subsequent loads (after you click the reload button). The demo demonstrates also error handling – one of 3 requests fails with error popup.
The demo uses also Redux-Saga for side-effects management but this is not a must; you can use your own way.
For saving data you can collect the fresh data from stores or you can utilize https://bryntum.com/docs/scheduler-pro/#Scheduler/data/mixin/ProjectConsumer#event-dataChange event
Thank you. Right now I am passing config to <BryntumScheduler /> with event listeners. But only "beforeEventEdit" works when edit popup dialog shows. I was expecting that other listeners, especially "onCatchAll" will be triggered if I for example move event or resize it. Can you tell me what I am doing wrong?
export const schedulerConfig: Partial<SchedulerConfig> = {
eventColor: '#000',
eventStyle: '',
features: {
timeRanges: {
showHeaderElements: true,
},
tree: true,
regionResize: true,
},
rowHeight: 45,
barMargin: 5,
columns: [
{
type: 'tree',
text: 'Name',
field: 'name',
width: 150,
},
],
startDate: new Date(2020, 11, 2), //'2020-12-02T15:00:00',
endDate: new Date(2023, 11, 2),
// zoomToFit: () => {},
viewPreset: 'year', // year
eventRenderer: (props: any) => {
const { eventRecord, resourceRecord, renderData } = props;
const { isLeaf } = resourceRecord;
// Add custom CSS classes to the template element data by setting property names
renderData.cls.leaf = isLeaf;
renderData.cls.group = !isLeaf;
return eventRecord.name;
},
listeners: {
beforeEventEdit: (source: any) => {
// TODO now we can show custom sidebar edit
console.log('beforeEventEdit', source);
// source.eventRecord.resourceId = source.resourceRecord.id;
// showEditor(source.eventRecord);
// return false;
},
onAfterEventSave: (source: any) => {
// TODO now we dispatch action to save event data
console.log('onAfterEventSave', source);
},
onDataChange: (source: any) => {
// TODO now we dispatch action to save event data
console.log('onDataChange', source);
},
onCatchAll: (source: any) => {
// TODO now we dispatch action to save event data
console.log('onCatchAll', source);
},
onAfterEventDrop: (source: any) => {
// TODO now we dispatch action to save event data
console.log('onAfterEventDrop', source);
}
},
};catchAll is a special case that does not have its on- function so it must be installed in listeners:
listeners: {
catchAll:function(e) {
console.log('from listeners', e.type)
}
}All other events can be installed like you have it above, for example:
onDataChange(e) {
console.log(e);
},works for me after I edit a name of an event and clicks "Save" in the dialog.
If you would still be in troubles, post please a runnable code.
Ok, I created DEMO with onDataChange method. With this demo when I try to drag/resize event - nothing happens. But the data was changed (start and end dates):
import { Scheduler } from '../../build/scheduler.module.js?453246';
import shared from '../_shared/shared.module.js?453246';
/* eslint-disable no-unused-vars,no-undef */
const scheduler = new Scheduler({
appendTo : 'container',
"eventColor": "#000",
"eventStyle": "",
"features": {
"timeRanges": {
"showHeaderElements": true
},
"tree": true,
"regionResize": true
},
"rowHeight": 45,
"barMargin": 5,
"columns": [
{
"type": "tree",
"text": "Name",
"field": "name",
"width": 150
}
],
"viewPreset": "year",
"listeners": {
"onDataChange": (source) => {
console.log('onDataChange', source);
}
},
"resourceStore": {
"data": [
{
"id": "348",
"name": "Technology",
"leaf": true,
"path": [
[
348
]
],
"expanded": false,
"data": {
"id": 348,
"path": [
[
348
]
],
"refId": "74446d59-ab8d-41f5-ba3f-5f5a2f672d50",
"refType": "team",
"refSource": "MasterGraph",
"createdAt": "2021-06-21T08:59:30.796Z",
"updatedAt": "2021-06-21T08:59:30.862Z",
"customFields": null,
"data": {
"name": "Technology"
},
"status": "active"
}
},
{
"id": "411",
"name": "Van",
"leaf": true,
"path": [
[
411
]
],
"expanded": false,
"data": {
"id": 411,
"path": [
[
411
]
],
"refId": "7a91ff94-3a8e-4d2e-a041-601167e941d4",
"refType": "team",
"refSource": "MasterGraph",
"createdAt": "2021-06-21T08:59:32.543Z",
"updatedAt": "2021-06-21T08:59:32.576Z",
"customFields": null,
"data": {
"name": "Van"
},
"status": "active"
}
},
{
"id": "414",
"name": "Industrial Design",
"leaf": true,
"path": [
[
414
]
],
"expanded": false,
"data": {
"id": 414,
"path": [
[
414
]
],
"refId": "86f337d8-4b83-4d49-9df6-830a63204e41",
"refType": "team",
"refSource": "MasterGraph",
"createdAt": "2021-06-21T08:59:32.613Z",
"updatedAt": "2021-06-21T08:59:32.677Z",
"customFields": null,
"data": {
"name": "Industrial Design"
},
"status": "active"
}
},
{
"id": "468",
"name": "Procurement",
"leaf": true,
"path": [
[
468
]
],
"expanded": false,
"data": {
"id": 468,
"path": [
[
468
]
],
"refId": "32f59da5-7dd9-4efd-a268-dfea013b52fa",
"refType": "team",
"refSource": "MasterGraph",
"createdAt": "2021-06-21T08:59:33.902Z",
"updatedAt": "2021-06-21T08:59:33.950Z",
"customFields": null,
"data": {
"name": "Procurement"
},
"status": "active"
}
},
{
"id": "473",
"name": "Validation",
"leaf": true,
"path": [
[
473
]
],
"expanded": false,
"data": {
"id": 473,
"path": [
[
473
]
],
"refId": "916bbf9e-60ed-40c3-bcb6-2b9d546a3c3f",
"refType": "team",
"refSource": "MasterGraph",
"createdAt": "2021-06-21T08:59:34.028Z",
"updatedAt": "2021-06-21T08:59:34.098Z",
"customFields": null,
"data": {
"name": "Validation"
},
"status": "active"
}
},
{
"id": "5684",
"name": "RED-CAT",
"leaf": true,
"path": [
[
5684
]
],
"expanded": false,
"data": {
"id": 5684,
"path": [
[
5684
]
],
"refId": "3e8de641-27f7-46db-96ed-eadc61b4b8dc",
"refType": "team",
"refSource": "MasterGraph",
"createdAt": "2021-08-19T07:53:24.719Z",
"updatedAt": "2021-08-24T06:08:17.357Z",
"customFields": null,
"data": {
"name": "RED-CAT"
},
"status": "active"
}
}
]
},
"eventStore": {
"data": [
{
"id": "5402",
"resourceId": "411",
"name": "Van SOP H3L3 WIV US",
"startDate": "2022-10-03T03:51:00.000Z",
"endDate": "2022-10-03T03:51:00.000Z"
},
{
"id": "5377",
"resourceId": "348",
"name": "Drop 8",
"startDate": "2022-04-18T03:56:00.000Z",
"endDate": "2022-04-18T03:56:00.000Z"
},
{
"id": "5376",
"resourceId": "348",
"name": "Drop 7",
"startDate": "2022-03-21T04:06:00.000Z",
"endDate": "2022-03-23T03:56:00.000Z"
},
{
"id": "5375",
"resourceId": "348",
"name": "Drop 6",
"startDate": "2022-02-21T03:56:00.000Z",
"endDate": "2022-02-21T03:56:00.000Z"
},
{
"id": "5374",
"resourceId": "348",
"name": "Drop 5",
"startDate": "2022-01-24T03:56:00.000Z",
"endDate": "2022-01-24T03:56:00.000Z"
},
{
"id": "5373",
"resourceId": "348",
"name": "Drop 4",
"startDate": "2022-01-03T03:56:00.000Z",
"endDate": "2022-01-03T03:56:00.000Z"
},
{
"id": "5372",
"resourceId": "348",
"name": "Drop 3",
"startDate": "2021-11-29T03:56:00.000Z",
"endDate": "2021-11-29T03:56:00.000Z"
},
{
"id": "5371",
"resourceId": "348",
"name": "Drop 2",
"startDate": "2021-11-01T05:43:00.000Z",
"endDate": "2021-11-01T05:43:00.000Z"
},
{
"id": "5370",
"resourceId": "348",
"name": "Drop 1",
"startDate": "2021-10-04T05:43:00.000Z",
"endDate": "2021-10-04T05:43:00.000Z"
},
{
"id": "5369",
"resourceId": "473",
"name": "Type Approval Submission",
"startDate": "2022-05-16T03:56:00.000Z",
"endDate": "2022-06-27T03:56:00.000Z"
},
{
"id": "5368",
"resourceId": "473",
"name": "Van Certification Process",
"startDate": "2022-02-21T03:56:00.000Z",
"endDate": "2022-05-09T03:56:00.000Z"
},
{
"id": "5367",
"resourceId": "473",
"name": "Gamma T&V (50+ Vehicles)",
"startDate": "2021-12-13T03:56:00.000Z",
"endDate": "2022-02-14T03:56:00.000Z"
},
{
"id": "5366",
"resourceId": "473",
"name": "Pre Gamma Testing (Thermal, Steering, Brakes) ",
"startDate": "2021-09-06T03:56:00.000Z",
"endDate": "2021-12-06T03:56:00.000Z"
},
{
"id": "5365",
"resourceId": "473",
"name": "Beta Rework & Testing (Thermal, Steering, Brakes, RLD, Integration) \t\t\t\t\t\t\t\t\t\t\t\t\t\t",
"startDate": "2021-05-17T03:56:00.000Z",
"endDate": "2021-08-30T03:56:00.000Z"
},
{
"id": "5364",
"resourceId": "468",
"name": "Delta SIP",
"startDate": "2022-05-30T03:55:00.000Z",
"endDate": "2022-05-30T03:55:00.000Z"
},
{
"id": "5363",
"resourceId": "468",
"name": "Gamma SIP Cargo",
"startDate": "2022-03-28T03:55:00.000Z",
"endDate": "2022-03-28T03:55:00.000Z"
},
{
"id": "5362",
"resourceId": "468",
"name": "Gamma SIP WIV",
"startDate": "2021-10-04T03:54:00.000Z",
"endDate": "2021-10-04T03:54:00.000Z"
},
{
"id": "5361",
"resourceId": "468",
"name": "Gamma SL orders",
"startDate": "2021-06-28T03:54:00.000Z",
"endDate": "2021-09-27T03:54:00.000Z"
},
{
"id": "5360",
"resourceId": "468",
"name": "Gamma ML orders",
"startDate": "2021-05-03T03:53:00.000Z",
"endDate": "2021-06-21T03:53:00.000Z"
},
{
"id": "5359",
"resourceId": "5684",
"name": "Confirmation Simulation Loop",
"startDate": "2021-10-04T03:53:00.000Z",
"endDate": "2021-11-08T03:53:00.000Z"
},
{
"id": "5358",
"resourceId": "5684",
"name": "Optimisation Loop",
"startDate": "2021-07-05T03:53:00.000Z",
"endDate": "2021-09-27T03:53:00.000Z"
},
{
"id": "5357",
"resourceId": "5684",
"name": "v3 to v4 Simulation Loop",
"startDate": "2021-05-03T03:52:00.000Z",
"endDate": "2021-06-28T03:52:00.000Z"
},
{
"id": "5356",
"resourceId": "411",
"name": "Van SOP H3L3 CARGO EU",
"startDate": "2022-11-07T03:44:00.000Z",
"endDate": "2022-11-07T03:44:00.000Z"
},
{
"id": "5355",
"resourceId": "411",
"name": "Van SOP H3L3 WIV EU",
"startDate": "2022-09-05T03:44:00.000Z",
"endDate": "2022-09-05T03:44:00.000Z"
},
{
"id": "5354",
"resourceId": "411",
"name": "Van SOP H3L3 WIV UK",
"startDate": "2022-08-01T03:43:00.000Z",
"endDate": "2022-08-01T03:43:00.000Z"
},
{
"id": "5353",
"resourceId": "411",
"name": "Delta WIV Build Start (UK Microfactory)",
"startDate": "2022-07-04T08:41:00.000Z",
"endDate": "2022-07-25T08:41:00.000Z"
},
{
"id": "5352",
"resourceId": "411",
"name": "Gamma Cargo Series Build (10 vehicles)",
"startDate": "2022-05-02T08:41:00.000Z",
"endDate": "2022-06-13T08:41:00.000Z"
},
{
"id": "5351",
"resourceId": "411",
"name": "Gamma WIV Series Build (50 vehicles) (fully Manually build until 17/01)",
"startDate": "2021-11-08T08:41:00.000Z",
"endDate": "2022-04-25T08:41:00.000Z"
},
{
"id": "5350",
"resourceId": "411",
"name": "Gamma Mule/Sub-assemblies",
"startDate": "2021-09-06T08:41:00.000Z",
"endDate": "2021-11-01T08:41:00.000Z"
},
{
"id": "5349",
"resourceId": "411",
"name": "LabVan",
"startDate": "2021-07-05T08:41:00.000Z",
"endDate": "2021-08-30T08:41:00.000Z"
},
{
"id": "5348",
"resourceId": "411",
"name": "Beta Build",
"startDate": "2021-05-03T08:41:00.000Z",
"endDate": "2021-06-28T08:41:00.000Z"
},
{
"id": "5347",
"resourceId": "414",
"name": "Delta Design Engineering",
"startDate": "2021-12-29T08:41:00.000Z",
"endDate": "2022-01-17T08:41:00.000Z"
},
{
"id": "5346",
"resourceId": "414",
"name": "H3L3 WIV Design and Release",
"startDate": "2021-05-03T08:41:00.000Z",
"endDate": "2021-09-27T08:41:00.000Z"
}
]
}
});
// Hide all visible context menus by global click
$(document).on('click', () => {
$('.dropdown-menu:visible').hide();
});
// Event menu handlers
$('#customEventMenu button').on('click', function() {
const
menuEl = $(this).parent(),
eventId = menuEl.data('eventId'),
resourceId = menuEl.data('resourceId'),
ref = $(this).data('ref');
switch (ref) {
// "Edit" menu item implementation
case 'edit':
scheduler.editEvent(scheduler.eventStore.getById(eventId), scheduler.resourceStore.getById(resourceId));
break;
// "Remove" menu item implementation
case 'remove':
scheduler.eventStore.remove(eventId);
break;
}
});PS I edited initial demo on this page
https://bryntum.com/examples/scheduler/custom-eventmenu/
I need to able catch these events:
