How to navigate next day or previous day in React Scheduler?
This article explains how to navigate to the next day or the previous day in a react scheduler. The React Scheduler
component in the TimelineWeek view lets users navigate through weeks. When
users click the next or previous week buttons, the Scheduler shifts the view to
display the corresponding week's events.
To modify this
behavior and enable navigation to the next or previous day within the
TimelineWeek view, follow these steps:
- Use the navigating event: The Scheduler’s navigating
event allows you to customize the default navigation behavior. This event will triggers when users try to move to a different view or date.
- Implement Day Navigation: In the navigating event handler, adjust the logic to change the navigation unit from week to day. This modification ensures that clicking the next or previous button in the TimelineWeek view will shift the display to the next or previous day rather than the next or previous week.
let isPreviousOrNext = false; let selectedDateUpdated = false; let isDayNavigate = false; let dayMilliseconds = 86400000; const navigateDate = (args) => { if (!isDayNavigate ) { if (!selectedDateUpdated) { args.cancel = true; if (isPreviousOrNext) { const selectingTime = args.previousDate.getTime() + (args.currentDate > args.previousDate ? dayMilliseconds : -dayMilliseconds ); scheduleObj.current.selectedDate = new Date(selectingTime); isPreviousOrNext = false; } selectedDateUpdated = true; } else { selectedDateUpdated = false; } } else { isDayNavigate = false; } };
const changeDate = (days) => { const newDate = new Date(scheduleObj.current.getCurrentViewDates()[0]); newDate.setDate(newDate.getDate() + days);
scheduleObj.current.changeDate(newDate); scheduleObj.current.firstDayOfWeek = newDate.getDay(); };
const onleftDobleClick = () => { isDayNavigate = true; changeDate(-7); };
const onleftRightClick = () => { isDayNavigate = true; changeDate(7); }; return ( <div className="schedule-control-section"> <div className="col-lg-9 control-section"> <div className="control-wrapper"> <ScheduleComponent width="100%" height="650px" ref={scheduleObj} selectedDate={new Date(2021, 1, 15)} navigating={navigateDate} > <ViewsDirective> <ViewDirective option="TimelineWeek" /> <ViewDirective option="TimelineDay" /> </ViewsDirective> <Inject services={[TimelineViews, Resize, DragAndDrop]} /> </ScheduleComponent> </div> </div> </div> ) |
Refer to the working sample for additional details and implementation: https://stackblitz.com/edit/navigate-next-day-or-week-45dhuw?file=index.js
Conclusion:
We hope you enjoyed learning about how to navigate the next day or the previous day in React Scheduler.
You can refer to our React Scheduler feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Scheduler example to understand how to create and manipulate data.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!
