Our pure JavaScript Scheduler component


Post by niravf22 »

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.

Post by johan.isaksson »

Best regards,
Johan Isaksson

Post by niravf22 »

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

Post by johan.isaksson »

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 2313 times
Best regards,
Johan Isaksson

Post by niravf22 »

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.

Post by pmiklashevich »

All widgets have focusout event and you can provide a config for the startDate field like:
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

Pavlo Miklashevych
Sr. Frontend Developer


Post by niravf22 »

This is helpful. Thanks, Pavel.

Post Reply