npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@asadi/angular-date-components

v0.1.3

Published

`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

Downloads

197

Readme

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

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.