Home

Awesome

Ionic2-Calendar directive

Ionic2 calendar directive

version GitHub License

Demo

https://twinssbc.github.io/Ionic2-Calendar/demo/

Dependency

version 0.2-0.4 has below dependency:
intl 1.2.5, due to issue https://github.com/angular/angular/issues/3333

version 0.1.x depends on Ionic 2.0.0-rc.1 ~ Ionic 2.0.0-rc.4
version 0.2.x depends on Ionic 2.0.0-rc.5 (rc.5 has breaking change on the slide API) and 2.0.0 final version onwards. version 0.2.9+ depends on Ionic 2.3.0 version onwards.
version 0.3.x depends on Ionic 3.1.1 version onwards.
version 0.4.x depends on Ionic 3.9.2 version onwards.
version 0.5.x depends on Ionic 4.0.0-rc.1 onwards.

Usage

Install: npm install ionic2-calendar --save

Import the ionic2-calendar module:

version 0.1.x - 0.4.x

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app/app.component';
import { NgCalendarModule  } from 'ionic2-calendar';


@NgModule({
    declarations: [
        MyApp
    ],
    imports: [
        NgCalendarModule,
        IonicModule.forRoot(MyApp)
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp
    ]
})
export class AppModule {}

version 0.5.x

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from '@ionic/angular';
import { MyApp } from './app/app.component';
import { NgCalendarModule  } from 'ionic2-calendar';


@NgModule({
    declarations: [
        MyApp
    ],
    imports: [
        NgCalendarModule,
        IonicModule.forRoot(MyApp)
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp
    ]
})
export class AppModule {}

If you are using PageModule, you need to import the NgCalendarModule in your page module

import { NgCalendarModule  } from 'ionic2-calendar';

@NgModule({
  declarations: [
    MyPage
  ],
  imports: [
    IonicPageModule.forChild(MyPage),
    NgCalendarModule
  ],
  entryComponents: [
    MyPage
  ]
})
export class MyPageModule {}

Add the directive in the html page

      <calendar [eventSource]="eventSource"
        [calendarMode]="calendar.mode"
        [currentDate]="calendar.currentDate"
        (onCurrentDateChanged)="onCurrentDateChanged($event)"
        (onRangeChanged)="reloadSource(startTime, endTime)"
        (onEventSelected)="onEventSelected($event)"
        (onTitleChanged)="onViewTitleChanged($event)"
        (onTimeSelected)="onTimeSelected($event)"
        step="30">
      </calendar>

Note for Ionic Build/Run command

ionic serve uses tsc to compile the code, while ionic build/run uses ngc to compile the code.
It requires explicit dependency on the compiled ngfactory files for each component.
I couldn’t find a way to configure the build command includes the ngfactory of the child components automatically.
So the workaround is to import them explicitly.
Add below lines in main.prod.ts

import { CalendarComponent } from 'ionic2-calendar/calendar';
import { MonthViewComponent } from 'ionic2-calendar/monthview';
import { WeekViewComponent } from 'ionic2-calendar/weekview';
import { DayViewComponent } from 'ionic2-calendar/dayview';

Options

        <calendar ... [step]="30"></calendar>

        <calendar ... [timeInterval]="30"></calendar>

        <calendar ... [locale]="calendar.locale"></calendar>

        calendar = {
            locale: 'en-GB'
        };

        <calendar ... [markDisabled]="markDisabled"></calendar>

        markDisabled = (date: Date) => {
            var current = new Date();
            return date < current;
        };

        <calendar ... [dateFormatter]="calendar.dateFormatter"></calendar>

        calendar = {
            dateFormatter: {
                formatMonthViewDay: function(date:Date) {
                    return date.getDate().toString();
                },
                formatMonthViewDayHeader: function(date:Date) {
                    return 'testMDH';
                },
                formatMonthViewTitle: function(date:Date) {
                    return 'testMT';
                },
                formatWeekViewDayHeader: function(date:Date) {
                    return 'testWDH';
                },
                formatWeekViewTitle: function(date:Date) {
                    return 'testWT';
                },
                formatWeekViewHourColumn: function(date:Date) {
                    return 'testWH';
                },
                formatDayViewHourColumn: function(date:Date) {
                    return 'testDH';
                },
                formatDayViewTitle: function(date:Date) {
                    return 'testDT';
                }
            }
        };        

        <calendar ... [lockSwipeToPrev]="lockSwipeToPrev"></calendar>

        onCurrentDateChanged(event:Date) {
            var today = new Date();
            today.setHours(0, 0, 0, 0);
            event.setHours(0, 0, 0, 0);
    
            if (this.calendar.mode === 'month') {
                if (event.getFullYear() < today.getFullYear() || (event.getFullYear() === today.getFullYear() && event.getMonth() <= today.getMonth())) {
                    this.lockSwipeToPrev = true;
                } else {
                    this.lockSwipeToPrev = false;
                }
            }
        }

        <calendar ... [lockSwipes]="lockSwipes"></calendar>

        ngAfterViewInit() {
            var me = this;
            setTimeout(function() {
                me.lockSwipes = true;
            },100);
        }

        <calendar ... startHour="9"></calendar>

        <calendar ... endHour="19"></calendar>

        <calendar ... spaceBetween="10"></calendar>

        <calendar ... (onCurrentDateChanged)="onCurrentDateChanged($event)"></calendar>

        onCurrentChanged = (ev: Date) => {
            console.log('Currently viewed date: ' + ev);
        };

        <calendar ... (onRangeChanged)="onRangeChanged($event)"></calendar>

        onRangeChanged = (ev: { startTime: Date, endTime: Date }) => {
            Events.query(ev, (events) => {
                this.eventSource = events;
            });
        };

        <calendar ... (onEventSelected)="onEventSelected($event)"></calendar>

        onEventSelected = (event) => {
            console.log(event.title);
        };

        <calendar ... (onTimeSelected)="onTimeSelected($event)"></calendar>

    onTimeSelected = (ev: { selectedTime: Date, events: any[] }) => {
        console.log('Selected time: ' + ev.selectedTime + ', hasEvents: ' + (ev.events !== undefined && ev.events.length !== 0));
        };

        <calendar ... (onTitleChanged)="onViewTitleChanged($event)"></calendar>

        onViewTitleChanged = (title: string) => {
            this.viewTitle = title;
        };

