--- title: "React Timeline Multiple Time Scales Example | Mobiscroll" component: "Timeline" framework: "React" library_version: "6.1.5" url: "https://demo.mobiscroll.com/react/timeline/multiple-days-weeks-months-quarters-years-variable-resolution" --- # Multiple Time Scales - React Timeline demo Configure span and time scale on a React Timeline — switch day, week, month, quarter, or year views, set resolution, and show or hide empty rows. For React and Next.JS. - [Live demo](https://demo.mobiscroll.com/react/timeline/multiple-days-weeks-months-quarters-years-variable-resolution) - [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/eventcalendar/timeline/multiple-days-weeks-months-quarters-years-variable-resolution) - [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/eventcalendar/timeline/multiple-days-weeks-months-quarters-years-variable-resolution) - This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/timeline/multiple-days-weeks-months-quarters-years-variable-resolution.md), [jQuery](https://demo.mobiscroll.com/jquery/timeline/multiple-days-weeks-months-quarters-years-variable-resolution.md), [Angular](https://demo.mobiscroll.com/angular/timeline/multiple-days-weeks-months-quarters-years-variable-resolution.md), [Vue](https://demo.mobiscroll.com/vue/timeline/multiple-days-weeks-months-quarters-years-variable-resolution.md) ## Description There are four types of timeline views: `day`, `week`, `month` and `year`. Use the `size` property of the configuration object to set the length of the view or page size. Use the `resolutionHorizontal` property of the configuration object to set the horizontal unit of a timeline column, it can be `'hour'`, `'day'`, `'week'`, `'month'`, `'quarter'` and `'year'`. In case of hourly resolution, the columns can be split to minutes (1, 5, 15, 20, 30) or merged into multiple hours (2, 3, 4, 6, 8, 12) using the `timeCellStep` and `timeLabelStep` properties. Use the `resolutionVertical` property of the configuration object to set the vertical unit of a timeline rows, it can be `'day'` or `'none'`. If set to `'day'`, the days will be rendered on the vertical axis, while the hours of the day will be displayed on the horizontal axis. Use the `hideEmptyRows` property to control the visibility of empty rows. If `hideEmptyRows` is set to `true`, rows without any events will not be displayed. This has no effect on parent resources - they will remain visible unless `resolutionVertical` is set to `'day'`, in which case an entire day will be hidden if all resources are empty. Use the `hideInvalidRows` property to control the visibility of invalid rows. If `hideInvalidRows` is set to `true`, rows that are fully invalid - consists of periods defined as `allDay: true`, date (`MbscDateType`), or time ranges that span a full day or multiple days - will be hidden. This has no effect on parent resources - they will remain visible unless `resolutionVertical` is set to `'day'`, in which case an entire day will be hidden if all resources are fully invalid. The reference date, controlled through the `refDate` option, is today by default, but it can be set to any date, like the first day of the month, or the first day of the year. The `refDate` serves as the start of the reference range. From that point on you can navigate forward and backward. A couple of examples: - **Rolling two weeks** - use `type: 'day'` and `size: 14` - **Two weeks (starting with Sun/Mon)** - use `type: 'week'` and `size: 2` - **Quarter view, starting from January** - use `type: 'year'` and `resolutionHorizontal: "quarter"` - **Rolling three months** - use `type: 'month'` and `size: 3` - **Year view** - use `type: 'year'` ## What this demo shows - A desktop timeline layout with a custom date range arranged horizontally and resources listed vertically on the left. - **Range controls** A configuration panel beside the timeline lets users choose a numeric size from a select dropdown and switch the timeline type between `Day`, `Week`, `Month`, and `Year`, with `Day` selected by default. - **Page size** The range controls define how many days, weeks, months, or years are shown in the timeline. - **Horizontal resolution controls** A `Set the horizontal resolution` section lets users switch the timeline column unit between `Hour`, `Day`, `Week`, `Month`, `Quarter`, and `Year`, with `Day` selected by default. - **Vertical resolution controls** A `Set the vertical resolution` section lets users switch the vertical resolution between `None` and `Day`, with `None` selected by default. - **Hide controls** Two switch controls let users hide empty columns and hide invalid columns, with both options disabled by default. - **Initial view date** The first optional date setting is titled `If unset, the initial view date is today`. When enabled, users can set the initial view date with the `Set the initial view date to` checkbox and date picker. - **Reference date** The second optional date setting is titled `If unset, the reference date is today`. When enabled, users can set the date used for paging calculations with the `Paging is calculated from` checkbox and date picker. - **Header navigation** The custom date range on the left opens date navigation, while the previous and next arrows and the `Today` button on the right move through the configured page range or return to the current day. - **Month and day names** A fixed strip below the header shows month names and displays the days in the custom range using the `DD DDD` date format, with the current date highlighted. - **Resources** The left resource column shows nine resources. - **Event cards** Events appear as colored labels with the event title shown in bold. - **Event positioning** Events are placed by assigned resource and date. - **Event interaction** Events highlight on hover and expose drag and resize handles for moving events or changing their duration. - **Event selection** Clicking an event selects and highlights it. - **Scrolling** Horizontal and vertical scrolling are supported for navigating through the timeline range and resource list. ## Best for - **Event planning** Planning projects, releases, or roadmaps that span multiple weeks or months. - **Team management** Managing team schedules that need visibility beyond a single week. - **Resource allocation** Assigning resources and reviewing capacity across extended date ranges. - **Workload distribution** Comparing availability and workload across resources over larger timeline ranges. ## Tutorial ### Configure the page size - Display `15` - (x) Day - ( ) Week - ( ) Month - ( ) Year ### Set the horizontal resolution - ( ) Hour - (x) Day - ( ) Week - ( ) Month - ( ) Quarter - ( ) Year ### Set the vertical resolution - (x) None - ( ) Day - [ ] Hide empty rows - [ ] Hide invalid rows ### If unset, the initial view date is today - [ ] Set the initial view date to `10/01/2026` ### If unset, the [reference date](https://mobiscroll.com/docs/react/eventcalendar/api#opt-refDate) is today - [ ] Paging is calculated from `01/01/2026` ```jsx ``` With "Week": ```jsx ``` With "Month": ```jsx ``` With "Year": ```jsx ``` With "Hour": ```jsx ``` With "Week": ```jsx ``` With "Month": ```jsx ``` With "Quarter": ```jsx ``` With "Year": ```jsx ``` With "Day": ```jsx ``` With "Set the initial view date to" on: ```jsx ``` With "Paging is calculated from" on: ```jsx ``` ## 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 - [`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 - [`view`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) - option - [`data`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-data) - option - [`resources`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-resources) - option ## Code ### JSX ```jsx import { Eventcalendar, getJson, setOptions } from '@mobiscroll/react'; import { useEffect, useMemo, useState } from 'react'; setOptions({ theme: 'ios', themeVariant: 'light' }); function App() { const [myEvents, setEvents] = useState([]); const myView = useMemo( () => ({ timeline: { type: 'week', size: 2, }, }), [], ); const myResources = useMemo( () => [ { id: 1, name: 'Flatiron Room', color: '#fdf500', }, { id: 2, name: 'The Capital City', color: '#ff0101', }, { id: 3, name: 'Heroes Square', color: '#01adff', }, { id: 4, name: 'Thunderdome', color: '#ff4600', }, { id: 5, name: 'King’s Landing', color: '#239a21', }, { id: 6, name: 'Gathering Field', color: '#8f1ed6', }, ], [], ); useEffect(() => { getJson( 'https://trial.mobiscroll.com/daily-weekly-events/', (events) => { setEvents(events); }, 'jsonp', ); }, []); return ( ); } export default App; ``` ### TSX ```tsx import { Eventcalendar, getJson, MbscCalendarEvent, MbscEventcalendarView, MbscResource, setOptions, } from '@mobiscroll/react'; import { FC, useEffect, useMemo, useState } from 'react'; setOptions({ theme: 'ios', themeVariant: 'light' }); const App: FC = () => { const [myEvents, setEvents] = useState([]); const myView = useMemo( () => ({ timeline: { type: 'week', size: 2, }, }), [], ); const myResources = useMemo( () => [ { id: 1, name: 'Flatiron Room', color: '#fdf500', }, { id: 2, name: 'The Capital City', color: '#ff0101', }, { id: 3, name: 'Heroes Square', color: '#01adff', }, { id: 4, name: 'Thunderdome', color: '#ff4600', }, { id: 5, name: 'King’s Landing', color: '#239a21', }, { id: 6, name: 'Gathering Field', color: '#8f1ed6', }, ], [], ); useEffect(() => { getJson( 'https://trial.mobiscroll.com/daily-weekly-events/', (events: MbscCalendarEvent[]) => { setEvents(events); }, 'jsonp', ); }, []); return ( ); }; export default App; ``` ## Implementation notes - Set `timeline: { type: 'week', size: 2 }` under the `view` option to display a rolling two-week timeline - the default configuration shown in the demo. The `size` property multiplies the span of the chosen `type`: `size: 2` with `type: 'week'` shows 14 days; `size: 3` with `type: 'month'` shows three months. - `type` determines the page unit and available navigation steps: `'day'` (single days), `'week'` (calendar weeks), `'month'` (calendar months), or `'year'` (calendar years). Common presets: rolling 14 days → `type: 'day', size: 14`; quarter view from January → `type: 'year', resolutionHorizontal: 'quarter'`; rolling three months → `type: 'month', size: 3`. - `resolutionHorizontal` overrides the default column width unit for the chosen type. Accepts `'hour'`, `'day'`, `'week'`, `'month'`, `'quarter'`, or `'year'`. For hourly resolution, use `timeCellStep` and `timeLabelStep` (in minutes) to split columns into finer intervals (e.g. 15 or 30 min) or merge them into multi-hour blocks (e.g. 120 for 2 hours). - `resolutionVertical: 'day'` renders days on the vertical axis with hours on the horizontal axis - useful for a Gantt-style layout. The default `'none'` renders resources on the vertical axis. - Set `hideEmptyRows: true` to suppress resource rows that have no events in the current view. Set `hideInvalidRows: true` to suppress rows that are entirely covered by `allDay` or full-day invalid ranges. Neither property affects parent resource rows unless `resolutionVertical: 'day'` is active. - Use `refDate` to fix the start of the view to a specific date (e.g. the first of January for a year view). Without it, today is used as the reference point and navigation moves forward/backward from there. - Define room or venue resources with `id`, `name`, and `color`. Load events from a remote endpoint using `getJson` (or any fetch helper) and pass them to `data`. ## 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 - Previous: [Day, Week, Month & Year Views](https://demo.mobiscroll.com/react/timeline/daily-weekly-monthly-yearly-timeline.md) - Switch between day, week, month, and year views on the React Timeline — configure visible weekdays, working hours, and time scale per view. - Next: [Calendar Zoom Levels](https://demo.mobiscroll.com/react/timeline/calendar-zoom.md) - Add zoom controls to a React resource timeline to switch from day/hour detail to monthly/yearly overviews— keeping events centered as the view changes.