@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
Maintainers
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
- 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.