SnCalendar

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.

Usage

Importing SnCalendarModule into app.module.ts

import { SnCalendarModule } from "sn-calendar";

@NgModule({
  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} |

Help

get in touch with me email: [email protected] | twitter: @SwapnilNakate7