View Customization Option

There are two ways to customize the look and feel. If you just want to simply change the color or size of certain element, you could override the styles of the predefined css classes. CSS Customization section lists some important css classes. If you need to change the layout of certain element, you could refer to the Template Customization part.

CSS Customization

Template Customization

Note: For any css class appear in the customized template, you need to specify the styles by yourself. The styles defined in the calendar component won’t be applied because of the view encapsulation. You could refer to calendar.ts to get the definition of context types.

        <ng-template #template let-view="view" let-row="row" let-col="col">
            {{view.dates[row*7+col].label}}
        </ng-template>

        <calendar ... [monthviewDisplayEventTemplate]="template"></calendar>

        <ng-template #template let-view="view" let-row="row" let-col="col">
            {{view.dates[row*7+col].label}}
        </ng-template>

        <calendar ... [monthviewInactiveDisplayEventTemplate]="template"></calendar>

        <ng-template #template let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel">
	    ... 
        </ng-template>

        <calendar ... [monthviewEventDetailTemplate]="template"></calendar>

    <ng-template #template let-viewDate="viewDate"> 
        <div class="custom-day-header"> {{ viewDate.dayHeader }} </div> 
    </ng-template> 
 
    <calendar ... [weekviewHeaderTemplate]="template"></calendar>

        <ng-template #template let-displayEvent="displayEvent">
            <div class="calendar-event-inner">{{displayEvent.event.title}}</div>
        </ng-template>

        <calendar ... [weekviewAllDayEventTemplate]="template"></calendar>

        <ng-template #template let-displayEvent="displayEvent">
            <div class="calendar-event-inner">{{displayEvent.event.title}}</div>
        </ng-template>

        <calendar ... [weekviewNormalEventTemplate]="template"></calendar>

        <ng-template #template let-displayEvent="displayEvent">
            <div class="calendar-event-inner">{{displayEvent.event.title}}</div>
        </ng-template>

        <calendar ... [dayviewAllDayEventTemplate]="template"></calendar>

        <ng-template #template let-displayEvent="displayEvent">
            <div class="calendar-event-inner">{{displayEvent.event.title}}</div>
        </ng-template>

    <calendar ... [dayviewNormalEventTemplate]="template"></calendar>

        <ng-template #template let-day="day" let-eventTemplate="eventTemplate">
            <div [ngClass]="{'calendar-event-wrap': day.events}" *ngIf="day.events"
                 [ngStyle]="{height: 25*day.events.length+'px'}">
                <div *ngFor="let displayEvent of day.events" class="calendar-event" tappable
                     (click)="onEventSelected(displayEvent.event)"
                     [ngStyle]="{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}">
                    <ng-template [ngTemplateOutlet]="eventTemplate"
                                 [ngTemplateOutletContext]="{displayEvent:displayEvent}">
                    </ng-template>
                </div>
            </div>
        </ng-template>

        <calendar ... [weekviewAllDayEventSectionTemplate]="template"></calendar>

        <ng-template #template let-tm="tm" let-hourParts="hourParts" let-eventTemplate="eventTemplate">
            <div [ngClass]="{'calendar-event-wrap': tm.events}" *ngIf="tm.events">
                <div *ngFor="let displayEvent of tm.events" class="calendar-event" tappable
                     (click)="onEventSelected(displayEvent.event)"
                     [ngStyle]="{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}">
                    <ng-template [ngTemplateOutlet]="eventTemplate"
                                 [ngTemplateOutletContext]="{displayEvent:displayEvent}">
                    </ng-template>
                </div>
            </div>
        </ng-template>

        <calendar ... [weekviewNormalEventSectionTemplate]="template"></calendar>

        <ng-template #template let-allDayEvents="allDayEvents" let-eventTemplate="eventTemplate">
            <div *ngFor="let displayEvent of allDayEvents; let eventIndex=index"
                 class="calendar-event" tappable
                 (click)="onEventSelected(displayEvent.event)"
                 [ngStyle]="{top: 25*eventIndex+'px',width: '100%',height:'25px'}">
                <ng-template [ngTemplateOutlet]="eventTemplate"
                             [ngTemplateOutletContext]="{displayEvent:displayEvent}">
                </ng-template>
            </div>
        </ng-template>

        <calendar ... [dayviewAllDayEventSectionTemplate]="template"></calendar>

        <ng-template #template let-tm="tm" let-hourParts="hourParts" let-eventTemplate="eventTemplate">
            <div [ngClass]="{'calendar-event-wrap': tm.events}" *ngIf="tm.events">
                <div *ngFor="let displayEvent of tm.events" class="calendar-event" tappable
                     (click)="onEventSelected(displayEvent.event)"
                     [ngStyle]="{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}">
                    <ng-template [ngTemplateOutlet]="eventTemplate"
                                 [ngTemplateOutletContext]="{displayEvent:displayEvent}">
                    </ng-template>
                </div>
            </div>
        </ng-template>

        <calendar ... [dayviewNormalEventSectionTemplate]="template"></calendar>

