@asadi/angular-date-components/README.md

`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 (S

# 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.com/](https://demo.angulardatecomponents.com/)
- Files: [https://github.com/SirAlfred0/ADC_Files](https://github.com/SirAlfred0/ADC_Files)
- Bug Report & Feature Request: [dev.asadi.work@gmail.com](mailto:dev.asadi.work@gmail.com), [Telegram](https://telegram.me/siralfred0), [linkedIn](https://www.linkedin.com/in/sir-alfred?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app), [Instagram](https://www.instagram.com/sir___alfred)
- Demo Repos: [https://github.com/SirAlfred0/adc-demo](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](https://github.com/SirAlfred0/ADC_Files) 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](https://github.com/SirAlfred0/ADC_Files) 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,
    },
  ]
```

## 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](https://github.com/SirAlfred0/adc-demo) 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](https://github.com/SirAlfred0/adc-demo) 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.