React Scheduler: Default New Meeting Duration

8 posts, 0 answers
  1. Brent
    Brent avatar
    6 posts
    Member since:
    Mar 2021

    Posted 02 Apr Link to this post

    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?

  2. Krissy
    Admin
    Krissy avatar
    23 posts

    Posted 05 Apr Link to this post

    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.

  3. Brent
    Brent avatar
    6 posts
    Member since:
    Mar 2021

    Posted 2 days and 18 hours ago in reply to Krissy Link to this post

    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!

  4. Krissy
    Admin
    Krissy avatar
    23 posts

    Posted 2 days and 2 hours ago Link to this post

    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.

  5. Brent
    Brent avatar
    6 posts
    Member since:
    Mar 2021

    Posted 1 day and 21 hours ago in reply to Krissy Link to this post

    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} />;
    };
  6. Krissy
    Admin
    Krissy avatar
    23 posts

    Posted 1 day and 1 hour ago Link to this post

    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.

  7. Brent
    Brent avatar
    6 posts
    Member since:
    Mar 2021

    Posted 20 hours ago in reply to Krissy Link to this post

    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.

  8. Krissy
    Admin
    Krissy avatar
    23 posts

    Posted 5 hours ago Link to this post

    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/.

Back to Top