TypeScript icon, indicating that this package has built-in type declarations

0.1.6 • Public • Published



This project uses Moment.js for calendar functionality. You can import the SnCalendarModule and use SnCalendarComponent straight away. Please feel free to report any bugs and I'll be happy to introduce any feature requests. For Demo: Stable | Latest

Update 16, February 2020 - Updated with Angular 9

All the packages are updated to the latest version. Now sn-calendar is built with Angular 8..!

Update 4th September, 2020 - Updated with Angular 10

Update 1st October, 2021 - Updated with Angular 12

Update May, 2022 - Updated to Angular 13

Added date range support, you can now configure the component to select the date range.

Update Sep, 2023 - Updated to Angular 16

Updated to Angular v16

Update 8 Nov, 2023 - Updated to Angular 17

Updated to Angular v17

Using into your Angular Application

  • run npm i sn-calendar into your project root directory.
  • import SnCalendarModule into your application.
  • use <sn-calendar> element.
  • supports locale, date(Moment Object) as input.
  • use selectedDateOut event to get the selected date.
  • supports restrictPast to disable past dates, if not provided calendar will show previous dates as well.


Importing SnCalendarModule into app.module.ts

import { SnCalendarModule } from "sn-calendar";

  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, SnCalendarModule],
  providers: [],
  bootstrap: [AppComponent],
export class AppModule {}

Using sn-calendar component with options in HTML

<sn-calendar [selectedDate]="date" [locale]="locale" [startDayofWeek]="'sunday'" [enableDateRange]="true" [restrictPast]="restrictPast" (dateSelected)="getUpdatedDate($event)" (dateRangeSelected)="showDateRange($event)"></sn-calendar>
Attribute Supported Type
selectedDate Moment
locale string
startDayofWeek string
enableDateRange boolean
restrictPast boolean
dateSelected EventEmitter with Moment
dateRangeSelected EventEmitter with {start:Moment,end:Moment}


get in touch with me email: | twitter: @SwapnilNakate7

Package Sidebar


npm i sn-calendar

Weekly Downloads






Unpacked Size

112 kB

Total Files


Last publish


  • swapnilnakate7