Our powerful JS Calendar component


Post by niranjan »

Hello,
I need to disable the date column on the calendar when it is a holiday so that no events are created for that date.

Suppose March 24 is a holiday. Clicking anywhere on the calendar for that date should not trigger any new events.

How do I achieve this please?


Post by Animal »

You can intercept the scheduleDblClick event:

calendar.on('scheduleDblClick', function({ source, date }) {
    if (source.nonWorkingDays[date.getDay()]) {
        // Prevent the event continuing if it's on a non-working day
        return false;
    }
})

Post by niranjan »

I am using the BryntumCalendar wrapper.
How do I subscribe to this event?


Post by niranjan »

Never Mind
I can use the onScheduleDblClick()
I will try this out

Thanks for the help


Post by tasnim »

Hi,

You could use it in the calendar config like this

    listeners : {
        scheduleDblClick({ source, date }) {
            if (source.nonWorkingDays[date.getDay()]) {
                return false;
            }
        }
    },

Post by niranjan »

Thanks Tasnim.
I need a custom set of dates to lookup against and return false.
How can I access a value inside the AppConfig where I define the listener for scheduleDblClick?


Post by tasnim »

Then you could use it inside of your App component like this in the useEffect

/**
 * Application
 */
import React, { useEffect, useRef } from 'react';

import { BryntumCalendar, BryntumDemoHeader, BryntumThemeCombo } from '@bryntum/calendar-react';

import { calendarConfig } from './AppConfig';

import './App.scss';

function App() {
    const calendar = useRef();

useEffect(() => {
    calendar.current.instance.on('scheduleDblClick', ({ source, date }) => {
        if (source.nonWorkingDays[date.getDay()]) {
            return false;
        }
    });
}, [])

return (
    <>
        {/* BryntumDemoHeader component is used for Bryntum example styling only and can be removed */}
        <BryntumDemoHeader
            children={<BryntumThemeCombo />}
        />
        <BryntumCalendar
            ref={calendar}
            {...calendarConfig}
        />
    </>
);
}

export default App;

Post by niranjan »

This does not help with my condition.
I have used a workaround to check the date when onAfterEventSave event and check if it is a holiday and then remove the event from event store.
I would work I believe


Post by Animal »

Configure the listener handling function directly into the Calendar.

Screenshot 2023-03-27 at 13.51.35.png
Screenshot 2023-03-27 at 13.51.35.png (309.34 KiB) Viewed 551 times

Post by niranjan »

This worked for me.
I could not use the scheduleDblClick event as I had to use some dates generated programatically and use those dates to determine the non working dates.
I created my own validation based on the data from onAfterSave event and show custom message.

Thanks for your help with this.


Post Reply