angular-calendar-timeline

Angular 13.0+ timeline calendar

Demo

https://codesandbox.io/s/tender-cerf-zk0ewt

About

A timeline for angular 13+ that shows tasks or events on a timeline in different modes: days, weeks, and months.

This library is pretty small and DOESN'T use big dependencies like JQuery or Moment.js. Library also supports SSR.

Getting started

Install through npm:

npm install --save angular-timeline-calendar

Then import the timeline module into your module where you want to use timeline.

Don't forget to call forChild() method:

import { NgModule } from '@angular/core';
import { TimelineModule } from 'angular-timeline-calendar';

@NgModule({
  imports: [
    TimelineModule.forChild(),
  ],
})
export class MyModule {
}

That's it, you can then use it in your component as:

import { ITimelineItem } from "angular-timeline-calendar";

@Component({
  template: `<timeline-calendar [items]="items"> </timeline-calendar>`
})
export class MyTimelineComponent implements AfterViewInit {
  items: ITimelineItem[] = [];
}

Custom dates format

Change localization is very simple:

import localeUk from "@angular/common/locales/uk";

registerLocaleData(localeUk);

@Component({
  template: `<timeline-calendar locale="uk"></timeline-calendar>`
})

In case you need to change the format of the dates in the header, you can provide custom formatters:

import { NgModule } from '@angular/core';
import { TimelineModule, IScaleFormatter } from 'angular-timeline-calendar';

const myCustomFormatter: IScaleFormatter = {
  formatColumn(column: IScaleColumn, columnWidth: number, locale: string): string {
    return column.date.toString();
  }
}

@NgModule({
  imports: [
    TimelineModule.forChild({
      dayScaleFormatter: myCustomFormatter, // For days mode
      weekScaleFormatter: myCustomFormatter, // For weeks mode
      monthScaleFormatter: myCustomFormatter, // For months mode
    }),
  ],
})
export class MyModule {
}

Zooms

You can change current zoom by calling changeZoom() method in TimelineComponent. Also, you can set your own zooms array:

import { AfterViewInit, ViewChild } from "@angular/core";
import { TimelineComponent, ITimelineZoom } from "angular-timeline-calendar";

@Component({
  template: `<timeline-calendar #timeline [zooms]="zooms"></timeline-calendar>`
})
export class MyTimelineComponent implements AfterViewInit {
  zooms: ITimelineZoom[] = [] // set custom array of zooms;
  @ViewChild('timeline') timeline: TimelineComponent;

  ngAfterViewInit(): void {
    // Change current zoom to any from zooms array.
    this.timeline.changeZoom(this.timeline.zooms[0]);

    // Change current zoom by one step next.
    this.timeline.zoomIn();
  }
}

This is not all API of component. Maybe later I will add some documentation. Currently, you can see comments inside TimelineComponent.

Custom view modes

The library allows you to add custom view modes, for example, years, hours, minutes, etc. All you have to do is extends two classes: ScaleGeneratorsManager and DivisionsAdaptorsManager.

ScaleGeneratorsManager returns a scale generator depending on the current zoom. The function of this generator is to build the header with columns and dates inside each column. Each view mode has its own generator, so it is the reason why we need some "manager".

DivisionsAdaptorsManager contains adaptors for different view modes. Those Adaptors use a common interface, and they are necessary for calculating operations with dates.

Here is an example of how it should look, when you want to add some additional view modes:

import { NgModule } from '@angular/core';
import {
  TimelineModule,
  TimelineDivisionType,
  IScaleFormatter,
  IScaleGenerator,
  ScaleGeneratorsManager,
  IScaleGeneratorsManager,
  DivisionsAdaptorsManager,
  IDivisionsAdaptorsManager
} from 'angular-timeline-calendar';

enum CustomZoomDivisionsType {
  Day = TimelineDivisionType.Day,
  Week = TimelineDivisionType.Week,
  Month = TimelineDivisionType.Month,
  Custom = 'Custom'
}

class CustomScaleGeneratorsManager extends ScaleGeneratorsManager
  implements IScaleGeneratorsManager<CustomZoomDivisionsType> {
  getGenerator(division: CustomZoomDivisionsType): IScaleGenerator {
    if (division === CustomZoomDivisionsType.Custom) {
      return {...};  // your custom logic here
    }

    return super.getGenerator(zoom);
  };
}

class CustomDivisionsAdaptorsManager extends DivisionsAdaptorsManager
  implements IDivisionsAdaptorsManager<CustomZoomDivisionsType> {
  getAdaptor(division: CustomZoomDivisionsType): IDivisionAdaptor {
    if (division === CustomZoomDivisionsType.Custom) {
      return {...} // custom adaptor;
    }

    return super.getAdaptor(division);
  }
}

@NgModule({
  imports: [
    TimelineModule.forChild({
      scaleGeneratorsManager: CustomScaleGeneratorsManager,
      divisionsAdaptorsManager: CustomDivisionsAdaptorsManager,
    }),
  ],
})
export class MyModule {
}

Have an issue? Leave it here: https://github.com/oOps1627/angular-calendar-timeline