UniversalComponents

[]

related-links

files: https://github.com/SirAlfred0/ADC_Files demo: http://m-asadi-testing.iapp.ir/ docs: soon...

Description

Angular Date Components is a comprehensive angular library of date-related components designed to meet the needs of applications that require localization based on various calendar systems. While the package currently includes a powerful scheduler component tailored for the Jalali calendar, Gregorian calendar, etc.., our roadmap includes plans to introduce additional components as well. With Universal Components, developers can seamlessly integrate and display calendar-related functionalities in their applications, ensuring they align with the cultural and regional requirements of users following different calendar systems.

Installation

To install Package, simply run:

npm i angular-date-components/scheduler

usage

in app.module.ts or your standalone component:

import { ADCSchedulerModule } from '@angular-date-components/scheduler';

 imports: [
    ...
    ADCSchedulerModule,
  ],

then you need to provide some dependecty to make scheduler work based on your region and calendar type.

in app.module.ts or your standalone component:

import { ADC_DATE_ADAPTER, ADC_DATE_FORMATTER } from '@angular-date-components/scheduler';
  providers: [
    {
      provide: ADC_DATE_ADAPTER,
	    useClass: new DateAdapterPersian()
    },
    {
      provide: ADC_DATE_FORMATTER,
	    useClass new DateFormatterPersian()
    },
  ]

DateAdapterPersian() and DateFormatterPersian() are two classes that implement ADCIDateAdapter and ADCIDateFormatter you can find the sample in file repository (related-links > files) and customize those based on your needs.

you still need to provide one more dependency to make ADCScheduler work and that is options. I've provided an option class for you to make some changes in the direction or initial view of the component here is an implemention of that class

import { ADCIOptions } from "@angular-date-components/scheduler";


export class SchedulerOptionsPersian implements ADCIOptions
{
// always set this to true this me be deprecated in the future version
    private _considerTime: boolean = true;
    private _direction: 'rtl' | 'ltr' = 'rtl';
    private _initialView: "month" | "week" | "day" = "month";


    get considerTime(): boolean {
        return this._considerTime;
    }
    
    set considerTime(value: boolean)
    {
        this._considerTime = value;
    }

    get direction(): "ltr" | "rtl" {
        return this._direction
    }
}

to provide this class, in app.module.ts or your stanalone component add

  import { ADC_OPTIONS } from '@angular-date-components/scheduler';


  providers: [
    {
      provide: ADC_OPTIONS,
      useValue: new SchedulerOptionsPersian()
    }
  ]

and finally just use the scheduler in your template like this

<adc-scheduler 
	(EventClick)="onEventClick($event)"
	(DateSelect)="onDateSelect($event)"
	[Weekends]="[5,6]" [Holidays]="['2023-12-09', '2023-12-10']"  
	(DateChange)="onDateChange($event)" 
	(Next)="onNext()" 
	(Previous)="onPrevius()" 
	(ViewChange)="onViewChange($event)"
>
</adc-scheduler>

import { ADCEventsSource } from '@angular-date-components/scheduler';


export class SchedulerComponent {

// use this to set calendar events in the calendar
  @ViewChild(ADCEventsSource) adcEventsSource: ADCEventsSource = {} as ADCEventsSource;

  constructor(
    private eventService: EventsService
  )
  {

  }

  onDateChange(date: any): void
  {
     //you can provide some action if user changes date range for example load your calendar events for server

    this.loadEvents();
  }

  onNext(): void
  {
     //you can provide some action if user clicks on next button
  }

  onPrevius(): void
  {
     //you can provide some action if user clicks on previous button
  }

  onViewChange(view: string): void
  {
     // you can provide some actions if user changes the view
  }

  onEventClick(event: any): void
  {
     //implement event click
  }

  onDateSelect(event: any): void
  {
     //implement date selection
  }

  private loadEvents(): void
  {
    this.eventService.list().subscribe({
      next: (res: ADCIEvent[]) =>
      {
        this.adcEventsSource.events = res;
      },
    })
  }
}

also you need to import styles from @angular-date-componets/scheduler/assets/style.css

you can do it by importing styles into angular.json file

  "styles": [
    ...
    "node_modules/@angular-date-components/scheduler/assets/styles.css",
    "src/styles.css"
  ],

if you want to localize scheduler component based on your language use this as an example

in app.module.ts or your standalone component

import { ADCILabels, ADC_LABELS } from '@angular-date-components/scheduler';

function adcLabels(): ADCILabels
{
  const fa_labels: ADCILabels = {
    day: 'روز',
    month: 'ماه',
    today: 'امروز',
    week: 'هفته',
    year: 'سال'
  };

  return fa_labels;
}


  providers: [
     ...
    {
      provide: ADC_LABELS,
      useFactory: adcLabels,
    },
  ]