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

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

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

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.

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>

MIT © IOMechs