[REACT] How do I disable the Date Column on Calendar
Posted: Fri Mar 24, 2023 10:19 am
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?
Re: [REACT] How do I disable the Date Column on Calendar
Posted: Fri Mar 24, 2023 2:19 pm
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;
}
})
Re: [REACT] How do I disable the Date Column on Calendar
Posted: Fri Mar 24, 2023 2:39 pm
by niranjan
I am using the BryntumCalendar wrapper.
How do I subscribe to this event?
Re: [REACT] How do I disable the Date Column on Calendar
Posted: Fri Mar 24, 2023 2:48 pm
by niranjan
Never Mind
I can use the onScheduleDblClick()
I will try this out
Thanks for the help
Re: [REACT] How do I disable the Date Column on Calendar
Posted: Fri Mar 24, 2023 2:55 pm
by tasnim
Hi,
You could use it in the calendar config like this
listeners : {
scheduleDblClick({ source, date }) {
if (source.nonWorkingDays[date.getDay()]) {
return false;
}
}
},
Re: [REACT] How do I disable the Date Column on Calendar
Posted: Mon Mar 27, 2023 12:05 pm
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?
Re: [REACT] How do I disable the Date Column on Calendar
Posted: Mon Mar 27, 2023 12:53 pm
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;
Re: [REACT] How do I disable the Date Column on Calendar
Posted: Mon Mar 27, 2023 1:03 pm
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
Re: [REACT] How do I disable the Date Column on Calendar
Posted: Mon Mar 27, 2023 1:52 pm
by Animal
Configure the listener handling function directly into the Calendar.
Screenshot 2023-03-27 at 13.51.35.png (309.34 KiB) Viewed 855 times
Re: [REACT] How do I disable the Date Column on Calendar
Posted: Tue Mar 28, 2023 10:19 am
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.