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>