https://github.com/lbgm/ng-pro-calendar
Professional Calendar for Angular
https://github.com/lbgm/ng-pro-calendar
angular angular-lib angular-library angular16 calendar professional typescript
Last synced: about 1 year ago
JSON representation
Professional Calendar for Angular
- Host: GitHub
- URL: https://github.com/lbgm/ng-pro-calendar
- Owner: lbgm
- License: gpl-3.0
- Created: 2023-06-11T19:32:46.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-06-05T13:41:32.000Z (almost 2 years ago)
- Last Synced: 2025-04-15T06:47:46.455Z (about 1 year ago)
- Topics: angular, angular-lib, angular-library, angular16, calendar, professional, typescript
- Language: TypeScript
- Homepage:
- Size: 679 KB
- Stars: 18
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Pro Calendar
Professional Calendar for Angular
> Angular 16+
- [Pro Calendar](#pro-calendar)
- [Install](#install)
- [Screenshot with Native Datepicker](#screenshot-with-native-datepicker)
- [Screenshot with Material Datepicker](#screenshot-with-material-datepicker)
- [Props \& Types](#props--types)
- [Type `Configs`](#type-configs)
- [Use](#use)
- [Events](#events)
- [Slots](#slots)
- [Custom HTML Events fired](#custom-html-events-fired)
## Install
```sh
npm i ng-pro-calendar
```
## Screenshot with Native Datepicker
## Screenshot with Material Datepicker
## Props & Types
> Import and inspect types `T_View`, `T_Action`, `Appointment`, `Configs`, `T_LANG` from ng-pro-calendar
| Prop | Type | Required | Default |
| :--- | :--- | :--- | :--- |
| `date` | `string` `// iso string` | No | `undefined` |
| `view` | `T_View` | No | `"week"` |
| `events` | `Appointment[]` | No | `[]` |
| `loading`| `boolean` | No | `false` |
| `config` | `Configs` | No | `DEFAULT_CONFIGS` |
| `lang` | `T_LANG` | No | only supported languages; default: `undefined` (the calendar will use browser locale). |
> You can import `DEFAULT_CONFIGS` from ng-pro-calendar
### Type `Configs`
> When you set `nativeDatepicker` to `false` or `undefined`, Material DatePicker will be used.
> When you set a property with type `T_Action` to `undefined`, the action is disabled.
## Use
`app.module.ts`
```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ProCalendarModule } from 'ng-pro-calendar';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ProCalendarModule,
BrowserAnimationsModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
`app.component.ts`
```ts
import { Component, OnInit } from '@angular/core';
import { Appointment, Configs, E_CustomEvents } from 'ng-pro-calendar';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
title = 'ng-pro-calendar';
evts: Appointment[] = [
{
date: "2022-11-24T16:00:50.253Z",
comment: "Faire une livraison à moto de Mont Sinaï à Calavi",
id: "cl3eddmjz1435801pqwfa5ihd1",
keywords: "Anniversaire",
name: "Rodolphe SOUNLIN",
},
{
date: "2022-11-19T14:00:00.000Z",
comment: "",
id: "cl32rbkjk1700101o53e3e3uhn",
keywords: "Projet BAMBA",
name: "MONTCHO Kévin",
},
{
date: "2022-11-17T13:00:36.284Z",
comment: "",
id: "cl34856g01439801piot8vp3jr",
keywords: "Rencontre",
name: "Cornelia ADADJO",
},
{
date: "2022-11-10T07:00:00.000Z",
comment: "",
id: "cl2yk477s136301pbmh49btdg",
keywords: "Anniversaire",
name: "Sylla Rahamata",
},
{
date: "2022-11-10T07:00:00.000Z",
comment: "",
id: "cl30h76qi116501nu2dc1wnv1",
keywords: "Réunion",
name: "Espéra AWO",
}
];
cfg: Configs = {
viewEvent: undefined,
reportEvent: {
icon: true,
text: "",
},
searchPlaceholder: "",
eventName: "",
closeText: "",
nativeDatepicker: false,
todayButton: true,
firstDayOfWeek: 1
};
ngOnInit(): void {
[E_CustomEvents.VIEW, E_CustomEvents.REPORT].forEach((e: string) => {
document.body.addEventListener(e, (event: Event | CustomEvent) => {
console.log({ event });
});
});
}
}
```
`app.component.html`
```html
```
## Events
`(calendarClosed)`:
> This event is fired when user clicks close button.
`(fetchEvents)`:
> This event is fired when date selected changes. `$event: { start: string; end: string }`. `start` and `end` are iso string date.
## Slots
Draw your own calendar using scoped slots
```html
```
## Custom HTML Events fired
`calendar.request.view` & `calendar.request.report`
> When the user clicks on view or report action, a custom html event is fired with the id of event in detail.
> You can listen these events like described on [Use](#use).
> On default `#sideEvent template`, when user clicks on event, `calendar.request.view` is fired.