I'm currently in the process of developing an availability calendar for scheduling meetings during open times.
If a time slot is unavailable, users should not be able to place an event there.
While I have successfully implemented this feature, I am facing an issue with resizing events to adjust their duration.
The system only allows me to resize events when I remove the constraint property, but this also permits dragging events into unavailable slots.
To achieve this functionality, I make two API calls - one to retrieve availability data from Chronofy and another to fetch scheduled events for the selected period.
I combine these arrays and populate the Full Calendar events using the configuration options to display all events.
This code is purely a proof of concept, so it may not be very polished.
this.setEventSources([
...available_periods.available_periods.map((ap: any) => {
ap.groupId = 1;
ap.display = 'inverse-background';
return ap;
}),
...res.events.events.map((e: any) => {
e.id = e.event_id,
e.display ='auto';
e.className = 'tester';
e.editable = true;
e.durationEditable = true;
e.startEditable = true;
e.constraint = 1;
return e;
})]);
This function simply sets the event property on the Full Calendar options based on the provided array.
Note the display setting for the first array which represents available periods. The inverse-background option is used to differentiate between available and unavailable slots by displaying them as blank or greyed out respectively.
A groupId is assigned to group events together as per documentation requirements.
In the second array containing booked events, a constraint is set to prevent overlaps when dragging events with a groupId of 1.
While this functions correctly, I am struggling to enable event resizing/extending with this constraint in place.
If anyone could offer guidance or assistance on how to resolve this issue, I would greatly appreciate it.
Thank you