culttm / angular-datepicker2

Angular datepicker, best calendar. Select Period, single, or multiple dates. Template your own day in calendar. Two way databinding and others

Angular Datepicker 2

v2.x.x

Add suggestions from v2.2.x Add events from v2.1.x

npm i angular-datepicker2

now @angular/core: ^8.2.14

DEMO

https://angular-datepicker.com/

Getting started

Set to imports app.module.ts import { AngularDatepicker2Module } from 'angular-datepicker2'. Then you can use it by tag <angular-datepicker2></angular-datepicker2>.

Options

Props of AngularDatepicker2:

// Array of selected dates.
[(selectedDates)]: Date[]

// Array custom definitions of days. Subscribable. See Day interface
[days]: Day[]

// Array custom definitions of suggestions. Suggestions for select dates
[suggest]: Suggest[]

// Date whould be render for default calendar .
shownDate: Date

// Alignment of days in a week. Default horizontal.
vertical: boolean

// Present mode of calendar. Quarter, semester or number of months. Default 1. Import from public-api or interfaces. Its enum
viewMode: ViewMode | number

// Start week day, default 0
weekStart: number

// Weekends, default [0,6], set Day.isWeekend true
weekends: number[] = [0, 6]

// Single, Multiple, Period. Import from public-api or interfaces. Its enum
selectMode: SelectMode


// Callback event when click on day
// its returns a Day object before change self state by click
(onDayClick) 

i18n

set registerLocaleData(locale, "locale") in your app.module.ts. See https://angular.io/api/common/registerLocaleData

Example

this.selectedDates = [
    new Date(2020, 3, 7),
    new Date(2020, 3, 9),

];

this.shownDate = new Date(2020, 3, 7);   

this.suggest = [
    {
      title: 'Last two weeks',
      selectMode: SelectMode.Period,
      selectedDates: [
        new Date(2020, 3, 1),
        new Date(2020, 3, 12),
      ]
    },
    {
      title: 'Last month',
      selectMode: SelectMode.Period,
      selectedDates: [
        new Date(2020, 3, 1),
        new Date(2020, 3, 30),
      ]
    },
    {
      title: '1, 4 and 30',
      selectMode: SelectMode.Multiple,
      selectedDates: [
        new Date(2020, 3, 1),
        new Date(2020, 3, 4),
        new Date(2020, 3, 30),
      ]
    }
  ]


this.days = [
    {
        isDisabled: false,
        isHovered: false,
        isSelected: false,
        isWeekEnd: true,
        date: new Date(2020, 3, 21),
    },
    {
        isDisabled: true,
        isHovered: false,
        isSelected: false,
        isWeekEnd: true,
        date: new Date(2020, 3, 26),
        template: {
          component:
          {
            componentClass: TestDayComponent,
            props: [
              {
                propName: 'title',
                type: 'input',
                value: new Date(2020, 3, 26).getDate()
              },
              {
                propName: 'callback2',
                type: 'output',
                value: (data) => {
                  alert('click custom day. See Day interface')
                }
              }
            ]
          }
        }
    }
];

<angular-datepicker2 [shownDate]="shownDate" [suggest]="suggest" [days]="days" [(selectedDates)]="selectedDates" [selectMode]="'period'" [weekends]="[0,1]" [weekStart]="1" [viewMode]="'quarter'"></angular-datepicker2>