Customizable Year Calendar Module For Angular

Author: IOMechs
Official Page: Go to website
Publish Date: December 3, 2019
License: MIT


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 install @iomechs/angular-year-calendar --save

2. Import the Year Calendar Module.

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

  declarations: [
  imports: [

3. Insert the year calendar into your HTML.


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
  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>;

You Might Be Interested In:


Add Comment