Our powerful JS Calendar component


Post by orthobridge »

Hi,

We're running into a consistent crashing mode here when clicking on a weekend in resourceView when weekends are disabled. It's clearly a bug but I've not got enough to pinpoint or document it as yet. I've got a big demo early next week and need a workaround.

The proposed workaround is to force the view to show all 7 days and disable/hide the weekdays button so it cannot be switched back to only working days.

Is this feasible in resource View ?

We've tried to switch it off but it ignores our setting or am putting it in the wrong place - includeWeekendsButton

A view of the infinite loop when selecting weekends attached. It's a race condition somehwere in the Brytum lib (5.2.4 ...calednar.umd.js)

Any/all help very gratefully received ..

Attachments
x.PNG
x.PNG (224.2 KiB) Viewed 500 times
Capture.PNG
Capture.PNG (98.94 KiB) Viewed 502 times
Capture.PNG
Capture.PNG (126.27 KiB) Viewed 503 times

Post by Animal »

It’s related to another report I think. You are using the LoadOnDemand feature?

CrudManager does not like issuing multiple, concurrent load requests, and if it gets a request to load while already loading, it throws this error.

But I cannot work out how you would get two load requests.


Post by orthobridge »

Here's the code. All I'm doing to initiate the race condition is click on a Saturday or Sunday. So the race condition is called in the calendar code ... if I can disable or hide the weekends (and force 7 days) then I'll live through the demo ....

I could also do with a way to remove the native eventRecord remnants after a customer event editor is called - at the moment I'm reloading the data - I'm sure there's a much easier way to clear these

Thanks
J

Here's the code...


<script>
    const { Toast, ArrayHelper, DateHelper, StringHelper, Calendar, Splitter } = bryntum.calendar;
    
