angular-calendar-timeline - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

lib/helpers/date-helpers.d.ts

 import { DateInput } from "../models";
 export declare class DateHelpers {
     static generateDateId(date: Date): string;
-    static getLastDayOfMonth(date: DateInput): Date;
+    static lastDayOfMonth(date: DateInput): Date;
     static getDaysInMonth(date: Date): number;
-    static getFirstMondayOfMonth(date: Date): Date;
-    static getFirstDayOfWeek(date: DateInput): Date;
-    static getLastDayOfWeek(date: DateInput): Date;
-    static setDayBeginningTime(day: Date): Date;
-    static setDayEndingTime(day: Date): Date;
+    static firstMondayOfMonth(date: Date): Date;
+    static firstDayOfWeek(date: DateInput): Date;
+    static lastDayOfWeek(date: DateInput): Date;
+    static dayBeginningTime(day: Date): Date;
+    static dayEndingTime(day: Date): Date;
 }
-export declare enum TimeInMilliseconds {
+export declare enum MillisecondsToTime {
     Minute = 60000,
@@ -14,0 +14,0 @@ Day = 86400000,

lib/scale-generator/month-scale-generator.d.ts

@@ -7,4 +7,4 @@ import { BaseScaleGenerator } from './base-scale-generator';
     formatter: import("../models").IScaleFormatter;
-    protected readonly countOfYearsAfterLastItem = 2;
-    protected readonly countOfYearsBeforeFirstItem = 2;
+    protected readonly countOfYearsAfterLastItem = 1;
+    protected readonly countOfYearsBeforeFirstItem = 1;
     generateScale(startDate: Date, endDate: Date): IScale;
@@ -11,0 +11,0 @@ protected _generateGroup(date: DateInput): IScaleGroup;

lib/timeline-item/timeline-item.component.d.ts

@@ -11,5 +11,7 @@ import { ChangeDetectorRef, EventEmitter, TemplateRef } from '@angular/core';
     set item(item: ITimelineItem | undefined);
-    height: any;
+    height: number;
+    locale: string;
     contentTemplate: TemplateRef<{
         $implicit: ITimelineItem;
+        locale: string;
     }> | undefined;
@@ -30,3 +32,3 @@ itemResized: EventEmitter<{
     static ɵfac: i0.ɵɵFactoryDeclaration<TimelineItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TimelineItemComponent, "app-timeline-item", never, { "item": "item"; "height": "height"; "contentTemplate": "contentTemplate"; }, { "itemResized": "itemResized"; "itemMoved": "itemMoved"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TimelineItemComponent, "app-timeline-item", never, { "item": "item"; "height": "height"; "locale": "locale"; "contentTemplate": "contentTemplate"; }, { "itemResized": "itemResized"; "itemMoved": "itemMoved"; }, never, never>;
 }

lib/timeline.component.d.ts

@@ -93,2 +93,3 @@ import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, TemplateRef } from '@angular/core';
         $implicit: ITimelineItem;
+        locale: string;
     }> | undefined;
@@ -95,0 +96,0 @@ /**

package.json

 {
   "name": "angular-calendar-timeline",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A timeline for angular 13 that shows tasks or events on a timeline in different modes: days, weeks, and months.",
@@ -5,0 +5,0 @@ "author": "Andrii Krashivskyi",

public-api.d.ts

@@ -5,4 +5,5 @@ export * from './lib/timeline.module';
 export * from './lib/strategy-manager';
+export { DefaultZooms } from "./lib/zooms-builder/zooms";
 export { DayScaleGenerator } from "./lib/scale-generator/day-scale-generator";
 export { WeekScaleGenerator } from "./lib/scale-generator/week-scale-generator";
 export { MonthScaleGenerator } from "./lib/scale-generator/month-scale-generator";

README.md

@@ -43,3 +43,3 @@ <div align="center">
 
-Then import the timeline module into your module where you want to use timeline.
+Then import the timeline module into the module where you want to use the timeline.
 
@@ -74,6 +74,9 @@ Don't forget to call <b>forChild()</b> method:
 
-<h3 align="center">Custom dates format</h3>
+<h2 align="center">Customization</h2>
 
-Change localization is very simple:
+<h3 align="center">1. Localization</h3>
 
+Change localization is very simple, just pass locale code to the 'locale' component input.
+Make sure that the current locale is registered by Angular:
+
 ```typescript
@@ -89,2 +92,4 @@ import localeUk from "@angular/common/locales/uk";
 
+<h3 align="center">2. Dates format</h3>
+
 In case you need to change the format of the dates in the header, you can provide custom formatters:
@@ -115,10 +120,13 @@
 
-<h3 align="center">Zooms</h3>
+<h3 align="center">3. Zooms</h3>
 
-You can change current zoom by calling <b>changeZoom()</b> method in TimelineComponent. Also, you can set your own zooms
-array:
+You can simply set your own zooms if you want to add more.
+For changing the current zoom use TimelineComponent API. Here is an example:
 
 ```typescript
 import { AfterViewInit, ViewChild } from "@angular/core";
-import { TimelineComponent, ITimelineZoom } from "angular-timeline-calendar";
+import { TimelineComponent,
+  ITimelineZoom,
+  DefaultZooms,
+  TimelineDivisionType } from "angular-timeline-calendar";
 
@@ -129,11 +137,20 @@ @Component({
 export class MyTimelineComponent implements AfterViewInit {
-  zooms: ITimelineZoom[] = [] // set custom array of zooms;
   @ViewChild('timeline') timeline: TimelineComponent;
-
+  
+  zooms: ITimelineZoom[] = [
+    {columnWidth: 50, division: TimelineDivisionType.Month},
+    {columnWidth: 55, division: TimelineDivisionType.Month},
+    {columnWidth: 50, division: TimelineDivisionType.Days},
+    DefaultZooms[0] // You can import and use default array;
+  ];
+  
   ngAfterViewInit(): void {
-    // Change current zoom to any from zooms array.
-    this.timeline.changeZoom(this.timeline.zooms[0]);
+    // Change current zoom to any of passed to 'zooms' @Input.
+    this.timeline.changeZoom(this.timeline.zooms[1]);
 
     // Change current zoom by one step next.
     this.timeline.zoomIn();
+
+    // Change current zoom by one step back.
+    this.timeline.zoomOut();
   }
@@ -146,4 +163,23 @@ }
 
-<h3 align="center">Custom view modes</h3>
+<h3 align="center">4. Templates</h3>
 
+You easily can customize timeline items view, date marker, and left panel by passing custom TemplateRef:
+
+```html
+<timeline-calendar 
+  [itemContentTemplate]="customItemTemplate"
+  [dateMarkerTemplate]="customDateMarkerTemplate"
+></timeline-calendar>
+
+<ng-template #customItemTemplate let-item let-locale="locale">
+  {{item.name}} {{item.startDate}} {{item.endDate}} {{locale}}
+</ng-template>
+
+<ng-template #customDateMarkerTemplate let-leftPosition="leftPosition">
+  dateMarkerTemplate
+</ng-template>
+```
+
+<h3 align="center">5. View modes</h3>
+
 The library allows you to add custom view modes, for example, years, hours, minutes, etc. All you have to do is extends <b>StrategyManager</b>
@@ -179,3 +215,3 @@ class.
 
-    return super.getGenerator(zoom);
+    return super.getGenerator(division);
   };
@@ -182,0 +218,0 @@

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

651911

0.25%

Lines of code

4729

0.23%

Number of lines in readme file

238

17.82%

No dependency changes