--- title: "Angular Timeline Custom Range Picker View Example | Mobiscroll" component: "Timeline" framework: "Angular" library_version: "6.1.5" url: "https://demo.mobiscroll.com/angular/timeline/custom-range-view" --- # Custom Range Picker View - Angular Timeline demo Replace the Angular Timeline's default header navigation with a range picker — let users set any custom date range, synced two-way with the timeline. For Angular 22 and Ionic 8. - [Live demo](https://demo.mobiscroll.com/angular/timeline/custom-range-view) - [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/eventcalendar/timeline/custom-range-view) - This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/timeline/custom-range-view.md), [jQuery](https://demo.mobiscroll.com/jquery/timeline/custom-range-view.md), [React](https://demo.mobiscroll.com/react/timeline/custom-range-view.md), [Vue](https://demo.mobiscroll.com/vue/timeline/custom-range-view.md) ## Description The timeline comes with [built-in support for day, week, month and year views](https://demo.mobiscroll.com/angular/timeline/multiple-days-weeks-months-quarters-years-variable-resolution). 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/angular/range/date-filtering-with-predefined-ranges). The calendar header can be easily customized and a two-way synchronization needs to be kept between the timeline and range picker. ## What this demo shows - A desktop timeline layout with a custom date range arranged horizontally and resources arranged vertically on the left. - **Header** The header shows the selected custom date range on the left. Clicking the displayed range opens an anchored range picker for choosing a custom range instead of relying only on fixed day, week, month, or year views. - **Header navigation** The previous and next controls and the Today button move the timeline range backward, forward, or back 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. - **Resources** Multiple resources are shown vertically on the left side of the timeline as individual rows. - **Event labels** Events are rendered as colored labels inside the day cells, with the event title shown in bold. - **Date positioning** Events are positioned according to both their assigned resource and their exact date range. - **Event interaction** Events are highlighted on hover and show drag and resize handles for repositioning or changing duration. - **Event selection** Clicking an event selects and highlights it. - **Event creation** Users can create a new event by double-clicking the timeline or by clicking and dragging across it. - **Scrolling** The timeline supports horizontal and vertical scrolling for navigating through time and resources. ## 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 one timeline 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/angular/eventcalendar/api#opt-theme) - option - [`themeVariant`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-themeVariant) - option - [`refDate`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-refDate) - option - [`selectedDate`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-selectedDate) - option - [`view`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) - option - [`resources`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-resources) - option - [`onPageLoaded`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onPageLoaded) - event - [`data`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-data) - option - [`headerTemplate`](https://mobiscroll.com/docs/angular/eventcalendar/api#template-headerTemplate) - template - [`select`](https://mobiscroll.com/docs/angular/datepicker/api#opt-select) - option - [`display`](https://mobiscroll.com/docs/angular/datepicker/api#opt-display) - option - [`showOverlay`](https://mobiscroll.com/docs/angular/datepicker/api#opt-showOverlay) - option - [`touchUi`](https://mobiscroll.com/docs/angular/datepicker/api#opt-touchUi) - option - [`buttons`](https://mobiscroll.com/docs/angular/datepicker/api#opt-buttons) - option - [`onClose`](https://mobiscroll.com/docs/angular/datepicker/api#event-onClose) - event ## Code ### Component ```ts import { CommonModule } from '@angular/common'; import { HttpClient } from '@angular/common/http'; import { Component, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { formatDate, MbscCalendarEvent, MbscDateType, MbscEventcalendarOptions, MbscEventcalendarView, MbscModule, setOptions, } from '@mobiscroll/angular'; setOptions({ theme: 'ios', themeVariant: 'light' }); @Component({ selector: 'app-root', templateUrl: './app.component.html', standalone: true, imports: [CommonModule, FormsModule, MbscModule], }) export class AppComponent implements OnInit { constructor(private http: HttpClient) {} startDate!: Date; endDate!: Date; refDate!: Date; selectedDate: MbscDateType = new Date(); rangeValue: any = []; rangeText = ''; myEvents: MbscCalendarEvent[] = []; view = 'calendar'; calView: MbscEventcalendarView = { timeline: { type: 'day', size: 14, eventDisplay: 'fill', }, }; calendarOptions: MbscEventcalendarOptions = { resources: [ { id: 1, name: 'Resource A', color: '#e20000', }, { id: 2, name: 'Resource B', color: '#76e083', }, { id: 3, name: 'Resource C', color: '#4981d6', }, { id: 4, name: 'Resource D', color: '#e25dd2', }, { id: 5, name: 'Resource E', color: '#1dab2f', }, { id: 6, name: 'Resource F', color: '#d6d145', }, ], onPageLoaded: (args) => { const end = args.lastDay; this.startDate = args.firstDay; this.endDate = new Date(end.getFullYear(), end.getMonth(), end.getDate() - 1, 0); setTimeout(() => { // Set button text this.rangeText = this.getFormattedRange(this.startDate, this.endDate); // Set range value this.rangeValue = [this.startDate, this.endDate]; // Navigate the calendar this.selectedDate = this.startDate; }); }, }; onClose(): void { const date = this.rangeValue; if (date[0] && date[1]) { // Navigate the calendar this.selectedDate = date[0]; this.startDate = date[0]; this.endDate = date[1]; // Set calendar view this.refDate = date[0]; this.calView = { timeline: { type: 'day', size: this.getNrDays(date[0], date[1]), eventDisplay: 'fill', }, }; } else { this.rangeValue = [this.startDate, this.endDate]; } } // Returns the formatted date getFormattedRange(start: any, end: any): string { return ( formatDate('MMM D, YYYY', new Date(start)) + (end && this.getNrDays(start, end) > 1 ? ' - ' + formatDate('MMM D, YYYY', new Date(end)) : '') ); } // Returns the number of days between two dates getNrDays(start: any, end: any): number { return Math.round(Math.abs((end.setHours(0) - start.setHours(0)) / (24 * 60 * 60 * 1000))) + 1; } ngOnInit(): void { this.http .jsonp('https://trial.mobiscroll.com/timeline-events/?vers=5', 'callback') .subscribe((resp: MbscCalendarEvent[]) => { this.myEvents = resp; }); } } ``` ### Template ```html
{{rangeText}}
``` ### CSS ```css .md-custom-range-view-controls { display: flex; flex: 1 0 auto; justify-content: flex-end; align-items: center; } ``` ## Implementation notes - Start with `timeline: { type: 'day', size: 14, eventDisplay: 'fill' }` as the default view - a 14-day rolling window with events filling their cells. Store the view config in state so it can be replaced when the user picks a new range. - Use `renderHeader` (Angular: `headerTemplate`, Vue: `#header` slot) to replace the default navigation with two elements: a `Button` that shows the current date range label and opens the range picker, and a group of `CalendarPrev`, `CalendarToday`, `CalendarNext` controls aligned to the right. - Render a `Datepicker` in `select: 'range'`, `display: 'anchored'`, `showOverlay: false`, `touchUi: true`, `buttons: []` mode as the range picker. In React, pass it directly as `inputComponent={Button}` with `inputProps` containing the label text as children. In Vue/Angular, keep the picker hidden (hidden input or no visible input) and call `.open()` on the instance from the button's click handler, passing the button element as the anchor. - In the Datepicker `onChange` handler, store the selected `[start, end]` pair in a ref/variable (not yet applied to the calendar - wait for close). - In the Datepicker `onClose` handler, compute `size = getNrDays(start, end)` and update the timeline view to `{ timeline: { type: 'day', size, eventDisplay: 'fill' } }`. Also set `refDate` to the start date and update `selectedDate` to navigate the calendar to the start. - In the `onPageLoaded` event, read `args.firstDay` as the range start. The `args.lastDay` is exclusive (one day past the last visible day), so compute the actual end as `new Date(lastDay.getFullYear(), lastDay.getMonth(), lastDay.getDate() - 1)`. Use both to update the button label text and the range picker's value - this keeps the picker in sync when the user navigates with the prev/next buttons. - Implement a `getNrDays(start, end)` helper: `Math.round(Math.abs((end.setHours(0) - start.setHours(0)) / 86400000)) + 1`. Use `formatDate('MMM D, YYYY', date)` from Mobiscroll to build the label string; show a single date when the range spans one day, or "Start - End" for multiple days. - Define 6 generic resources with `id`, `name`, and `color`. Load events from a remote endpoint using `getJson` 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-angular.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 angular ``` 5. Install dependencies - open a terminal window in the root directory and run: ``` npm install ``` 6. Run the project: ``` ng serve ``` On a trial, add `--trial` to the config command: `mobiscroll config angular --trial`. Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/angular/getting-started/installation ## Related demos - Previous: [Event Buffer Time](https://demo.mobiscroll.com/angular/timeline/event-buffer.md) - Visualize buffer time on a Angular Timeline — show travel time, check-in/out, loading/unloading time, or preparation windows around scheduled events. - Next: [Custom Event Ordering](https://demo.mobiscroll.com/angular/timeline/custom-event-sort.md) - Set event order in Angular Timeline rows via per-event order value or a custom ordering function — useful for priority-based and dense weekly schedules.