ngx-calendar

Description

Calendar component for Angular.

Demo

• StackBlitz

Requirements

• Moment.js
• Angular

Install

• NPM

npm install ss-ngx-calendar

Setup

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

import { NgxCalendarModule } from "ss-ngx-calendar";

@NgModule({
  imports: [
        CommonModule,

        NgxCalendarModule
    ]
})
export class AppModule { }

Usage

calendarOptions = {};

calendarValue = null;

onChooseDate(date: any) {
    this.calendarValue = date;
}

<ngx-calendar [options]="calendarOptions" (onChooseDate)="onChooseDate($event)"></ngx-calendar>

Options

• Week view (No time.)
  Use to switch to week view mode.

calendarOptions = { isWeek: true };

• Week view (With time.)
  Use to add time to week view mode.

calendarOptions = { isWeek: true, isWithTime: true };

WARNING: Options described from now will be working just for the week view mode with time.

• Available date range
  Use to hide times, not within this range.
  • Also, disables arrow to change a week, if there are no available times.

calendarOptions = { isWeek: true, isWithTime: true, fromDate: moment(), toDate: moment().add(1, "M") };

//If you need to set fromDate: moment(), just use isFromNow: true.

• Available time range
  Use to hide hours, not within this range.
  • Default is from 0 to 23.

calendarOptions = { isWeek: true, isWithTime: true, fromHour: 7, toHour: 19 };

• Interval
  Use to generate hours with some interval.
  • Default is 1 hour.

calendarOptions = { isWeek: true, isWithTime: true, hourInterval: 2, minuteInterval: 30 };

Additional

• Events
  Use to highlight the date.
  • WARNING: Just for month view mode.

calendarOptions = {};

calendarEvents = [moment(), "2022-07-12"];

<ngx-calendar [options]="calendarOptions" [events]="calendarEvents"></ngx-calendar>

• Get date range
  Use to get date range and watch changes after clicking on arrows.

calendarOptions = {};

onChangeDate(dateRange: any) {
    //dateRange is an object with fromDate and toDate properties as moment objects.
}

<ngx-calendar [options]="calendarOptions" (onChangeDate)="onChangeDate($event)"></ngx-calendar>

• Get chosen date
  Use to get chosen date after clicking on one.
  • Clicking on one date two times will clear it.

calendarOptions = {};

onChooseDate(date: any) {
    //date is a chosen date as moment object or null.
}

<ngx-calendar [options]="calendarOptions" (onChooseDate)="onChooseDate($event)"></ngx-calendar>

• Change view
  Use to change view after load.

import { NgxCalendarComponent } from "ss-ngx-calendar";

@ViewChild("ngxCalendar") ngxCalendar: NgxCalendarComponent;

calendarOptions = {};

//After the calendar is initialized.
ngAfterViewInit() {
    var isMonth = false; //To change to week view mode.

    this.ngxCalendar.setView(isMonth);
}

<ngx-calendar #ngxCalendar [options]="calendarOptions"></ngx-calendar>

• Refresh
  Use to reload options in case of change.

import { NgxCalendarComponent } from "ss-ngx-calendar";

@ViewChild("ngxCalendar") ngxCalendar: NgxCalendarComponent;

calendarOptions = {};

//After the calendar is initialized.
ngAfterViewInit() {
    this.calendarOptions = { isWeek: true, isWithTime: true, fromHour: 8, toHour: 17 };

    this.ngxCalendar.refresh();
}

<ngx-calendar #ngxCalendar [options]="calendarOptions"></ngx-calendar>