AngularDateComponents

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 two powerful components (Scheduler, Resource Scheduler) tailored for the Jalali calendar, Gregorian calendar, etc.., our roadmap includes plans to introduce additional components as well. with Angular Date 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.

Links

• Docs: Coming soon...
• Demo: https://demo.angulardatecomponents.ir/
• Files: https://github.com/SirAlfred0/ADC_Files
• Bug Report & Feature Request: [email protected], Telegram, linkedIn, Instagram
• Demo Repos: https://github.com/SirAlfred0/adc-demo

installation

To install Package, simply run:

npm i @asadi/angular-date-components

basic setup

you need to provide some dependencies to make Angular Date Components work based on your region and calendar type.

first dependencies are ADC_DATE_ADAPTER and ADC_DATE_FORMATTER in your app.module.ts or standalone component

import { ADC_DATE_ADAPTER, ADC_DATE_FORMATTER } from '@asadi/angular-date-components/core';


  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 a sample in file repository and customize those based on your needs.

the second dependency that you need to provide is ADC_OPTIONS in this class you have some options to customize Angular Date Components for your self like chaning the direction and etc...

in your app.module.ts or your standalone component

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


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

SchedulerOptions is a class that implements ADCIOptions you can see a sample in file repository

there is still one more optional dependency that you may need to provide and that is labels, this dependency helps you configure some labels, months of year and days of week based on your language.

in your app.module.ts or standalone component

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

function adcLabels(): ADCILabels
{
  const fa_labels: ADCILabels = {
    day: 'روز',
    month: 'ماه',
    today: 'امروز',
    week: 'هفته',
    year: 'سال',
    daysOfWeek: [
      'یکشنبه',
      'دوشنبه',
      'سه شنبه',
      'چهارشنبه',
      'پنج شنبه',
      'جمعه',
      'شنبه'
    ],
    monthsOfYear: {
      // 'فروردین': '',
      // 'اردیبهشت': '',
      // 'خرداد': '',
      // 'تیر': '',
      // 'مرداد': '',
      // 'شهریور': '',
      // 'مهر': '',
      // 'آبان': '',
      // 'آذر': '',
      // 'دی': '',
      // 'بهمن': '',
      // 'اسفند': '',
      'January': 'ژانویه',
      'February': 'فوریه',
      'March': 'مارس',
      'April': 'اوریل',
      'May': 'مه',
      'June': 'ژوئن',
      'July': 'ژوئیه',
      'August': 'اوت',
      'September': 'سپتامبر',
      'October': 'اکتبر',
      'November': 'نوامبر',
      'December': 'دسامبر',
    },
  };

  return fa_labels;
}


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

and for last thing you need to import styles into you application you can easly do that by importing styles into angular.json file

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

Scheduler

@asadi/angular-date-components/scheduler is a component for manage and creating events in a date range, currently there are 3 available views Month, Week and Day.

in order to using this component you need to import its component into your module or standalone component

import { ADCSchedulerComponent,  ADCISchedulerEvent, ADCSchedulerSource} from "@asadi/angular-date-components/scheduler";

  imports: [
    ...
    ADCSchedulerComponent,
    ...
  ],

then use it like below example

export class SchedulerComponent {

  form: FormGroup = new FormGroup({
    WeekEnd: new FormControl([5,6]),
    Holidays: new FormArray<FormControl>([
      new FormControl('2023-10-07'),
      new FormControl('2023-10-08')
    ]),
    Views: new FormControl(['day', 'week', 'month']),
  });

  @ViewChild(ADCSchedulerSource) adcEventsSource: ADCSchedulerSource = {} as ADCSchedulerSource;

  constructor(
    private dialog: MatDialog,
    private eventService: EventsService
  )
  {

  }

  ngOnInit(): void {
    this.HolidaysForm.valueChanges.subscribe(data => {
      this.holidays = [];
      data.forEach((item: any) => {
        const holiday = moment(item).format('YYYY-MM-DD');

        this.holidays.push(holiday);
      })
    })
  }

  holidays: string[] = [];

  onDateChange(date: any): void
  {
    console.log('Date Change called', date);

    this.loadEvents();
  }

  onNext(): void
  {
    console.log('Next called');
  }

  onPrevius(): void
  {
    console.log('Previous called');
  }

  onViewChange(view: string): void
  {
    console.log('View Changed', view);
  }

  onEventClick(e: ADCISchedulerEventSelectEvent): void
  {
    console.log('event clicked: ', e.event);

    const dialogRef = this.dialog.open(EventEditComponent, {
      data: {
        event: e.event
      }
    })

    dialogRef.afterClosed().subscribe((isChanged: boolean) => {
      if(isChanged && isChanged == true)
      {
        this.loadEvents();
      }
    })
  }

  onDateSelect(event: any): void
  {
    console.log('date selected:', event);
    const dialogRef = this.dialog.open(EventCreateComponent, {
      data: {
        event: event
      }
    });

    dialogRef.afterClosed().subscribe((isChanged: boolean) => {
      if(isChanged && isChanged == true)
      {
        this.loadEvents();
      }
    })
  }

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

  get HolidaysForm(): FormArray<FormControl>
  {
    return this.form.controls['Holidays'] as FormArray<FormControl>;
  }

