Premium support for our pure JavaScript UI components


Post by Phil234234234234 »

Hello

Recently we were having problems with resources not appearing in our calendar sidebar when expected. We have a process of adding and removing resources from this sidebar based on filters applied to the calendar - but that wasn't working.

After some research, it seems like the calendar sidebar doesn't always reflect properly what is in the main resource store. The issue is replicated in the below code (which you can paste into https://codepen.io/pen?__resourceRoot=https%3A%2F%2Fbryntum.com%2Fdocs%2Fcalendar%2F&editors=001)

/* eslint-disable no-undef,no-unused-vars */
const calendar = new Calendar({
    appendTo : document.body,
    tbar     : {
        items : {
            todayButton : false,
            prevButton  : false,
            nextButton  : false
        }
    },

// Not enough space to show the sidebar with the month calendar indicator
// and calendar selector.
sidebar : true,

// Start life looking at this date
date : '2020-05-14',

// Used to create view titles
dateFormat : 'DD MMM YYYY',

// Load resources (calendars) and events as JSON from this URL
crudManager : {
    transport : {
        load : {
            url : 'data/Calendar/examples/guides/readme/intro.json'
        }
    },
    autoLoad : true
},

// All modes re included by default.
// Each can be reconfigured from the default by using an object.
// Each may be omitted by configuring as false
modes : {
    week : {
        dayStartTime : 8
    },
    day : {
        dayStartTime : 8
    }
},

height : 700
});

calendar.resourceStore.add({name:'example', id: 'example'});

calendar.eventStore.listeners = {
                add: ({ records }) => {
                  calendar.resourceStore.add({name: 'example2', id: 'example2'});
                  const example2Resource =
                  calendar.resourceStore.records.filter(
                      ({ name }) => name === 'example2'
                  );
                  calendar.resourceStore.remove(
                    example2Resource
                  );
                  const exampleResource =
                  calendar.resourceStore.records.filter(
                      ({ name }) => name === 'example'
                  );
                  calendar.resourceStore.remove(
                    exampleResource
                  );
                },
            };

Essentially the code above adds a resource (called example) to the calendar resource store on load. When you load in the calendar, you can see 'example' in the sidebar. However I've also added a listener to the event store, which should both add and remove a new resource ('example2') and remove the existing resource ('example') whenever you add a new event. But when you actually add a new event, you'll notice example2 gets added and appears in the sidebar - but it never gets removed. And you'll notice the 'example' resource also never gets removed from the sidebar, but stays there

We've also had problems where adding resources to the resource store doesn't lead to them appearing in the calendar sidebar. Generally it seems possible for the main calendar resource store and the sidebar resource store to get out of sync with one another.

Is anyone able to take a look at this?

Thanks
Philip


Post by marcio »

Hey Philip,

That link for your Codepen is not working correctly, I'm not able to access the example.

But besides that, I was able to reproduce that behavior in our demos, and created a ticket to investigate/fix it https://github.com/bryntum/support/issues/5321

Best regards,
Márcio


Post Reply