Author: | IOMechs |
---|---|
Official Page: | Go to website |
Publish Date: | December 3, 2019 |
License: | MIT |
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>; }