Changing event end time based on start time

Our pure javascript Scheduler component
Post Reply
User avatar
niravf22
Posts: 20
Joined: Tue Sep 18, 2018 6:17 pm

Changing event end time based on start time

Post by niravf22 » Fri Dec 07, 2018 9:46 am

Hi Team,

Is there a way I can listen to the change of event start time and auto-fill the end time (eg end_time + 10 minutes) while adding/editing an event?

Checked the docs, but could not find a specific example.
Thanks much.

User avatar
johan.isaksson
Core Developer
Core Developer
Posts: 160
Joined: Tue Apr 12, 2016 9:50 pm

Re: Changing event end time based on start time

Post by johan.isaksson » Fri Dec 07, 2018 10:16 am

Best regards,
Johan Isaksson

User avatar
niravf22
Posts: 20
Joined: Tue Sep 18, 2018 6:17 pm

Re: Changing event end time based on start time

Post by niravf22 » Fri Dec 07, 2018 12:52 pm

Hi Johan,
Thanks for helping out. The listeners you suggested looks like events that are triggered when an event is changed/updated. Would it also fire when I change a property (start_time in this case) and haven't saved the event yet?

I need to auto populate end time based on start time and this happens before you create/update an event.
Also, can you share some code snippet? The documentation doesn't provide much info about what will be available inside the listener.

Thanks

User avatar
johan.isaksson
Core Developer
Core Developer
Posts: 160
Joined: Tue Apr 12, 2016 9:50 pm

Re: Changing event end time based on start time

Post by johan.isaksson » Fri Dec 07, 2018 12:57 pm

Not sure I follow, if you change a startDate programmatically then I assume you could just also change the endDate according to your calculation at the same time? If I am misunderstanding, please supply a more detailed description or a snippet that describes what you want to achieve.

If you click the event in docs it will expand to show you its parameters:
Screenshot 2018-12-07 at 11.53.27.png
Screenshot 2018-12-07 at 11.53.27.png (151.04 KiB) Viewed 36 times
Best regards,
Johan Isaksson

User avatar
niravf22
Posts: 20
Joined: Tue Sep 18, 2018 6:17 pm

Re: Changing event end time based on start time

Post by niravf22 » Fri Dec 07, 2018 1:21 pm

Hi Johan,

I am not changing the start_time programmatically. We want this to happen when our users are adding/updating events manually. So imagine a user clicks on a time slot. This will open a popup to add event details (like name, start date time, end date time etc). Now when they add a value to start time, I want to adjust the end time accordingly. So if a user enters 6:30 PM as start time and focus out, this should auto-fill end time as 6:45 pm (or something else based on our business logic).

Hope this is clear.

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 643
Joined: Fri Apr 01, 2016 11:08 am

Re: Changing event end time based on start time

Post by pmiklashevich » Fri Dec 07, 2018 5:40 pm

All widgets have focusout event and you can provide a config for the startDate field like:

Code: Select all

features : {
    eventEdit  : {
        startDateConfig : {
            listeners : {
                focusout : function ({source : startDateField}) {
                    console.log(startDateField.value);
                    startDateField.parent.widgetMap.endDateField.value = new Date(2018, 0, 1);
                }
            }
        },
Hope this will help you

Cheers,
Pavel
Pavel Miklashevich - Core Developer

User avatar
niravf22
Posts: 20
Joined: Tue Sep 18, 2018 6:17 pm

Re: Changing event end time based on start time

Post by niravf22 » Mon Dec 10, 2018 1:35 pm

This is helpful. Thanks, Pavel.

Post Reply