When I double-click an empty time slot in the Week View, I arrive at the new event editor. The default duration for a new meeting is 15 minutes (likely the result of my slotDivisions and slotDuration properties, see below). I would like this default to be 30 minutes while retaining the behavior where time of day is listed on the left hand side, with slots starting every 15 minutes.
I have my scheduler configured thus:
<Scheduler
data={data}
editable={true}
onDataChange={handleDataChange}
resources={resources}
>
<WeekView slotDivisions={1} slotDuration={15} />
</Scheduler>
Is there a property I can set? Or perhaps is there an event handler I can use to manually tweak the scheduled end time when starting to edit a new event?
8 Answers, 1 is accepted
Hi Brent,
When double-clicking on a slot to edit it, by default the form takes the duration of the slot itself as the default duration in the editor. The default duration is indeed 15 minutes because of the slotDuration property.
What can be done to achieve the customization of the default duration is to replace the default field editor of the 'End' field through the 'endEditor' property of the SchedulerFormEditor. The value of the field editor is then configured to hold a value that is 30 minutes after the 'Start' value. There is an article in our documentation about replacing default field editors at the following link:
https://www.telerik.com/kendo-react-ui/components/scheduler/customization/form/editor/#toc-replacing-default-field-editors
Hope this is helpful.
Regards,
Krissy
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron
I've explored the link you provided and am getting lost. I've managed to manipulate some of the editors, but I can't figure out precisely where to update the end date/time. I started with the StackBlitz in the "Replacing default field editors" section you linked to above. This example focuses on overriding the display and handling of error messages, so I've replaced custom-form-editor.jsx with this:
import * as React from 'react';import { SchedulerFormEditor } from '@progress/kendo-react-scheduler'import { DateTimePicker } from '@progress/kendo-react-dateinputs';const CustomEndEditor = (props) => { // Adjust value in here? return ( <DateTimePicker {...props} defaultShow={true} /> );};export const CustomFormEditor = (props) => { return ( <SchedulerFormEditor {...props} endEditor={CustomEndEditor} /> )};
This enables me to substitute the date pickers with one with a property overridden. (In this case, "End" has its calendar automatically popped up because of "defaultShow".)
How can I "add 30 minutes to 'start' if and only if we're editing a new appointment"?
I know this is a tricky question, so thanks for walking me through it!
Hi Brent,
You're almost there, the code looks great.
The only thing that needs to be added to the properties ot the DateTimePicker rendered in the CustomEndEditor is the defaultValue: https://www.telerik.com/kendo-react-ui/components/dateinputs/api/DateTimePickerProps/#toc-defaultvalue
This will override the default value which is based on the slot duration and will allow you to replace it with any other value:
https://stackblitz.com/edit/react-my8cwm?file=app%2Fcustom-form-editor.jsx
Hope this is helpful.
Regards,
Krissy
Progress Telerik
Тhe web is about to get a bit better!
The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.
Rank 1
Iron
We're getting closer. Thanks for the update! I've discovered one fatal flaw in this approach. Check out what happens when you open up the editor. You correctly see "end" offset by one hour. But then type characters into the title. Every keystroke increments end by another hour! There's some sort of React shenanigans going on that I don't grasp.
What do you or your colleagues think?
(Also, it was complaining about trying to stick a number in defaultValue, so I think the component needs the code below.)
import * as React from 'react'; import { SchedulerFormEditor } from '@progress/kendo-react-scheduler'import { DateTimePicker } from '@progress/kendo-react-dateinputs';const CustomEndEditor = (props) => { const newEndDate = new Date(props.value.setHours(props.value.getHours() + 1)); return <DateTimePicker {...props} defaultShow={true} defaultValue={newEndDate}/>;}; export const CustomFormEditor = (props) => { return <SchedulerFormEditor {...props} endEditor={CustomEndEditor} />;};Hi Brent,
Thank you for noticing those things.
I've updated the example which now prevents incrementing by an hour on every keystroke and have fixed the prop passed to defaultValue to be the correct type:
https://stackblitz.com/edit/react-my8cwm?file=app%2Fcustom-form-editor.jsx
Hope this is useful.
Regards,
Krissy
Progress Telerik
Тhe web is about to get a bit better!
The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.
Rank 1
Iron
I first want to thank you for the lengths to which you've gone to answer my inquiry. I don't want to pursue this approach any further. I see you've pulled some tools out of your React tool belt in the form of useRef and useEffect. The bug I'm seeing at present is that although the date does not increment when typing single characters into a text box, editing an existing appointment *does* cause the popup to load with an end time one hour beyond the time displayed in the grid. (It's auto-incrementing existing appointments as well as new ones.)
I have no doubt that you can pull another tool out of your React tool belt to address that, but I do not have confidence in *my* ability to troubleshoot bugs related to appointment editing that our QA team may discover a month or two down the line. (I'm learning React now.) So I'd say it isn't "easy" to override default meeting length, although a React whiz may well be able to do it.
Thanks again for how hard you did work to investigate.
Hi Brent,
I very much appreciate your kind words.
I still updated the example to match this requirement, in case you wish to implement this case.
This was done by controlling what editor is passed to the SchedulerForm based on whether the appointment is a new one or an existing one (whether the dataItem has an id):
https://stackblitz.com/edit/react-my8cwm?file=app%2Fcustom-form.jsx
The main idea is to pass the custom editor only when the appointment is a new one, otherwise the default editor is passed (or any another custom one if you desire).
I hope this is helpful.
Please do not hesitate to contact us again if needed.
Regards,
Krissy
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/.
Rank 1
Iron
It works! By golly, it works. You have a great day.
For reference for other programmers, this I tweaked custom-form-editor.jsx in your most recent StackBlitz to achieve precisely what I had originally intended:
import * as React from 'react'; import { SchedulerFormEditor } from '@progress/kendo-react-scheduler'import { DateTimePicker } from '@progress/kendo-react-dateinputs';const CustomEndEditor = (props) => { const defaultEndTime = React.useRef(props.value) React.useEffect(() => { // defaultEndTime.current = defaultEndTime.current.setHours(props.value.getHours() + 1) defaultEndTime.current.setTime(defaultEndTime.current.getTime() + 900000); // 60k msec/min * 15 min = 900k msec }, []); return ( <DateTimePicker {...props} defaultValue={new Date(defaultEndTime.current)}/> );}; export const CustomFormEditor = (props) => { return ( <SchedulerFormEditor {...props} endEditor={CustomEndEditor} /> );};