A Powerful and Effective Angular Year Calendar Library

Angular year calendar is a simple and easy-to-use annual calendar for your Angular applications. The angular year calendar library is based on date-fns and @angular/CDK.

Must Read: TOAST UI Calendar in JavaScript Library | tui.calendar

Angular Year Calendar Library Details

Post Name	Angular Year Calendar Library
Author Name	IOMechs
Category	Angular, Date & Time, TypeScript
Official Page	Click Here
Official Website	github.com
Publish Date	January 13, 2022
Last Update	July 4, 2023
Download	Link Below
License	MIT

How to make use of it:

1. Install the package via package managers.

# Yarn
$ yarn add @iomechs/angular-year-calendar

# NPM
$ npm install @iomechs/angular-year-calendar --save

2. Import the calendar year module.

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

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    ...
    YearCalendarModule,
    ...
  ]
});

3. Enter the calendar year in your HTML.

<yc-year-calendar
  PROPS HERE
</yc-year-calendar>

4. The default configurations for customizing the calendar year.

export interface YCDataItem {
  count: number;
  color?: string;
  date: Date;
}
export interface YCHeaderButton {
  text?: string;
  class?: string;
  hide?: boolean;
}
export interface YCConfig {
  // the theme colors are basically color ranges according to hsl color constants. The `H` value to be exact.
  themeColors?: {
    primary: number,
    secondary: number
  };  // the theme color
  data: Array<YCDataItem>;
  nextBtn?: YCHeaderButton;
  prevBtn?: YCHeaderButton;
  todayBtn?: YCHeaderButton;
  hideHeader?: boolean;
  showWeekNumbers?: boolean;
  headerTemplate?: TemplateRef<any>;
  firstWeekMonth?: {
    week: number;
    month: number;
  };
  forceWeek?: boolean;
  forceWeekDate?: {
    month: number,
    date: number
  };
  weekStartsOn?: number;
  weekNumbersColor?: string;
  dayClass?: string;
  maxValue?: number;
}
export interface YCDayItem {
  date: Date;
  weeks: Array<Array<{  // setting the day of the week in the structure
    day?: number,
    isToday: boolean,
    value: number,
    date: Date
  }>>;
  weekNumbers: Array<number>;
}