--- title: "React Scheduler Custom Range View Example | Mobiscroll" component: "Scheduler" framework: "React" library_version: "6.1.5" url: "https://demo.mobiscroll.com/react/scheduler/custom-range-view" --- # Custom Range View - React Scheduler demo Configure the React Scheduler with a custom date range view — let users pick any date span from a header range picker instead of fixed day. For React and Next.JS. - [Live demo](https://demo.mobiscroll.com/react/scheduler/custom-range-view) - [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/eventcalendar/scheduler/custom-range-view) - [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/eventcalendar/scheduler/custom-range-view) - This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/scheduler/custom-range-view.md), [jQuery](https://demo.mobiscroll.com/jquery/scheduler/custom-range-view.md), [Angular](https://demo.mobiscroll.com/angular/scheduler/custom-range-view.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/custom-range-view.md) ## Description The scheduler comes with [built-in support for day, week and month views](https://demo.mobiscroll.com/react/scheduler/display-multiple-days-weeks). For those situations where a custom range makes more sense, it is possible to override the calendar navigation component with a [range picker](https://demo.mobiscroll.com/react/range/date-filtering-with-predefined-ranges). The calendar header can be easily customized and a two-way synchronization needs to be kept between the scheduler and range picker. ## What this demo shows - A desktop scheduler layout with a custom date range in the header, a fixed all-day row below it, and a vertically scrollable time grid for the selected range. - **Header** The header shows the selected custom date range on the left. Clicking the displayed range opens an anchored range picker where users can choose a custom scheduler range instead of using only fixed day, week, month, or year views. - **Header navigation** The previous and next controls and the Today button let users move through the scheduler range and return to the current day. - **Custom range view** The fixed strip below the header displays the days in the selected range, with the current date highlighted. - **All-day events** All-day events appear in a dedicated row that stays fixed above the time grid. - **Time grid** The scheduler grid scrolls vertically through the hours of the selected custom range. - **Timed events** Timed events appear as colored cards in the scheduler grid, showing the start and end time above the event title. - **Event overlapping** Overlapping events are displayed side by side so every event remains visible. - **Current time** A current-time indicator appears across the scheduler grid. - **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments. - **Event interaction** Hovering over events highlights them and displays drag and resize handles for editing. - **Event creation** Users can create events by double-clicking the grid or by clicking and dragging across a time range. ## Best for - **Conference and event planning** Coordinate multi-day conferences, trade shows, workshops, festivals, corporate events, meetings, and sessions. - **Project and program management** Track project phases, milestones, launches, deadlines, and team activities across several weeks in a single scheduler view. - **Business travel and itineraries** Plan business trips, tours, client visits, training programs, and travel schedules while keeping appointments visible. - **Marketing and campaign planning** Manage campaigns, content schedules, product launches, promotional events, and key milestones over extended periods. ## API used in this demo - [`theme`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-theme) - option - [`themeVariant`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-themeVariant) - option - [`select`](https://mobiscroll.com/docs/react/datepicker/api#opt-select) - option - [`display`](https://mobiscroll.com/docs/react/datepicker/api#opt-display) - option - [`showOverlay`](https://mobiscroll.com/docs/react/datepicker/api#opt-showOverlay) - option - [`touchUi`](https://mobiscroll.com/docs/react/datepicker/api#opt-touchUi) - option - [`buttons`](https://mobiscroll.com/docs/react/datepicker/api#opt-buttons) - option - [`inputComponent`](https://mobiscroll.com/docs/react/datepicker/api#opt-inputComponent) - option - [`inputProps`](https://mobiscroll.com/docs/react/datepicker/api#opt-inputProps) - option - [`onClose`](https://mobiscroll.com/docs/react/datepicker/api#event-onClose) - event - [`onChange`](https://mobiscroll.com/docs/react/datepicker/api#event-onChange) - event - [`clickToCreate`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-clickToCreate) - option - [`dragToCreate`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToCreate) - option - [`dragToMove`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToMove) - option - [`dragToResize`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToResize) - option - [`eventDelete`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-eventDelete) - option - [`selectedDate`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-selectedDate) - option - [`renderHeader`](https://mobiscroll.com/docs/react/eventcalendar/api#renderer-renderHeader) - renderer - [`view`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) - option - [`data`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-data) - option - [`onPageLoading`](https://mobiscroll.com/docs/react/eventcalendar/api#event-onPageLoading) - event - [`onSelectedDateChange`](https://mobiscroll.com/docs/react/eventcalendar/api#event-onSelectedDateChange) - event - [`refDate`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-refDate) - option ## Code ### JSX ```jsx import { Button, CalendarNext, CalendarPrev, CalendarToday, Datepicker, Eventcalendar, formatDate, getJson, setOptions, } from '@mobiscroll/react'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; setOptions({ theme: 'ios', themeVariant: 'light' }); function App() { const [myEvents, setEvents] = useState([]); const [myRefDate, setMyRefDate] = useState(); const [currentDate, setCurrentDate] = useState(new Date()); const [rangeVal, setRangeVal] = useState([]); const [buttonText, setButtonText] = useState([]); const [calView, setCalView] = useState({ scheduler: { type: 'day', size: 14, }, }); const startDate = useRef(); const endDate = useRef(); const buttonProps = useMemo(() => { const content = {buttonText}; return { children: content, className: 'mbsc-calendar-button', variant: 'flat', }; }, [buttonText]); // Returns the number of days between two dates const getNrDays = useCallback( (start, end) => Math.round(Math.abs((end.setHours(0) - start.setHours(0)) / (24 * 60 * 60 * 1000))) + 1, [], ); // Returns the formatted date const getFormattedRange = useCallback( (start, end) => formatDate('MMM D, YYYY', new Date(start)) + (end && getNrDays(start, end) > 1 ? ' - ' + formatDate('MMM D, YYYY', new Date(end)) : ''), [getNrDays], ); const handleChange = useCallback((args) => { const date = args.value; setRangeVal(date); if (date[0] && date[1]) { startDate.current = date[0]; endDate.current = date[1]; } }, []); const handleClose = useCallback(() => { if (startDate.current && endDate.current) { // Navigate the calendar setCurrentDate(startDate.current); // Set calendar view setMyRefDate(startDate.current); setCalView({ scheduler: { type: 'day', size: getNrDays(startDate.current, endDate.current), }, }); } setRangeVal([startDate.current, endDate.current]); }, [getNrDays]); const handlePageLoading = useCallback( (args) => { const sDate = args.firstDay; const end = args.lastDay; const eDate = new Date(end.getFullYear(), end.getMonth(), end.getDate() - 1, 0); startDate.current = sDate; endDate.current = eDate; setTimeout(() => { // Set button text setButtonText(getFormattedRange(sDate, eDate)); // Set range value setRangeVal([sDate, eDate]); // Navigate the calendar setCurrentDate(sDate); }); }, [getFormattedRange], ); const handleSelectedDateChange = useCallback( (event) => { setCurrentDate(event.date); }, [setCurrentDate], ); useEffect(() => { getJson( 'https://trial.mobiscroll.com/events/?vers=5', (events) => { setEvents(events); }, 'jsonp', ); }, []); const customWithNavButtons = () => ( <>
); return ( ); } export default App; ``` ### TSX ```tsx import { Button, CalendarNext, CalendarPrev, CalendarToday, Datepicker, Eventcalendar, formatDate, getJson, MbscCalendarEvent, MbscDatepickerChangeEvent, MbscDatepickerValue, MbscDateType, MbscEventcalendarView, MbscPageLoadingEvent, MbscSelectedDateChangeEvent, setOptions, } from '@mobiscroll/react'; import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'; setOptions({ theme: 'ios', themeVariant: 'light' }); const App: FC = () => { const [myEvents, setEvents] = useState([]); const [myRefDate, setRefDate] = useState(); const [currentDate, setCurrentDate] = useState(new Date()); const [rangeVal, setRangeVal] = useState([]); const [buttonText, setButtonText] = useState(); const [calView, setCalView] = useState({ scheduler: { type: 'day', size: 14, }, }); const startDate = useRef(null); const endDate = useRef(null); // Returns the number of days between two dates const getNrDays = useCallback( (start: Date, end: Date) => Math.round(Math.abs((new Date(end).setHours(0) - start.setHours(0)) / (24 * 60 * 60 * 1000))) + 1, [], ); // Returns the formatted date const getFormattedRange = useCallback( (start: Date, end: Date) => formatDate('MMM D, YYYY', new Date(start)) + (end && getNrDays(start, end) > 1 ? ' - ' + formatDate('MMM D, YYYY', new Date(end)) : ''), [getNrDays], ); const onChange = useCallback((args: MbscDatepickerChangeEvent) => { const date = args.value as Date[]; setRangeVal(date); if (date[0] && date[1]) { startDate.current = date[0]; endDate.current = date[1]; } }, []); const onClose = useCallback(() => { if (startDate.current && endDate.current) { // Navigate the calendar setCurrentDate(startDate.current); // Set calendar view setRefDate(startDate.current); setCalView({ scheduler: { type: 'day', size: getNrDays(startDate.current, endDate.current), }, }); } setRangeVal([startDate.current, endDate.current]); }, [getNrDays]); const handlePageLoading = useCallback( (args: MbscPageLoadingEvent) => { const sDate = args.firstDay; const end = args.lastDay; const eDate = new Date(end.getFullYear(), end.getMonth(), end.getDate() - 1, 0); startDate.current = sDate; endDate.current = eDate; setTimeout(() => { // Set button text setButtonText(getFormattedRange(sDate, eDate)); // Set range value setRangeVal([sDate, eDate]); // Navigate the calendar setCurrentDate(sDate); }); }, [getFormattedRange], ); const handleSelectedDateChange = useCallback( (event: MbscSelectedDateChangeEvent) => { setCurrentDate(event.date); }, [setCurrentDate], ); const buttonProps = useMemo(() => { const content = {buttonText}; return { children: content, className: 'mbsc-calendar-button', variant: 'flat', }; }, [buttonText]); useEffect(() => { getJson( 'https://trial.mobiscroll.com/events/?vers=5', (events: MbscCalendarEvent[]) => { setEvents(events); }, 'jsonp', ); }, []); const customWithNavButtons = () => ( <>
); return ( ); }; export default App; ``` ### CSS ```css .md-custom-range-view-controls { display: flex; flex: 1 0 auto; justify-content: end; align-items: center; } ``` ## Implementation notes - Use `view: { scheduler: { type: 'day', size: 14 } }` - a multi-day scheduler where `size` is the number of days shown simultaneously. The initial value is 14; it is updated dynamically whenever the user selects a new range. - Render a custom header containing: a `Datepicker` in `select: 'range'` mode anchored to a button, a button displaying the formatted current date range, and `CalendarPrev`, `CalendarToday`, `CalendarNext` navigation controls. - Configure the `Datepicker` with `display: 'anchored'`, `showOverlay: false`, `touchUi: true`, and `buttons: []` (no footer buttons). Anchor it to the date-range button element so it opens positioned directly below it. - **Two-way sync**: On `onPageLoading` (React/Angular) or `onPageLoaded` (Vue/JS/jQuery), update the button text and datepicker range value to reflect the current calendar page. On datepicker `onClose`, calculate the number of days in the selected range, set `view.scheduler.size` to that count, and navigate the calendar to the range start date. - Load events from `https://trial.mobiscroll.com/events/?vers=5` via JSONP using `getJson(url, callback, 'jsonp')`. React/Angular/Vue: assign the fetched array to the state/property bound to the `data` prop. JS/jQuery (imperative API): call `inst.setEvents(events)` in the callback. ## Run it in your project 1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial). 2. Clone the repository: ``` git clone https://github.com/acidb/mobiscroll-demos-react.git ``` 3. If not installed yet, install the Mobiscroll CLI from NPM: ``` npm install -g @mobiscroll/cli ``` 4. Config Mobiscroll - open a terminal window in the root directory and run: ``` mobiscroll config react ``` 5. Install dependencies - open a terminal window in the root directory and run: ``` npm install ``` 6. Run the project: ``` npm run dev ``` On a trial, add `--trial` to the config command: `mobiscroll config react --trial`. Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/react/getting-started/installation ## Related demos - Next: [Limit Overlapping Events](https://demo.mobiscroll.com/react/scheduler/control-number-of-concurrently-shown-events.md) - Set a max count or auto-fit overlapping events to available space in the React Scheduler — useful for appointment-heavy views.