  get weekEnds(): number[]
  {
    return this.form.controls['WeekEnd'].value
  }
  
  get Views(): string[]
  {
    return this.form.controls['Views'].value;
  }

  addNewHoliday(): void
  {
    this.HolidaysForm.push(new FormControl(moment().format('YYYY-MM-DD')));
  }
}

<adc-scheduler 
[Weekends]="weekEnds" [Holidays]="holidays"  
(EventSelect)="onEventClick($event)"
(DateRangeSelect)="onDateSelect($event)"
(DateRangeChange)="onDateChange($event)" 
(Next)="onNext()" 
(Previous)="onPrevius()" 
(ViewChange)="onViewChange($event)"
[DefaultViews]="Views"
>
</adc-scheduler>

this worth mentioning that you also created your own custom view and add it to the package (how awesome is that :D) necessary tutorials will be created and added to the docs website. you can always explore the demo repository for finding features yourself.

Resource Scheduler

@asadi/angular-date-components/resource-scheduler is a component for manage and creating events in a date range for a specific resource (like room, user), currently there are 3 available views Month, Week and Day.

in order to using this component you need to import its component into your module or standalone component

import { ADCResourceSchedulerComponent, ADCIResourceSchedulerEvent, ADCIResourceSchedulerResource, ADCResourceSchedulerSource } from "@asadi/angular-date-components/resource-scheduler";

  imports: [
    ...
    ADCResourceSchedulerComponent,
    ...
  ],

then use it like below example

export class ResourceSchedulerComponent {

  form: FormGroup = new FormGroup({
    WeekEnd: new FormControl([5,6]),
    Holidays: new FormArray<FormControl>([
      new FormControl('2023-10-07'),
      new FormControl('2023-10-08')
    ]),
    Views: new FormControl(['day', 'week', 'month']),
  });

  @ViewChild(ADCResourceSchedulerSource) resourceSchedulerDataSource = {} as ADCResourceSchedulerSource;

  constructor(
    private dialog: MatDialog,
    private eventsService: EventsService
  )
  {}

  holidays: string[] = [];

  ngOnInit(): void
  {
    this.HolidaysForm.valueChanges.subscribe(data => {
      this.holidays = [];
      data.forEach((item: any) => {
        const holiday = moment(item).format('YYYY-MM-DD');

        this.holidays.push(holiday);
      })
    })

    this.loadResources();
    this.loadEvents();
  }

  ngAfterContentInit(): void {
  }

  loadResources(): void
  {
    this.eventsService.listResource().subscribe(resources => {
      this.resourceSchedulerDataSource.resources = resources;
    });
  }

  loadEvents(): void
  {
    this.eventsService.listResourceEvents().subscribe(events => {
      this.resourceSchedulerDataSource.events = events;
    });
  }

  onDateChange(date: any): void
  {
    console.log('Date Change called', date);

    //this.loadEvents();
  }

  onNext(): void
  {
    console.log('Next called');
  }

  onPrevius(): void
  {
    console.log('Previous called');
  }

  onViewChange(view: string): void
  {
    console.log('View Changed', view);
  }

  onEventClick(e: ADCIResourceSchedulerEventSelectEvent): void
  {
    console.log('event clicked: ', e.event);

    const dialogRef = this.dialog.open(ResourceEventUpdateComponent, {
      data: {
        event: e.event,
        roomList: this.resourceSchedulerDataSource.resources
      }
    })

    dialogRef.afterClosed().subscribe((isChanged: boolean) => {
      if(isChanged && isChanged == true)
      {
        this.loadEvents();
      }
    })
  }

  onDateSelect(event: any): void
  {
    console.log('date selected:', event);
    const dialogRef = this.dialog.open(ResourceEventCreateComponent, {
      data: {
        event: event,
        roomList: this.resourceSchedulerDataSource.resources
      }
    });

    dialogRef.afterClosed().subscribe((isChanged: boolean) => {
      if(isChanged && isChanged == true)
      {
        this.loadEvents();
      }
    })
  }

  get HolidaysForm(): FormArray<FormControl>
  {
    return this.form.controls['Holidays'] as FormArray<FormControl>;
  }

  get weekEnds(): number[]
  {
    return this.form.controls['WeekEnd'].value
  }

  get Views(): string[]
  {
    return this.form.controls['Views'].value;
  }

  addNewHoliday(): void
  {
    this.HolidaysForm.push(new FormControl(moment().format('YYYY-MM-DD')));
  }
}

<adc-resource-scheduler
[Weekends]="weekEnds" [Holidays]="holidays"  
(DateRangeChange)="onDateChange($event)" 
(Next)="onNext()" 
(Previous)="onPrevius()" 
(ViewChange)="onViewChange($event)"
(DateRangeSelect)="onDateSelect($event)"
(EventSelect)="onEventClick($event)"
[DefaultViews]="Views"
></adc-resource-scheduler>

this worth mentioning that you also created your own custom view and add it to the package (how awesome is that :D) necessary tutorials will be created and added to the docs website. you can always explore the demo repository for finding features yourself.

##support

you can always reach out to me for bug report, feature request using social media link provided at the top.