$(document).ready(function () { const calendar = new Calendar({ // Start life looking at this date date : new Date(), includeWeekendsButton: false, // Features named by the properties are included. features : { loadOnDemand: true, creatable: false, resizable: false, draggable: false, includeWeekendsButton: false, drag: { creatable: false, resizable: false, draggable: false }, calendarDrag: false, eventTooltip : { // Override the default which is to show on click. //showOn : 'hover', deleteEvent : null, // We want the tooltip's left edge aligned to the right edge of the event if possible. align : 'l-r', // Mustn't shrink because of large, graphical content minWidth : null, renderer : data => `<dl> <dt>Assigned to:</dt> <dd> ${StringHelper.encodeHtml(data.eventRecord.resource.name)} </dd> <dt>Time:</dt> <dd> ${DateHelper.format(data.eventRecord.startDate, 'LT')} - ${DateHelper.format(data.eventRecord.endDate, 'LT')} </dd> <dt>Note:</dt> ${data.eventRecord.get('notes') ? `<dd>${StringHelper.encodeHtml(data.eventRecord.notes)}</dd>` : '<dd>n/a</dd>'} </dl> `, }, }, // CrudManager arranges loading and syncing of data in JSON form from/to a web service crudManager: { transport: { load: { url: '/api/practice/calendar/resource_events' } }, autoLoad: false, }, // Render to a DIV with this id appendTo : 'container', // Resource avatar images are loaded from this path resourceImagePath : '../_shared/images/users/', modes : { // Mode name can be anything if it contains a "type" property. dayResources: { type: 'resource', title: 'Day', resourceWidth: '30em', hideNonWorkingDays: false, view: { type: 'dayview', dayStartTime: 8, dayEndTime: 20, tools: { close: { cls: 'b-fa b-fa-times', tooltip: 'Remove chair', handler() { const calendar = this.up('calendar'), resourceFilter = calendar.widgetMap.resourceFilter, resource = this.resource; resourceFilter.selected.remove(resource); } } } }, meta: resource => resource.title }, // Mode name can be anything if it contains a "type" property. weekResources : { // Type has the final say over which view type is created type : 'resource', title : 'Week', // Specify how wide each resource panel should be resourceWidth : '30em', hideNonWorkingDays : false, // This is a config object for the subviews view : { dayStartTime : 8, // Dock an additional widget at the end of the header // Show a close icon to filter out the resource tools : { close : { cls : 'b-fa b-fa-times', tooltip : 'Filter out this resource', handler() { const calendar = this.up('calendar'), resourceFilter = calendar.widgetMap.resourceFilter, resource = this.resource; resourceFilter.selected.remove(resource); } } } }, // Info to display below a resource name meta : resource => resource.title }, // Let's not show the default views day : null, week : null, month : null, year : null, agenda : null, }, listeners: { beforeEventDelete({ eventRecords, context }) { // creating new event or editing console.log(context); console.log(eventRecords); if (eventRecords[0].resource.isVirtualChair) { alert('Event summaries cannot be cancelled - cancel the appointment in the chair'); } else { _setAppointmentID(eventRecords[0].id); dmx.parse('modal_cancel_booking.show()'); } return false; }, beforeEventEdit({ eventRecord }) { // creating new event or editing console.log(eventRecord); if (eventRecord.resource.isUnavailable || eventRecord.resource.isVirtualChair) { _alertNOResource(); } else { if (eventRecord.meta.isCreating) _setAppointmentID('') else _setAppointmentID(eventRecord.id); dmx.parse('modal_event_editor.show()'); } return false; } }, // A block of configs which is applied to all modes. modeDefaults: { view: { hourHeight: 120 }, }, }); calendar.crudManager.load(); window.calendar = calendar; }); // init our data function _setAppointmentID(id) { dmx.parse("var_editing_appointment_id.setValue('" + id + "')"); } // clear up any native leftovers function _reloadData() { calendar.crudManager.load(); } function _alertNOResource() { dmx.parse("run({'bootbox.alert':{buttons:{ok:{label:'Cancel',className:'btn-info'}},message:'No resource available on selected date',title:'NO APPOINTMENTS'}})"); calendar.crudManager.load(); } </script>

Post by Animal »

This is a bug and I will try to fix it now to have it in the next release. It is this ticket: https://github.com/bryntum/support/issues/4530

The issue is that when you change some to not show weekends, some views require a different date range, and each one requests its own, and each request cancels the other.

Because that's how CrudManager works - it won't tolerate concurrent load requests. I think that is a CrudManager bug, but I will have to discuss that with the team.

Hopefully, I'll have that ticket in a review state today.


Post by orthobridge »

Thanks Animal,

I could also do with a way to remove the eventRecord remnant after a custom eventeditor is called - at the moment I'm reloading the dataset - I'm sure there's a much easier way to clear these


Post by Animal »

I'm not sure what you mean exactly by "eventRecord remnant".

Can you show code and a screenshot?


Post by orthobridge »

In the attached image, the Brytnum event record is showing. With the custom editor, if I cancel the update, I end up have to call a db.refresh() to remove the event recod remnant. I'm sure there's a simple way to remove it but I can't find it amongst all the documentation.

Attachments
Capture.PNG
Capture.PNG (155.36 KiB) Viewed 489 times

Post by Animal »

That's the event that got created by dblclick of drag. You detected that is was being created using eventRecord.meta.isCreating

I mea you can just remove it. But then what are you doing?

Create the event, then you can edit it using your custom editor. If you are not editing that newly created event in your custom editor, then what are you doing?

I'm trying to set up a test case with ResourceView and loadOnDemand.

But there's a bit of a chicken and egg. ResourceView needs resources to be loaded from the event store to create its child views.

But there are no views present which request any events to cause a load. So I'm not sure how your app is working.


Post by Animal »

BTW, this code:

            creatable: false,
            resizable: false,
            draggable: false,
            includeWeekendsButton: false,

            drag: {
                creatable: false,
                resizable: false,
                draggable: false
            },

            calendarDrag: false,

Looks a lot like throwing stuff at the wall to see what sticks.

There is no feature called includeWeekendsButton (unless you have created this feature)

If you want no drag and drop at all, it's just

features : {
    drag : false
}

Or if you want to disable things on a granular basis:

features : {
    drag : {
        // Only dbldlick to create new
        creatable : false
    }
}

Post Reply