All Examples
Angular Examples
Use these snippets as starting points for real Angular components. All examples use the core CSS classes and data-theme for theming.
Tip: Install both packages:
Terminal window Then import the theme CSS in your
angular.jsonstyles array or component stylesheet.
1. Single Date Calendar
A complete calendar with weekday headers, today highlighting, selected state, and disabled/outside styling.
import { Component, OnInit } from '@angular/core';import { CalendarService } from '@thaparoyal/calendar-angular';
@Component({ selector: 'app-single-calendar', providers: [CalendarService], template: ` <div class="trc-calendar" data-theme="ocean"> <div class="trc-calendar-header"> <button class="trc-calendar-nav-button" (click)="cal.prevMonth()" [disabled]="cal.isPrevMonthDisabled$ | async" > ‹ </button> <button class="trc-calendar-title">{{ cal.title$ | async }}</button> <button class="trc-calendar-nav-button" (click)="cal.nextMonth()" [disabled]="cal.isNextMonthDisabled$ | async" > › </button> </div> <table class="trc-calendar-grid"> <thead class="trc-calendar-grid-head"> <tr> <th *ngFor="let name of cal.weekdayNames$ | async" class="trc-calendar-weekday"> {{ name }} </th> </tr> </thead> <tbody> <tr *ngFor="let week of cal.weeks$ | async" class="trc-calendar-week"> <td *ngFor="let day of week" class="trc-calendar-cell" [class.trc-calendar-cell-selected]="day.isSelected" [class.trc-calendar-cell-today]="day.isToday" [class.trc-calendar-cell-outside]="day.isOutsideMonth" [class.trc-calendar-cell-disabled]="day.isDisabled" > <button class="trc-calendar-day" [disabled]="day.isDisabled" (click)="cal.selectDate(day.date)" > {{ cal.formatDayNumber(day.date.day) }} </button> </td> </tr> </tbody> </table> </div> `,})export class SingleCalendarComponent implements OnInit { constructor(public cal: CalendarService) {}
ngOnInit() { this.cal.initialize({ config: { calendarType: 'BS', locale: 'en' } }); }}2. Range Selection
Use SelectionService with mode: 'range' for start–end date selection with hover preview.
import { Component, OnInit } from '@angular/core';import { SelectionService } from '@thaparoyal/calendar-angular';
@Component({ selector: 'app-range-calendar', providers: [SelectionService], template: ` <div class="trc-calendar" data-theme="rose"> <div class="trc-calendar-header"> <button class="trc-calendar-nav-button" (click)="sel.prevMonth()">‹</button> <button class="trc-calendar-title">{{ sel.title$ | async }}</button> <button class="trc-calendar-nav-button" (click)="sel.nextMonth()">›</button> </div> <table class="trc-calendar-grid"> <thead> <tr> <th *ngFor="let name of sel.weekdayNames$ | async" class="trc-calendar-weekday"> {{ name }} </th> </tr> </thead> <tbody> <tr *ngFor="let week of sel.weeks$ | async" class="trc-calendar-week"> <td *ngFor="let day of week" class="trc-calendar-cell" [class.trc-calendar-cell-selected]="day.isSelected" [class.trc-calendar-cell-today]="day.isToday" [class.trc-calendar-cell-outside]="day.isOutsideMonth" [class.trc-calendar-cell-range-start]="day.isRangeStart" [class.trc-calendar-cell-range-end]="day.isRangeEnd" [class.trc-calendar-cell-range-middle]="day.isInRange" [class.trc-calendar-cell-range-hover]="day.isRangeHover" > <button class="trc-calendar-day" (click)="sel.select(day.date)" (mouseenter)="sel.hover(day.date)" (mouseleave)="sel.hover(null)" > {{ sel.formatDayNumber(day.date.day) }} </button> </td> </tr> </tbody> </table> <pre style="margin-top: 1rem; font-size: 0.8rem; color: #888;"> {{ sel.value$ | async | json }} </pre > </div> `,})export class RangeCalendarComponent implements OnInit { constructor(public sel: SelectionService) {}
ngOnInit() { this.sel.initialize({ mode: 'range', config: { calendarType: 'BS', locale: 'en' } }); }}3. Date Picker with Input
A text input + popup calendar combo using DatePickerService.
import { Component, OnInit } from '@angular/core';import { DatePickerService } from '@thaparoyal/calendar-angular';
@Component({ selector: 'app-date-picker', providers: [DatePickerService], template: ` <div class="trc-date-picker" data-theme="indigo"> <div class="trc-date-picker-input-wrapper"> <input class="trc-date-picker-input" [value]="picker.inputValue$ | async" (input)="picker.onInputChange($any($event.target).value)" (blur)="picker.onInputBlur()" placeholder="Select a date..." /> <button class="trc-date-picker-trigger" (click)="picker.toggle()">đŸ“…</button> </div> <div *ngIf="picker.isOpen$ | async" class="trc-date-picker-content"> <div class="trc-calendar"> <div class="trc-calendar-header"> <button class="trc-calendar-nav-button" (click)="picker.prevMonth()">‹</button> <button class="trc-calendar-title">{{ picker.title$ | async }}</button> <button class="trc-calendar-nav-button" (click)="picker.nextMonth()">›</button> </div> <table class="trc-calendar-grid"> <thead> <tr> <th *ngFor="let name of picker.weekdayNames$ | async" class="trc-calendar-weekday"> {{ name }} </th> </tr> </thead> <tbody> <tr *ngFor="let week of picker.weeks$ | async"> <td *ngFor="let day of week" class="trc-calendar-cell" [class.trc-calendar-cell-selected]="day.isSelected" [class.trc-calendar-cell-today]="day.isToday" [class.trc-calendar-cell-outside]="day.isOutsideMonth" > <button class="trc-calendar-day" (click)="picker.selectDate(day.date)" [disabled]="day.isDisabled" > {{ picker.formatDayNumber(day.date.day) }} </button> </td> </tr> </tbody> </table> </div> </div> </div> `,})export class DatePickerComponent implements OnInit { constructor(public picker: DatePickerService) {}
ngOnInit() { this.picker.initialize({ config: { calendarType: 'BS', locale: 'en' } }); }}4. Multi-Month Range Picker
Display two months side-by-side for range selection using MultiCalendarService.
import { Component, OnInit } from '@angular/core';import { MultiCalendarService } from '@thaparoyal/calendar-angular';
@Component({ selector: 'app-multi-calendar', providers: [MultiCalendarService], template: ` <div data-theme="amber"> <div class="trc-multi-calendar"> <div class="trc-multi-calendar-header"> <button class="trc-calendar-nav-button" (click)="calendar.prevMonth()">‹</button> <span class="trc-calendar-title">{{ calendar.title$ | async }}</span> <button class="trc-calendar-nav-button" (click)="calendar.nextMonth()">›</button> </div> <div class="trc-multi-calendar-calendars" style="display:flex;gap:1rem;flex-wrap:wrap;"> <div *ngFor="let month of calendar.months$ | async" class="trc-calendar trc-multi-calendar-month" > <h3 style="text-align:center;margin-bottom:0.5rem;">{{ month.title }}</h3> <table class="trc-calendar-grid"> <thead> <tr> <th *ngFor="let name of calendar.weekdayNames$ | async" class="trc-calendar-weekday" > {{ name }} </th> </tr> </thead> <tbody> <tr *ngFor="let week of month.weeks" class="trc-calendar-week"> <td *ngFor="let day of week" class="trc-calendar-cell" [class.trc-calendar-cell-selected]="day.isSelected" [class.trc-calendar-cell-today]="day.isToday" [class.trc-calendar-cell-range-start]="day.isRangeStart" [class.trc-calendar-cell-range-end]="day.isRangeEnd" [class.trc-calendar-cell-range-middle]="day.isInRange" [class.trc-calendar-cell-range-hover]="day.isRangeHover" > <button class="trc-calendar-day" (click)="calendar.select(day.date)" (mouseenter)="calendar.hover(day.date)" (mouseleave)="calendar.hover(null)" > {{ calendar.formatDayNumber(day.date.day) }} </button> </td> </tr> </tbody> </table> </div> </div> </div> <pre style="margin-top: 1rem; font-size: 0.8rem; color: #888;"> {{ calendar.value$ | async | json }} </pre > </div> `,})export class MultiCalendarComponent implements OnInit { constructor(public calendar: MultiCalendarService) {}
ngOnInit() { this.calendar.initialize({ numberOfMonths: 2, mode: 'range', config: { calendarType: 'BS', locale: 'en' }, }); }}5. Theme Switching
Dynamically change themes by updating the data-theme attribute.
import { Component, OnInit } from '@angular/core';import { CalendarService } from '@thaparoyal/calendar-angular';
@Component({ selector: 'app-themed-calendar', providers: [CalendarService], template: ` <div> <div style="display:flex;flex-wrap:wrap;gap:0.375rem;margin-bottom:1rem;"> <button *ngFor="let t of themes" [style.background]="currentTheme === t ? '#667eea' : '#16161e'" [style.color]="currentTheme === t ? '#fff' : '#888'" [style.border]="'1px solid ' + (currentTheme === t ? '#667eea' : '#27272a')" style="padding:0.35rem 0.75rem;border-radius:6px;cursor:pointer;font-size:0.75rem;" (click)="currentTheme = t" > {{ t }} </button> </div>
<div class="trc-calendar" [attr.data-theme]="currentTheme"> <div class="trc-calendar-header"> <button class="trc-calendar-nav-button" (click)="cal.prevMonth()">‹</button> <button class="trc-calendar-title">{{ cal.title$ | async }}</button> <button class="trc-calendar-nav-button" (click)="cal.nextMonth()">›</button> </div> <table class="trc-calendar-grid"> <thead> <tr> <th *ngFor="let name of cal.weekdayNames$ | async" class="trc-calendar-weekday"> {{ name }} </th> </tr> </thead> <tbody> <tr *ngFor="let week of cal.weeks$ | async" class="trc-calendar-week"> <td *ngFor="let day of week" class="trc-calendar-cell" [class.trc-calendar-cell-selected]="day.isSelected" [class.trc-calendar-cell-today]="day.isToday" [class.trc-calendar-cell-outside]="day.isOutsideMonth" > <button class="trc-calendar-day" (click)="cal.selectDate(day.date)"> {{ cal.formatDayNumber(day.date.day) }} </button> </td> </tr> </tbody> </table> </div> </div> `,})export class ThemedCalendarComponent implements OnInit { themes = [ 'default', 'dark', 'ocean', 'forest', 'sunset', 'royal', 'lavender', 'midnight', 'rose', 'mint', 'amber', 'slate', ]; currentTheme = 'ocean';
constructor(public cal: CalendarService) {}
ngOnInit() { this.cal.initialize({ config: { calendarType: 'BS', locale: 'en' } }); }}6. Calendar Type Toggle (AD / BS)
Switch between Bikram Sambat and Gregorian calendars by re-initializing the service.
import { Component, OnInit } from '@angular/core';import { CalendarService } from '@thaparoyal/calendar-angular';
@Component({ selector: 'app-toggle-calendar', providers: [CalendarService], template: ` <div> <div style="display:flex;gap:0.5rem;margin-bottom:1rem;"> <button [style.background]="calType === 'BS' ? '#a855f7' : '#16161e'" [style.color]="calType === 'BS' ? '#fff' : '#888'" style="padding:0.5rem 1.25rem;border-radius:6px;border:1px solid #27272a;cursor:pointer;" (click)="switchType('BS')" > BS (Bikram Sambat) </button> <button [style.background]="calType === 'AD' ? '#a855f7' : '#16161e'" [style.color]="calType === 'AD' ? '#fff' : '#888'" style="padding:0.5rem 1.25rem;border-radius:6px;border:1px solid #27272a;cursor:pointer;" (click)="switchType('AD')" > AD (Gregorian) </button> </div>
<div class="trc-calendar" data-theme="royal"> <div class="trc-calendar-header"> <button class="trc-calendar-nav-button" (click)="cal.prevMonth()">‹</button> <button class="trc-calendar-title">{{ cal.title$ | async }}</button> <button class="trc-calendar-nav-button" (click)="cal.nextMonth()">›</button> </div> <table class="trc-calendar-grid"> <tbody> <tr *ngFor="let week of cal.weeks$ | async" class="trc-calendar-week"> <td *ngFor="let day of week" class="trc-calendar-cell" [class.trc-calendar-cell-today]="day.isToday" > <button class="trc-calendar-day" (click)="cal.selectDate(day.date)"> {{ cal.formatDayNumber(day.date.day) }} </button> </td> </tr> </tbody> </table> </div> </div> `,})export class ToggleCalendarComponent implements OnInit { calType: 'BS' | 'AD' = 'BS';
constructor(public cal: CalendarService) {}
ngOnInit() { this.cal.initialize({ config: { calendarType: this.calType, locale: 'en' } }); }
switchType(type: 'BS' | 'AD') { this.calType = type; this.cal.initialize({ config: { calendarType: type, locale: 'en' } }); }}7. Nepali Numerals (Localization)
Use locale: 'ne' to display Nepali numerals and month names.
import { Component, OnInit } from '@angular/core';import { CalendarService } from '@thaparoyal/calendar-angular';
@Component({ selector: 'app-nepali-calendar', providers: [CalendarService], template: ` <div class="trc-calendar" data-theme="nepal"> <div class="trc-calendar-header"> <button class="trc-calendar-nav-button" (click)="cal.prevMonth()" [disabled]="cal.isPrevMonthDisabled$ | async" > ‹ </button> <button class="trc-calendar-title">{{ cal.title$ | async }}</button> <button class="trc-calendar-nav-button" (click)="cal.nextMonth()" [disabled]="cal.isNextMonthDisabled$ | async" > › </button> </div> <table class="trc-calendar-grid"> <thead> <tr> <th *ngFor="let name of cal.weekdayNames$ | async" class="trc-calendar-weekday"> {{ name }} </th> </tr> </thead> <tbody> <tr *ngFor="let week of cal.weeks$ | async" class="trc-calendar-week"> <td *ngFor="let day of week" class="trc-calendar-cell" [class.trc-calendar-cell-selected]="day.isSelected" [class.trc-calendar-cell-today]="day.isToday" [class.trc-calendar-cell-outside]="day.isOutsideMonth" > <button class="trc-calendar-day" [disabled]="day.isDisabled" (click)="cal.selectDate(day.date)" > {{ cal.formatDayNumber(day.date.day) }} </button> </td> </tr> </tbody> </table> </div> `,})export class NepaliCalendarComponent implements OnInit { constructor(public cal: CalendarService) {}
ngOnInit() { // BS calendar with Nepali numerals and month names this.cal.initialize({ config: { calendarType: 'BS', locale: 'ne' } }); }}