How to set the default start time and end time in SyncFusion React JS calendar create window?

We can provide a custom value for the start time, end time, and other fields in SyncFusion React JS calendar create window by defining a function for the create action. In the following sample, I am using a function for the create action. In my scenario, calendar events are added when another element is dragged and dropped onto the calendar cell. Check this code sample:

const handleInstallDrop = (evt?: RowDragEventArgs) => {
// defined values here
const eventData: IResourceAllocationEvent = {
                Id: install.id,
                StartTime: startTime,
                EndTime: endTime,
                IsAllDay: cellData.isAllDay,
                Subject: install.tranId,
                ResourceIds: [resourceKey],
                EmployeeIds: resourceType === ResourceType.EMPLOYEE ? [resourceId] : [],
                EquipmentIds: resourceType === ResourceType.EQUIPMENT ? [resourceId] : [],
                InstallId: install.id,
            };
cal.openEditor(eventData, 'Add', true);
}

// Use the function inside the html section:

......
<PaneDirective size='75%' content={() => (
                    <div className="splitter-content-expand">
                        <LocationSelector locations={locations} selectedId={selectedLocation ? selectedLocation.id : undefined} />
                        <UnallocatedInstallGrid ref={installGridRef} allInstalls={installs} className={style.panel} onRowDragStop={handleInstallDrop} />
                    </div>
                )}>
</PaneDirective>

Leave a comment

Your email address will not be published. Required fields are marked *