{"id":13983043,"url":"https://github.com/oOps1627/angular-calendar-timeline","last_synced_at":"2025-07-21T22:32:05.013Z","repository":{"id":64858172,"uuid":"568889287","full_name":"oOps1627/angular-calendar-timeline","owner":"oOps1627","description":null,"archived":false,"fork":false,"pushed_at":"2024-03-18T21:05:12.000Z","size":969,"stargazers_count":9,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-20T10:23:17.039Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oOps1627.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-21T16:17:24.000Z","updated_at":"2024-06-10T09:16:06.833Z","dependencies_parsed_at":"2023-01-30T00:31:09.821Z","dependency_job_id":"300dda37-08cf-48dd-9ef7-c56cccd71bac","html_url":"https://github.com/oOps1627/angular-calendar-timeline","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oOps1627%2Fangular-calendar-timeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oOps1627%2Fangular-calendar-timeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oOps1627%2Fangular-calendar-timeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oOps1627%2Fangular-calendar-timeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oOps1627","download_url":"https://codeload.github.com/oOps1627/angular-calendar-timeline/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226991558,"owners_count":17714597,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-09T05:01:36.527Z","updated_at":"2025-07-21T22:32:05.004Z","avatar_url":"https://github.com/oOps1627.png","language":"TypeScript","funding_links":["https://www.paypal.com/donate/?hosted_button_id=38ZN57VTQ9TQC","https://buymeacoffee.com/andriy1627"],"categories":["Third Party Components"],"sub_categories":["Calendars"],"readme":"\u003cdiv align=\"center\"\u003e\n\n![#1589F0](https://placehold.co/150x20/1589F0/1589F0.png) \u003cbr\u003e\n![#c5f015](https://placehold.co/150x20/c5f015/c5f015.png)\n\n\u003c/div\u003e\n\n\u003ch1 align=\"center\"\u003eAngular 13+ timeline calendar\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![Sponsorship](https://img.shields.io/badge/funding-github-%23EA4AAA)](https://github.com/oOps1627)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n\n\n\u003c/div\u003e\n\n\u003ch2 align=\"center\"\u003eDemo\u003c/h2\u003e\n\n\u003cdiv align=\"center\"\u003e\n\nhttps://codesandbox.io/s/tender-cerf-zk0ewt\n\n\u003c/div\u003e\n\n\u003ch2 align=\"center\"\u003eAbout\u003c/h2\u003e\n\nA timeline for angular 13+ that shows tasks or events on a timeline in different modes: days, weeks, and\nmonths.\n\nThis library is pretty small and DOESN'T use big dependencies like JQuery or Moment.js.\nLibrary also supports SSR.\n\n\u003ch2 align=\"center\"\u003eGetting started\u003c/h2\u003e\n\nInstall through npm:\n\n```bash\nnpm install --save angular-calendar-timeline\n```\n\nThen import the timeline module into the module where you want to use the timeline.\n\nDon't forget to call \u003cb\u003eforChild()\u003c/b\u003e method:\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { TimelineModule } from 'angular-timeline-calendar';\n\n@NgModule({\n  imports: [\n    TimelineModule.forChild(),\n  ],\n})\nexport class MyModule {\n}\n```\n\nThat's it, you can then use it in your component as:\n\n```typescript\nimport { ITimelineItem } from \"angular-timeline-calendar\";\n\n@Component({\n  template: `\u003ctimeline-calendar [items]=\"items\"\u003e \u003c/timeline-calendar\u003e`\n})\nexport class MyTimelineComponent implements AfterViewInit {\n  items: ITimelineItem[] = [];\n}\n```\n\n\u003ch2 align=\"center\"\u003eCustomization\u003c/h2\u003e\n\n\u003ch3 align=\"center\"\u003e1. Localization\u003c/h3\u003e\n\nChange localization is very simple, just pass locale code to the 'locale' component input.\nMake sure that the current locale is registered by Angular:\n\n```typescript\nimport localeUk from \"@angular/common/locales/uk\";\n\nregisterLocaleData(localeUk);\n\n@Component({\n  template: `\u003ctimeline-calendar locale=\"uk\"\u003e\u003c/timeline-calendar\u003e`\n})\n```\n\n\u003ch3 align=\"center\"\u003e2. Header\u003c/h3\u003e\n\nYou can customize the scale view by providing a config for each view mode.  \nIn case you need to change the format of the dates in the header or change start or end dates, you can provide a config for each view mode:\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { TimelineModule,\n  IScaleFormatter, \n  IScaleGeneratorConfig,\n  IItemsIterator } from 'angular-timeline-calendar';\n\nconst myCustomFormatter: IScaleFormatter = {\n  formatColumn(column: IScaleColumn, columnWidth: number, locale: string): string {\n    return column.date.toString();\n  }\n}\n\n@NgModule({\n  imports: [\n    TimelineModule.forChild({\n      // Customization dates range and their format in the header for day view mode.\n      dayScaleConfig: {\n        formatter: myCustomFormatter,\n        getStartDate: (itemsIterator: IItemsIterator) =\u003e itemsIterator.getFirstItem(true).startDate,\n        getEndDate: (itemsIterator: IItemsIterator) =\u003e new Date(),\n      } as Partial\u003cIScaleGeneratorConfig\u003e,\n      // Customization dates format in the header for week view mode.\n      weekScaleConfig: {\n          formatter: myCustomFormatter\n      } as Partial\u003cIScaleGeneratorConfig\u003e\n    }),\n  ],\n})\nexport class MyModule {\n}\n```\n\n\u003ch3 align=\"center\"\u003e3. Zooms\u003c/h3\u003e\n\nYou can simply set your own zooms if you want to add more.\nFor changing the current zoom use TimelineComponent API. Here is an example:\n\n```typescript\nimport { AfterViewInit, ViewChild } from \"@angular/core\";\nimport { TimelineComponent,\n  ITimelineZoom,\n  DefaultZooms,\n  TimelineViewMode } from \"angular-timeline-calendar\";\n\n@Component({\n  template: `\u003ctimeline-calendar #timeline [zooms]=\"zooms\"\u003e\u003c/timeline-calendar\u003e`\n})\nexport class MyTimelineComponent implements AfterViewInit {\n  @ViewChild('timeline') timeline: TimelineComponent;\n  \n  zooms: ITimelineZoom[] = [\n    {columnWidth: 50, viewMode: TimelineViewMode.Month},\n    {columnWidth: 55, viewMode: TimelineViewMode.Month},\n    {columnWidth: 50, viewMode: TimelineViewMode.Days},\n    DefaultZooms[0] // You can import and use default array;\n  ];\n  \n  ngAfterViewInit(): void {\n    // Change current zoom to any of passed to 'zooms' @Input.\n    this.timeline.changeZoom(this.timeline.zooms[1]);\n\n    // Change current zoom by one step next.\n    this.timeline.zoomIn();\n\n    // Change current zoom by one step back.\n    this.timeline.zoomOut();\n  }\n}\n```\n\nThis is not all API of component. Maybe later I will add some documentation. Currently, you can see comments inside\nTimelineComponent.\n\n\u003ch3 align=\"center\"\u003e4. Templates\u003c/h3\u003e\n\nYou easily can customize timeline items view, date marker, and left panel by passing custom TemplateRef:\n\n```html\n\u003ctimeline-calendar \n  [itemContentTemplate]=\"customItemTemplate\"\n  [dateMarkerTemplate]=\"customDateMarkerTemplate\"\n\u003e\u003c/timeline-calendar\u003e\n\n\u003cng-template #customItemTemplate let-item let-locale=\"locale\"\u003e\n  {{item.name}} {{item.startDate}} {{item.endDate}} {{locale}}\n\u003c/ng-template\u003e\n\n\u003cng-template #customDateMarkerTemplate let-leftPosition=\"leftPosition\"\u003e\n  dateMarkerTemplate\n\u003c/ng-template\u003e\n```\n\n\u003ch3 align=\"center\"\u003e5. View modes\u003c/h3\u003e\n\nThe library allows you to add custom view modes, for example, years, hours, minutes, etc. All you have to do is extends \u003cb\u003eStrategyManager\u003c/b\u003e\nclass.\nBased on the current view type it returns different strategies with a common interface which needs for calculating operations between dates and generating scale.\n\n\nHere is an example of how it should look, when you want to add some additional view modes:\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport {\n  TimelineModule,\n  TimelineViewMode,\n  IScaleFormatter,\n  IStrategyManager,\n  StrategyManager,\n} from 'angular-timeline-calendar';\n\nenum CustomViewMode {\n  CustomView = 1,\n  Day = TimelineViewMode.Day,\n  Week = TimelineViewMode.Week,\n  Month = TimelineViewMode.Month,\n}\n\nclass CustomStrategyManager extends StrategyManager implements IStrategyManager\u003cCustomViewMode\u003e {\n  getScaleGenerator(viewMode): IScaleGenerator {\n    if (viewMode === CustomViewMode.Custom) {\n      return {...};  // your custom logic here\n    }\n\n    return super.getScaleGenerator(viewMode);\n  };\n\n  getViewModeAdaptor(viewMode): IViewModeAdaptor {\n    if (viewMode === CustomViewMode.Custom) {\n      return {...} // custom adaptor;\n    }\n\n    return super.getViewModeAdaptor(viewMode);\n  }\n}\n\n@NgModule({\n  imports: [\n    TimelineModule.forChild({\n      strategyManager: StrategyManager,\n    }),\n  ],\n  providers: [{\n    provide: StrategyManager,\n    useClass: CustomStrategyManager,\n  }],\n})\nexport class MyModule {\n}\n```\n\n\n\u003ch2 align=\"center\"\u003eAngular versions\u003c/h2\u003e\n\n\u003cli\u003eFor Angular = 13 use \u003cb\u003e0.4\u003c/b\u003e\u003c/li\u003e\n\u003cli\u003eFor Angular \u003e= 14 use \u003cb\u003e0.5\u003c/b\u003e\u003c/li\u003e\n\u003cli\u003eFor Angular = 16 use \u003cb\u003e0.6\u003c/b\u003e\u003c/li\u003e\n\u003cli\u003eFor Angular = 17 use \u003cb\u003e0.7\u003c/b\u003e\u003c/li\u003e\n\u003cli\u003eFor Angular \u003e 18 use \u003cb\u003e0.8\u003c/b\u003e\u003c/li\u003e\n\n\u003cbr\u003e\n\nHave an issue? Leave it here: https://github.com/oOps1627/angular-calendar-timeline/issues\n\nYou can support me by donation:\n* https://www.paypal.com/donate/?hosted_button_id=38ZN57VTQ9TQC\n* https://buymeacoffee.com/andriy1627\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FoOps1627%2Fangular-calendar-timeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FoOps1627%2Fangular-calendar-timeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FoOps1627%2Fangular-calendar-timeline/lists"}