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.

best angular calendar, custom calendar angular, angular calendar demo example, angular calendar npm, angular calendar plugin, year calendar in javascript

TOAST UI Calendar in JavaScript Library | tui.calendar

How to make use of 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 calendar year module.

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

  declarations: [
  imports: [

3. Enter the calendar year in your HTML.


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

Customizable Year Calendar Module, Angular Year Calendar Plugin/Github, jquery year calendar, javascript weekly calendar

See Demo And Download

Official Website(IOMechs): Click Here

This superior jQuery/javascript plugin is developed by IOMechs. For extra Advanced usage, please go to the official website.