Awesome

Angular Year Calendar

@iomechs/angular-year-calendar

<a href="https://www.npmjs.com/package/@iomechs/angular-year-calendar"><img src="https://img.shields.io/npm/v/@iomechs/angular-year-calendar.svg" alt="npm version" ></a> <a href="https://www.npmjs.com/package/@iomechs/angular-year-calendar"><img src="https://img.shields.io/github/stars/IOMechs/angular-year-calendar.svg?style=social&label=Star&style=flat-square" alt="github stars" ></a>

<a href="https://www.npmjs.com/package/@iomechs/angular-year-calendar"><img src="https://img.shields.io/npm/dt/@iomechs/angular-year-calendar.svg?style=flat-square" alt="npm downloads total" ></a> <a href="https://www.npmjs.com/package/ngx-device-detector"><img src="https://img.shields.io/npm/dm/@iomechs/angular-year-calendar.svg" alt="npm downloads/month" ></a>

A simple, easily to use Year calendar for your Angular apps.

Demo

https://iomechs.github.io/angular-year-calendar/demo

Docs

https://iomechs.github.io/angular-year-calendar

Dependencies

The Angular Year Calendar library depends on date-fns and @angular/cdk. If you don't have them installed in your project, you'll have to install them urself.

Usage

Install the package in your project's folder by using npm or yarn:

npm install @iomechs/angular-year-calendar --save

# OR

yarn add @iomechs/angular-year-calendar -S

Import YearCalendarModule in your AppModule as below:

import { YearCalendarModule } from '@iomechs/angular-year-calendar';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    YearCalendarModule, // <-- here
  ]
});

Then in your HTML, you can use as:

<yc-year-calendar
  [loadingData]="isLoadingData"
  (viewYearChanged)="viewYearChangedHandler($event"
  (eventDayClicked)="eventDayClickHandler($event)"
  [ycConfig]="myCalendarConfig"
  [selectedDate]="currentDate">
</yc-year-calendar>

License

MIT © IOMechs