Full Year Calendar
This is an ABANDONED project!
A full year calendar for Angular applications.
Live Demo
Install
npm i fullyearcalendar-lib
Simple usage
Module
import { FullyearcalendarLibModule } from 'node_modules/fullyearcalendar-lib/';html
<ng-fullyearcalendar-lib [value]="value"></ng-fullyearcalendar-lib>Component
import { IInputData } from 'fullyearcalendar-lib/lib/Interface/IInputData';
value:IInputData = {
year: new Date().getFullYear() //2019
};Date ranges
import { ICalendarDate } from 'fullyearcalendar-lib/lib/Interface/ICalendarDate';
value:IInputData = {
year: new Date().getFullYear(), //2019
dates: [
{
id: 1,
tooltip: 'Range 1',
start: new Date('2018-12-21T00:34:15Z'),
end: new Date('2019-01-10T00:34:15Z'),
color: 'grey',
select: (range: ICalendarDate) => this.onRangeSelect(range)
},
{
id: 2,
tooltip: 'big tooltip text for range 2',
start: new Date('2019-03-21T00:34:15Z'),
end: new Date('2019-05-21T00:34:15Z'),
color: 'orange',
select: (range: ICalendarDate) => this.onRangeSelect(range)
},
{
id: 3,
tooltip: 'Range 3',
start: new Date('2019-08-11T00:34:15Z'),
end: new Date('2019-08-21T00:34:15Z'),
color: '#2edb57',
select: (range: ICalendarDate) => this.onRangeSelect(range)
}
],
};
onRangeSelect(range:ICalendarDate):void {
}Custom Locale
import { LocaleSettings } from 'fullyearcalendar-lib/lib/Interface/LocaleSettings';
locale: LocaleSettings = {
dayNamesMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ]
};Disabled days
import { ICalendarDate } from 'fullyearcalendar-lib/lib/Interface/ICalendarDate';
value:IInputData = {
year: new Date().getFullYear(), //2019
disabledDays: [
{date:new Date('2019-07-21T00:34:15Z')},
{date:new Date('2019-04-05T00:34:15Z')},
{date:new Date('2019-07-25T00:34:15Z'),tooltip:'closed'}
]
};<ng-fullyearcalendar-lib [responsive]="responsive" [locale]="locale" [underline]="underline" [value]="value" (onDaySelect)="onDaySelect($event)"></ng-fullyearcalendar-lib>Properties
| Name | Type | Default | Description |
| responsive | boolean | true | if false the grid will be 4x4 |
| locale | LocaleSettings | default English locale | the locale for days and months |
| underline | boolean | false | underline or block for date range style |
Events
| Name | parameters | Description |
| onDaySelect | event:Date | callback when a day out of a range is selected. |
features
Year navigation
Date Selection
Date Ranges
Calendar dates overline styles
Custom Locale
