Our powerful JS Calendar component


Post by jq123 »

We have a use case, where we want to prevent events from rendering on the Calendar given certain attributes of the Event. For example, let's say we don't want an event to render if the event's 'hidden' property is set to true.

Our issue is that eventRenderer function will always cause an event to render. If the function returns null, then the default renderer will be used. We have tried setting the following on the renderData object:

const eventRenderer({eventRecord, renderData}) => {
    if (eventRecord.hidden) {
        renderData.style.display = 'none';
    }
}

The problem with this approach is that the event still gets rendered, so even if it is hidden, the UI is affected by the rendering of the event. In the screenshot below, we have some all day events that are hidden; however, you can tell that the all-day section was expanded despite the fact there are no visible events within this section.

Screen Shot 2023-03-15 at 5.35.29 PM.png
Screen Shot 2023-03-15 at 5.35.29 PM.png (14.28 KiB) Viewed 232 times

Is there a way to prevent the event from getting rendered at all using the eventRenderer function? If not, what are some possible workarounds?


Post by tasnim »

Hi,

You could use the filter method for that
https://bryntum.com/products/calendar/docs/api/Scheduler/data/EventStore#function-filter

calendar.eventStore.filter(record => record.hidden !== true)

And there is also a demo about filtering here https://bryntum.com/products/calendar/examples/filtering/

I hope this will help.

All the best.


Post by jq123 »

Thank you! Using the filter was the right approach here


Post Reply