Our powerful JS Calendar component


Post by chris.petty@duke.edu »

Hi, i'm trying to block an event by the duration, but it appears the duration isn't calculated until after the event save.

in calendar 5.5.3 i have:

        
beforeEventSave({eventRecord}){ console.log(`beforeEventSave : ${eventRecord.duration}`); console.log(eventRecord.data); // prevent if longer than allowed if (eventRecord.duration > thisExp[0].data.max_study_length){ Toast.show({html : `duration ${eventRecord.duration} minutes is longer than allowed for experiument ${thisExp[0].data.max_study_length}`}) return false; } } //.max_study_length is 240

In the attached you can see the .duration is just the default 60 mins duration and the calculation is only valid after saving for a second time

Should i be calculating myself, or grabbing duration from elsewhere?

Screen Recording 2023-11-09 at 10.34.52 AM.mov
duration calc
(24.38 MiB) Downloaded 34 times

Post by johan.isaksson »

Hi,

Calendar shares its data layer with Scheduler, and Scheduler in turn uses an async scheduling engine (which for the basic Scheduler & Calendar only normalizes dates & durations). This means that when changing a time component of an event, the related fields are updated "later". For example if you change the duration:

// Initial data for event
{
   startDate : '2023-11-10',
   duration  : 1,
   endDate : '2023-11-11'
}

event.duration = 2;

// Here event.endDate has not yet been calculated

To be sure that calculations (scheduling) has finished, you can use:

event.duration = 2;
await calendar.project.commitAsync();
// Here event.endDate has been recalculated

Hope that helps!

Best regards,
Johan Isaksson

Post by chris.petty@duke.edu »

thanks. i ended up just monitoring the change of the endTime and calculating my own duration

            //the end time selector
            endTimeField : {
                //fixed to 15m increments
                picker : { 
                    items : {
                        minute : { step : 15 }
                    }
                 },
                //save the endDate with updated time
                //have to copy the date from start because times are generic until after the sync
                listeners : {
                    change(event){
                        console.log(`change end time event:`);
                        //clone the start date
                        var tmpTime = new Date(currStartDate);
                        //set the end time
                        currEndDate = DateHelper.copyTimeValues(tmpTime,event.value);
                        console.log(currEndDate);
                        //save duration
                        currDuration = DateHelper.diff(currStartDate, currEndDate, 'minute');
                    }
                }
            },
   

Post Reply