What is Angular Timeline Views With an Example in Scheduler?

Why the timeline so useful:

The timeline is great when you have a project or tasks that span over multiple days. It allows you to get a visual representation of your projects, so you can see who is working on what, and when it is expected to be completed. It is also helpful to control the workload of your team. You can see everything your team is working on and decide whether your team can handle one more project.

Available timeline views:

The following timeline views are available with Angular Scheduler:

• Timeline Day
  
• Timeline Week
  
• Timeline Work Week
  
• Timeline Month
  
• Timeline Year
  

How to enable the timeline views in scheduler

Follow the steps below to use the timeline views (Timeline Day, Timeline Week, Timeline WorkWeek, Timeline Month, and Timeline Year) on the scheduler.

Step 1:  Import and inject the Timeline Views service from the 'ej2-angular-schedule' package as shown in the following highlighted code snippet in 'app.module.ts'.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ScheduleModule , TimelineViewService, TimelineMonthService, TimelineYearService } from '@syncfusion/ej2-angular-schedule';
import { AppComponent } from './app.component';
 
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ScheduleModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [TimelineViewService, TimelineMonthService, TimelineYearService]
})
export class AppModule { }

Step 2:  Give the views option in the schedule as the following highlighted code snippet in the app.component.ts .

 Import and inject the Timeline Views service from the 'ej2-angular-schedule' .

import { Component } from '@angular/core';
import { EventSettingsModel, View, TimelineViewsService, TimelineYearService , TimelineMonthService, AgendaService, ResizeService, DragAndDropService } from '@syncfusion/ej2-angular-schedule';
 
@Component({
  selector: 'control-content',
  template: ‘<ejs-schedule height='650px'  [currentView]="currentView”>
     <e-views>
          <e-view option=”TimelineDay”></e-view>
          <e-view option=”TimelineWeek”></e-view>
          <e-view option=”TimelineWorkWeek”></e-view>
          <e-view option=”TimelineMonth”></e-view>
          <e-view option=”TimelineYear”></e-view>
    </e-views>
</ejs-schedule> ',
  providers: [TimelineViewsService, TimelineMonthService, TimelineYearService, ResizeService, DragAndDropService]
})
export class TimelineComponent {
  public currentView: View = 'TimelineWeek';
}

The Schedule will be displayed the output as shown below.

Demo sample and documentation:

Here, we showcased the scheduler sample with timeline views in  LIVE demo site.

For more details, refer to this UG documentation of the timeline views for scheduler.

Conclusion

I hope you enjoyed learning about what is Angular timeline views with an example.

You can refer to our Angular Schedule’s feature tour page to know about its other groundbreaking feature representations. You can also explore our Angular Schedule documentation to understand how to present and manipulate data.

For current customers, you can check out our Angular components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our WinForms Popup Menu and other Angular components.

If you have any queries or require clarifications, please let us know in the comment section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!