ngx-calendario
is an Angular library for displaying customizable calendars with event support.
To install the library, use npm:
npm install ngx-calendario
-
Import the
NgxCalendario
component into your Angular application.In your
AppModule
or standalone component:import { NgxCalendario } from 'ngx-calendario'; @Component({ imports: [NgxCalendario], templateUrl: '', styleUrl: '', }) export class ExampleComponent { year = 2025 month = 0 // January }
-
Add the
ngx-calendario
component to your template:<ngx-calendario [events]="events" [selectedYear]="year" [selectedMonth]="month"> </ngx-calendario>
-
Provide the
events
input as an array ofCalendarEvent
objects:import { Component, signal } from '@angular/core'; import { CalendarEvent } from 'ngx-calendario'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { events = signal<CalendarEvent[]>([ { date: new Date(2025, 4, 2), title: 'Build the calendar' } ]); }
- Display a calendar for a specific year and month.
- Show events on specific dates.
- Customizable templates for calendar buttons, days, and events.
To start a local development server, run:
ng serve
Once the server is running, open your browser and navigate to http://localhost:4200/
. The application will automatically reload whenever you modify any of the source files.
To build the library, run:
ng build ngx-calendario
This will compile the library, and the build artifacts will be placed in the dist/ngx-calendario
directory.
To execute unit tests with the Karma test runner, use the following command:
ng test
For more information on Angular libraries, visit the Angular Libraries Overview.
This project is licensed under the MIT License. Feel free to use it in your own projects!