Day and Week Views in the React Scheduler
Day and Week views provide focused scheduling with flexible time ranges and customizable work-hour highlighting. Configure visible periods, time intervals, and work schedules to create a personalized scheduling environment.
Setting number of visible days
Control the number of consecutive periods displayed using the interval property on each view. Set interval={3} on DayView to show 3 days, interval={2} on WeekView to show 2 weeks, or interval={4} on MonthView to show 4 months for multi-period planning.
Change time interval
Customize the time-slot granularity using the timeScale property. Set interval to define the minutes per main time slot and slotCount to specify the number of sub-slots within each main slot, allowing you to control the grid density and event alignment precision.
Flexible working days
Define which days are considered working days using the workDays property with day indices 0–6 (where 0 is Sunday). Set workDays={[1, 3, 5]} to designate Monday, Wednesday, and Friday as working days, and use firstDayOfWeek to control which day appears first in the week header.
Flexible working hours
Configure your business hours using the workHours property with start and end times, and toggle highlight to visually emphasize working hours across the calendar. This helps distinguish business time from non-working time at a glance.
Setting visible hours
Restrict the calendar display to a specific time window using startHour and endHour properties. Combine these with the workHours property to visually highlight your core business hours within the limited view range.
Show current time indicator
Enable a live current-time indicator with the showTimeIndicator property, which displays an animated line aligned with the system clock. The indicator appears in Day, Week, and WorkWeek views to provide real-time context during scheduling.