@multisystemsuite/timezone-engine-angular

Angular services, pipes, and standalone components for enterprise timezone handling.

What it is used for

• Angular 17+ standalone apps and NgModule-based ERP/HRMS dashboards
• Injectable timezone engine via DI
• Template pipes for dates and relative time
• Live world clock widgets
• Global workforce scheduling views

Install

npm install @multisystemsuite/timezone-engine-angular

Peer dependencies: @angular/core >= 17, @angular/common >= 17

Usage

import { Component } from "@angular/core";
import {
  TimezoneService,
  TeFormatDatePipe,
  TeRelativeTimePipe,
  WorldClockComponent,
  BusinessHoursComponent,
  ShiftPlannerComponent,
  GlobalMeetingPlannerComponent,
  TIMEZONE_BUSINESS_HOURS_IMPORTS,
  TIMEZONE_SHIFT_ENGINE_IMPORTS,
  TIMEZONE_SCHEDULER_IMPORTS,
} from "@multisystemsuite/timezone-engine-angular";

@Component({
  standalone: true,
  imports: [TeFormatDatePipe, WorldClockComponent],
  template: `
    <te-world-clock [timezones]="['UTC', 'Europe/London', 'Asia/Kolkata']" />
    <p>{{ now | teFormatDate: "FULL" : "UTC" }}</p>
    <p>{{ createdAt | teRelativeTime }}</p>
  `,
})
export class DashboardComponent {
  now = new Date();
  createdAt = new Date(Date.now() - 3600_000);

  constructor(private tz: TimezoneService) {
    console.log(this.tz.detectTimezone());
  }
}

Exports

| Export | Purpose | | --------------------------------- | ------------------------------------ | | TimezoneService | Format, convert, detect, world clock | | WorldClockService | RxJS live clock observable | | TeFormatDatePipe | Locale-aware date pipe | | TeRelativeTimePipe | "2 hours ago" pipe | | TeTimezonePipe | Convert date to target timezone | | WorldClockComponent | Standalone world clock | | LiveClockComponent | Standalone live time | | SchedulerComponent | Meeting participant scheduler | | BusinessHoursComponent | Open/closed status widget | | ShiftPlannerComponent | Active shifts display | | GlobalMeetingPlannerComponent | Cross-region meeting planner | | DateFormatPipe | Alias for TeFormatDatePipe | | RealtimeClockComponent | Alias for LiveClockComponent | | TIMEZONE_ENGINE_IMPORTS | Bundle all standalone imports | | TIMEZONE_BUSINESS_HOURS_IMPORTS | Business hours module bundle | | TIMEZONE_SHIFT_ENGINE_IMPORTS | Shift engine module bundle | | TIMEZONE_SCHEDULER_IMPORTS | Scheduler + meeting planner bundle |

Config injection

import { TIMEZONE_ENGINE_CONFIG } from "@multisystemsuite/timezone-engine-angular";

providers: [
  {
    provide: TIMEZONE_ENGINE_CONFIG,
    useValue: { defaultTimezone: "Asia/Kolkata", defaultLocale: "en-IN" },
  },
];

Related packages

• @multisystemsuite/timezone-engine-core — shared logic
• @multisystemsuite/timezone-engine-scheduler — backend scheduling

Keywords

timezone, angular, pipes, components, services, typescript, enterprise

License

MIT