EventSource

EventSource is an array of event object which contains at least below fields:

        var startTime = new Date(Date.UTC(2014, 4, 8));

        var endTime = new Date(Date.UTC(2014, 4, 9));

Note The calendar only watches for the eventSource reference for performance consideration. That means only you manually reassign the eventSource value, the calendar gets notified, and this is usually fit to the scenario when the range is changed, you load a new data set from the backend. In case you want to manually insert/remove/update the element in the eventSource array, you can call instance method ‘loadEvents’ event to notify the calendar manually.

Instance Methods

import { CalendarComponent } from "ionic2-calendar/calendar";

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
    @ViewChild(CalendarComponent) myCalendar:CalendarComponent;
    eventSource;
    …
    loadEvents: function() {
        this.eventSource.push({
            title: 'test',
            startTime: startTime,
            endTime: endTime,
            allDay: false
        });
        this.myCalendar.loadEvents();
    }
}

Localization

You could use locale option to achieve the localization.
If locale option is not specified, the calendar will use the LOCALE_ID set at the module level.
By default, the LOCALE_ID is en-US. You can override it in the module as below. If you pass undefined, the LOCALE_ID will be detected using the browser language setting. But using explicit value is recommended, as browser has different level of localization support.
Note that the event detail section in the month view doesn't support locale option, only LOCALE_ID takes effect. This is because it uses DatePipe in html directly. You could easily leverage customized event detail template to switch to other locale.

import { NgModule, LOCALE_ID } from '@angular/core';

@NgModule({
    …
    providers: [
        { provide: LOCALE_ID, useValue: 'zh-CN' }
    ]
})

For version 0.4.x+ which depends on Ionic 3.9.2+ and Angular 5.0+, locale module needs to be registered explicitly in module file as below.

import { registerLocaleData } from '@angular/common';
import localeZh from '@angular/common/locales/zh';
registerLocaleData(localeZh);

If you want to change the locale dynamically, you should use locale option instead of LOCALE_ID.

Performance Tuning

In the CPU profile, the default Intl based localization code occupies a big portion of the execution time. If you don’t need localization on certain parts, you can use the custom dateFormatter to override the date transform method. For example, the date in month view usually doesn’t require localization, you could use below code to just display the date part. If the month view day header doesn’t need to include the date, you could also use a string array containing static labels to save the date calculation.

<calendar ... [dateFormatter]="calendar.dateFormatter"></calendar>

calendar = {
    dateFormatter: {
        formatMonthViewDay: function(date:Date) {
            return date.getDate().toString();
        }            
    }
};

Known issue

This component updates the ion-slide dynamically so that only 3 looped slides are needed.
The ion-slide in Ionic2 uses Swiper. It seems in the Swiper implementation, the next slide after the end of looped slide is a separate cached slide, instead of the first slide.
I can't find out a way to force refresh that cached slide, so you will notice that when sliding from the third month to the forth month, the preview month is not the forth month, but the first month.
Once the sliding is over, the slide will be forced to render the forth month.

Common Questions

var mySwiper = document.querySelector('.swiper-container')['swiper'];
    mySwiper.slideNext();

.calendar-hour-column, .weekview-allday-label, .dayview-allday-label {
  width: 70px !important;
}

.weekview-allday-table, .dayview-allday-table {
  display: none;
}

.weekview-normal-event-container {
  margin-top: 37px !important;
}

.dayview-normal-event-container {
  margin-top: 0 !important;
}