{"id":19443134,"url":"https://github.com/lbgm/ng-pro-calendar","last_synced_at":"2025-04-25T00:32:16.084Z","repository":{"id":184563797,"uuid":"652322824","full_name":"lbgm/ng-pro-calendar","owner":"lbgm","description":"Professional Calendar for Angular","archived":false,"fork":false,"pushed_at":"2024-06-05T13:41:32.000Z","size":695,"stargazers_count":18,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-15T06:47:46.455Z","etag":null,"topics":["angular","angular-lib","angular-library","angular16","calendar","professional","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lbgm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-11T19:32:46.000Z","updated_at":"2024-06-05T13:41:36.000Z","dependencies_parsed_at":"2024-06-05T15:23:02.442Z","dependency_job_id":null,"html_url":"https://github.com/lbgm/ng-pro-calendar","commit_stats":null,"previous_names":["lbgm/ng-pro-calendar"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbgm%2Fng-pro-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbgm%2Fng-pro-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbgm%2Fng-pro-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbgm%2Fng-pro-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lbgm","download_url":"https://codeload.github.com/lbgm/ng-pro-calendar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250733387,"owners_count":21478357,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-lib","angular-library","angular16","calendar","professional","typescript"],"created_at":"2024-11-10T15:42:17.916Z","updated_at":"2025-04-25T00:32:15.764Z","avatar_url":"https://github.com/lbgm.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pro Calendar\n\nProfessional Calendar for Angular\n\u003e Angular 16+\n- [Pro Calendar](#pro-calendar)\n  - [Install](#install)\n  - [Screenshot with Native Datepicker](#screenshot-with-native-datepicker)\n  - [Screenshot with Material Datepicker](#screenshot-with-material-datepicker)\n  - [Props \\\u0026 Types](#props--types)\n    - [Type `Configs`](#type-configs)\n  - [Use](#use)\n  - [Events](#events)\n  - [Slots](#slots)\n  - [Custom HTML Events fired](#custom-html-events-fired)\n\n## Install\n\n```sh\nnpm i ng-pro-calendar\n```\n\n## Screenshot with Native Datepicker\n\n![ng-pro-calendar screenshot with native datepicker](https://user-images.githubusercontent.com/92580505/283180919-d601c5be-1f9d-4df4-a900-79b3efd932e7.png)\n\n## Screenshot with Material Datepicker\n\n![ng-pro-calendar screenshot with material datepicker](https://user-images.githubusercontent.com/92580505/283180238-8363d4b5-2f23-45c9-bcfb-f77a45e954b6.png)\n\n## Props \u0026 Types\n\n\u003e Import and inspect types `T_View`, `T_Action`, `Appointment`, `Configs`, `T_LANG` from ng-pro-calendar\n\n| Prop | Type | Required | Default |\n| :---     | :---     | :---         | :---        |\n| `date`   | `string` `// iso string` | No           | `undefined` |\n| `view`   | `T_View` | No           | `\"week\"`    |\n| `events` | `Appointment[]` | No    | `[]`        |\n| `loading`| `boolean` | No          | `false`     |\n| `config` | `Configs` | No          | `DEFAULT_CONFIGS` |\n| `lang`   | `T_LANG`  | No          | only supported languages; default: `undefined` (the calendar will use browser locale). |\n\n\u003e You can import `DEFAULT_CONFIGS` from ng-pro-calendar\n\n### Type `Configs`\n\n\u003e When you set `nativeDatepicker` to `false` or `undefined`, Material DatePicker will be used.\n\n\u003e When you set a property with type `T_Action` to `undefined`, the action is disabled.\n\n## Use\n\n`app.module.ts`\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { AppComponent } from './app.component';\n\nimport { ProCalendarModule } from 'ng-pro-calendar';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    ProCalendarModule,\n    BrowserAnimationsModule,\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n`app.component.ts`\n\n```ts\nimport { Component, OnInit } from '@angular/core';\nimport { Appointment, Configs, E_CustomEvents } from 'ng-pro-calendar';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss']\n})\nexport class AppComponent implements OnInit {\n  title = 'ng-pro-calendar';\n\n  evts: Appointment[] = [\n    {\n      date: \"2022-11-24T16:00:50.253Z\",\n      comment: \"Faire une livraison à moto de Mont Sinaï à Calavi\",\n      id: \"cl3eddmjz1435801pqwfa5ihd1\",\n      keywords: \"Anniversaire\",\n      name: \"Rodolphe SOUNLIN\",\n    },\n    {\n      date: \"2022-11-19T14:00:00.000Z\",\n      comment: \"\",\n      id: \"cl32rbkjk1700101o53e3e3uhn\",\n      keywords: \"Projet BAMBA\",\n      name: \"MONTCHO Kévin\",\n    },\n    {\n      date: \"2022-11-17T13:00:36.284Z\",\n      comment: \"\",\n      id: \"cl34856g01439801piot8vp3jr\",\n      keywords: \"Rencontre\",\n      name: \"Cornelia ADADJO\",\n    },\n    {\n      date: \"2022-11-10T07:00:00.000Z\",\n      comment: \"\",\n      id: \"cl2yk477s136301pbmh49btdg\",\n      keywords: \"Anniversaire\",\n      name: \"Sylla Rahamata\",\n    },\n    {\n      date: \"2022-11-10T07:00:00.000Z\",\n      comment: \"\",\n      id: \"cl30h76qi116501nu2dc1wnv1\",\n      keywords: \"Réunion\",\n      name: \"Espéra AWO\",\n    }\n  ];\n\n  cfg: Configs = {\n    viewEvent: undefined,\n    reportEvent: {\n      icon: true,\n      text: \"\",\n    },\n    searchPlaceholder: \"\",\n    eventName: \"\",\n    closeText: \"\",\n    nativeDatepicker: false,\n    todayButton: true,\n    firstDayOfWeek: 1\n  };\n\n  ngOnInit(): void {\n    [E_CustomEvents.VIEW, E_CustomEvents.REPORT].forEach((e: string) =\u003e {\n      document.body.addEventListener(e, (event: Event | CustomEvent) =\u003e {\n        console.log({ event });\n      });\n    });\n  }\n}\n```\n\n`app.component.html`\n\n```html\n\u003cpro-calendar \n    date=\"2022-11-10T00:00:00.000Z\"\n    [events]=\"evts\"\n    [config]=\"cfg\"\n/\u003e\n```\n\n## Events\n\n`(calendarClosed)`:\n\u003e This event is fired when user clicks close button.\n\n`(fetchEvents)`:\n\u003e This event is fired when date selected changes. `$event: { start: string; end: string }`. `start` and `end` are iso string date.\n\n## Slots\n\nDraw your own calendar using scoped slots\n\n```html\n\u003cpro-calendar \n    date=\"2022-11-10T00:00:00.000Z\"\n    [events]=\"evts\"\n    [config]=\"cfg\"\n\u003e\n    \u003c!-- \u003cng-template let-calendarGotLoading=\"calendarGotLoading\" #loader\u003e --\u003e\n       \u003c!-- content --\u003e\n    \u003c!-- \u003c/ng-template\u003e --\u003e\n\n    \u003c!-- \u003cng-template #searchIcon\u003e --\u003e\n        \u003c!-- \u0026#454; --\u003e\n    \u003c!-- \u003c/ng-template\u003e --\u003e\n\n    \u003c!-- \u003cng-template #leftSwitchArrow\u003e --\u003e\n        \u003c!-- \u0026#454; --\u003e\n    \u003c!-- \u003c/ng-template\u003e --\u003e\n    \n    \u003c!-- \u003cng-template #rightSwitchArrow\u003e --\u003e\n        \u003c!-- \u0026#454; --\u003e\n    \u003c!-- \u003c/ng-template\u003e --\u003e\n\n    \u003c!-- \u003cng-template #closeButton\u003e --\u003e\n        \u003c!-- \u0026#454; --\u003e\n    \u003c!-- \u003c/ng-template\u003e --\u003e\n\n    \u003c!-- \u003cng-template let-date=\"date\" let-time=\"time\" let-cardEvent=\"cardEvent\" #eventCard\u003e --\u003e\n        \u003c!-- use this template to show calendar event in appearance you want --\u003e\n        \u003c!--\n        date: Date;\n        time: string;\n        cardEvent: Appointment[]; // events according to date/time\n        --\u003e\n    \u003c!-- \u003c/ng-template\u003e --\u003e\n\n    \u003c!-- \u003cng-template let-dateSelected=\"dateSelected\" let-calendarEvents=\"calendarEvents\" #sideEvent\u003e --\u003e\n        \u003c!-- use this template to show side event in appearance you want --\u003e\n        \u003c!-- dateSelected: Date; --\u003e\n        \u003c!-- calendarEvents: Appointment[]; // all events --\u003e\n    \u003c!-- \u003c/ng-template\u003e --\u003e\n\u003c/pro-calendar\u003e\n```\n\n## Custom HTML Events fired\n\n`calendar.request.view` \u0026 `calendar.request.report`\n\n\u003e When the user clicks on view or report action, a custom html event is fired with the id of event in detail.\n\u003e You can listen these events like described on [Use](#use).\n\n\u003e On default `#sideEvent template`, when user clicks on event, `calendar.request.view` is fired.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flbgm%2Fng-pro-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flbgm%2Fng-pro-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flbgm%2Fng-pro-calendar/lists"}