In the Scheduler component I would like to use different forms depending on if there is already an entry in a day column or not. Meaning, if there is no event yet on a specific day, I would like to show a different form than if there is already an event.
I have put the code where I use the Scheduler component here:
https://stackblitz.com/edit/react-ts-kyjpoi
This doesn't work of course because of the missing dependencies but I wanted to show you what I've done. The important parts are:
Line 160: Here I hijack the double click event of the slot to determine if there is already an event in the column and depending on the answer, I set the variable isDayEmpty which I use in line 207 to determine the form.
The problem is, that as I have hijacked the double click event, nothing happens anymore when I double click in the Scheduler and the Dialog with the form does not open anymore. How can I trigger the standard double click behavior (open the dialog) using the correct form?
I have put the code where I use the Scheduler component here:
https://stackblitz.com/edit/react-ts-kyjpoi
This doesn't work of course because of the missing dependencies but I wanted to show you what I've done. The important parts are:
Line 160: Here I hijack the double click event of the slot to determine if there is already an event in the column and depending on the answer, I set the variable isDayEmpty which I use in line 207 to determine the form.
The problem is, that as I have hijacked the double click event, nothing happens anymore when I double click in the Scheduler and the Dialog with the form does not open anymore. How can I trigger the standard double click behavior (open the dialog) using the correct form?
1 Answer, 1 is accepted
1
Accepted
Hello,
Thank you for the details.
The SchedulerSlot has the standard onDoubleClick handler in its props:
https://www.telerik.com/kendo-react-ui/components/scheduler/api/SchedulerSlotProps/#toc-ondoubleclick
In this case, we can use that prop in our custom handler. It can be something like this:
const OnStandardSlotClick = React.useCallback(
(event: SchedulerSlotMouseEvent) => {
const eventColumn = event.target.props.col;
setIsDayEmpty(isColumnEmpty(eventColumn));
props.onDoubleClick(event) // this will execute the default logic
},
[isColumnEmpty]
)Regards,
Stefan
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Bernd
commented on 28 Jan 2022, 03:18 PM
| edited
Top achievements
Rank 5
Bronze
Bronze
Bronze
Rank 5
Bronze
Bronze
Bronze
Thanks for your answer. Unfortunately props from the SchedulerSlotProps is not available here in the SchedulerSlotMouseEvent. I found event.target.props.onDoubleClick but if I use it like event.target.props.onDoubleClick(event) I get the error "Cannot invoke an object which is possibly undefined".
Stefan
commented on 31 Jan 2022, 06:04 AM
Telerik team
Hello,
The onDoubleClick prop has to be inside SchedulerSlotProps interface, not inside the event interface.
As this is a custom event we can set it to any:
The onDoubleClick prop has to be inside SchedulerSlotProps interface, not inside the event interface.
As this is a custom event we can set it to any:
const OnStandardSlotClick = React.useCallback(
(event: any) => {
const eventColumn = event.target.props.col;
setIsDayEmpty(isColumnEmpty(eventColumn));
props.onDoubleClick(event) // this will execute the default logic
},
[isColumnEmpty]
)