Customizable Year Calendar Module For Angular

Description:

A simple yet configurable Angular module that helps developers to create pretty clean calendars on the app.

How to use 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 Year Calendar Module.

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

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

3. Insert the year calendar into your HTML.

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

4. Default configs to customize the year calendar.

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.
  // See information here https://www.w3schools.com/colors/colors_hsl.asp
  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>;
}