When I am in month view and I resize an appointment, the time changes to 12:00am (see attached video). In all other calendar applications that I've worked with, when I resize an event in a month view, then the date changes but the time remains the same.
Is there a way to resize an event in month layout and update the date range without changing the start time or end time of the event?
Hi Ryan,
Based on your requirement, we prepared a React sample to maintain the event startTime and endTime after the eventStop by using the resizeStart event and resizeStop events, as shown in the code snippet below. Refer to the shared sample for your reference. Kindly try it out.
[index.js]
|
const Default = () => { const scheduleObj = useRef(null);
let originalTimes = null;
const onEventResizeStart = (args) => { const { data } = args; // Store the original start and end times originalTimes = { start: new Date(data.StartTime), end: new Date(data.EndTime) }; }; const onEventResizeStop = (args) => { const { data } = args; // Use the original start and end times data.StartTime.setHours(originalTimes.start.getHours(), originalTimes.start.getMinutes()); data.EndTime.setHours(originalTimes.end.getHours(), originalTimes.end.getMinutes()); scheduleObj.current.dataBind(); }; return (<div className='schedule-control-section'> <div className='col-lg-9 control-section'> <div className='control-wrapper'> <ScheduleComponent height='650px' ref={scheduleObj} selectedDate={scheduleData} eventSettings={{ dataSource: data }} resizeStart={onEventResizeStart} resizeStop={onEventResizeStop}> <ViewsDirective> <ViewDirective option='Month'/> </ViewsDirective> <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]}/> </ScheduleComponent> </div> </div> </div>); }; export default Default; |
Sample link: https://stackblitz.com/edit/react-arkmmz-tl2svp?file=index.js
Please let us know if you need any further assistance.
Regards,
Vijay
