Snap events to timeslots on resize

Checklist

Please mark these items with an [x]

• I’ve already searched through existing tickets
• Other people will find this feature useful

Feature Description

Events are extended by mutiples of slotDuration so they cannot be resized to the end of a timeslot unless they did initially. Eg. Event ends at 8:35 so it can be resized to end at 9:05 but not 9:00.

https://codepen.io/freexd/pen/BazGNwE

The request is to “snap” event resizing to the timeslots which was the behaviour in v2:

https://codepen.io/freexd/pen/LYZXPVL

Requested in https://fullcalendar.freshdesk.com/a/tickets/2332

[minhhdl]

Any update on this? The snapping behavior in V2 is really good but why it disappears in current version. so sad 😦(

[yannkost]

I was able to make a workaround for the final result in eventResize, this however is NOT REFLECTED during resize. Is there a possiblitiy to update the event during resize? Would be great.

Still, and option would be more than appreciated. (We took a licence but where surprised that we can’t ‘snap’ to exact hours as our events where initialized with times not corresponding to the snapDuration as they where initialized with the current Timestamp in the database. )

Something like: ‘snapToSnapDuration’: boolean would be great. (Can be false as default, as long that we can decide. The options to NOT snap to a Duration can also be a desired behaviour.)

For the workaround:

eventResize: function (info) {

  let event = info.event
  if(roundToNextTimeSlot){
                          if (info.endDelta.years !== 0 || info.endDelta.months !== 0 || info.endDelta.days !== 0 || info.endDelta.milliseconds !== 0) {
                             
                              let value = setToRoundedTimeInterval(event.end)
                              event.setEnd(new Date(value.substring(0, value.length - 1)))
                              console.log('new EndDate', value)
                          }
  
                          if (info.startDelta.years !== 0 || info.startDelta.months !== 0 || info.startDelta.days !== 0 || info.startDelta.milliseconds !== 0) {
                              
                              let value = setToRoundedTimeInterval(event.start)
                              event.setStart(new Date(value.substring(0, value.length - 1)))
                              console.log('new StartDate', value)
                          }
                      }
}

Here setToRoundedTimeInterval is a custom function. example:

const setToRoundedTimeInterval = (date: Date) => {

        switch (calendar.view.type) {

            case 'resourceTimelineDay': {
                return roundTo5minInterval(date) // Rounds to nearest 5minutes
            }

            case 'resourceTimelineWeek': {
                return roundTo15minInterval(date)
            }

            case 'resourceTimelineMonth': {
                return roundToHalfDay(date)
            }
        }
    }