Ionic 2 - calendar

Calendar Month View:

1111.PNG

Calendar Week View:

3333.PNG

 

Calendar Day View:

4444.PNG

 

Calendar with Events:

Click the "Load Events" button at the header.

2222.PNG

You can add a calendar in ionic using the node module "ionic2-calendar". Below are the steps to configure a calendar in ionic2 application.

Install typings and intl - dependencies for ionic2-calendar:

npm install -g typings
 
npm install --save intl

Installing ionic2-calendar:

npm install ionic2-calendar --save

Importing ionic2-calendar module:

import { NgCalendarModule } from 'ionic2-calendar';
NgCalendarModule, // add this link in the imports - under @NgModule

hence, your app.module.ts file will look like:

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { NgCalendarModule  } from 'ionic2-calendar';
 
@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    NgCalendarModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

In your page.ts add,

    eventSource;
    viewTitle;
    isToday: boolean;
    calendar = {
        mode: 'month',
        currentDate: new Date()
    }; // these are the variable used by the calendar.
    loadEvents() {
        this.eventSource = this.createRandomEvents();
    }
    onViewTitleChanged(title) {
        this.viewTitle = title;
    }
    onEventSelected(event) {
        console.log('Event selected:' + event.startTime + '-' + event.endTime + ',' + event.title);
    }
    changeMode(mode) {
        this.calendar.mode = mode;
    }
    today() {
        this.calendar.currentDate = new Date();
    }
    onTimeSelected(ev) {
        console.log('Selected time: ' + ev.selectedTime + ', hasEvents: ' +
            (ev.events !== undefined && ev.events.length !== 0) + ', disabled: ' + ev.disabled);
    }
    onCurrentDateChanged(event:Date) {
        var today = new Date();
        today.setHours(0, 0, 0, 0);
        event.setHours(0, 0, 0, 0);
        this.isToday = today.getTime() === event.getTime();
    }
    createRandomEvents() {
        var events = [];
        for (var i = 0; i < 50; i += 1) {
            var date = new Date();
            var eventType = Math.floor(Math.random() * 2);
            var startDay = Math.floor(Math.random() * 90) - 45;
            var endDay = Math.floor(Math.random() * 2) + startDay;
            var startTime;
            var endTime;
            if (eventType === 0) {
                startTime = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + startDay));
                if (endDay === startDay) {
                    endDay += 1;
                }
                endTime = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + endDay));
                events.push({
                    title: 'All Day - ' + i,
                    startTime: startTime,
                    endTime: endTime,
                    allDay: true
                });
            } else {
                var startMinute = Math.floor(Math.random() * 24 * 60);
                var endMinute = Math.floor(Math.random() * 180) + startMinute;
                startTime = new Date(date.getFullYear(), date.getMonth(), date.getDate() + startDay, 0, date.getMinutes() + startMinute);
                endTime = new Date(date.getFullYear(), date.getMonth(), date.getDate() + endDay, 0, date.getMinutes() + endMinute);
                events.push({
                    title: 'Event - ' + i,
                    startTime: startTime,
                    endTime: endTime,
                    allDay: false
                });
            }
        }
        return events;
    }
    onRangeChanged(ev) {
        console.log('range changed: startTime: ' + ev.startTime + ', endTime: ' + ev.endTime);
    }
    markDisabled = (date:Date) => {
        var current = new Date();
        current.setHours(0, 0, 0);
        return date < current;
    };

Display the calendar in HTML using,

 

<ion-header>
    <ion-navbar color="primary">
        <ion-title>{{viewTitle}}</ion-title>
        <ion-buttons end>
            <button ion-button [disabled]="isToday" (click)="today()">Today</button>
            <button ion-button (click)="changeMode('month')">M</button>
            <button ion-button (click)="changeMode('week')">W</button>
            <button ion-button (click)="changeMode('day')">D</button>
            <button ion-button (click)="loadEvents()">Load Events</button>
        </ion-buttons>
    </ion-navbar>
</ion-header>
 
<ion-content class="has-header">
    <calendar [eventSource]="eventSource"
              [calendarMode]="calendar.mode"
              [currentDate]="calendar.currentDate"
              (onCurrentDateChanged)="onCurrentDateChanged($event)"
              (onEventSelected)="onEventSelected($event)"
              (onTitleChanged)="onViewTitleChanged($event)"
              (onTimeSelected)="onTimeSelected($event)"
              step="30">
    </calendar>
</ion-content>
Category: 

Comments

Raslani (not verified)
Hello I've followed your steps but I have a problem: Error in ./PlanningPage class PlanningPage - caused by: self.context.onViewTitleChanged is not a function How can I handle it, pls?
Anishnirmal's picture
Anishnirmal
Hi Raslani, I have missed some functions in "page.ts" file found the problem and updated the post. Please follow the post and let me know if your problem is fixed. Thanks.
Raslani (not verified)
Hello I'm trying to set the events, but it doesn't work 'cuz I'm missing somtething. events = { title: 'mon event', startTime: new Date(Date.UTC(2017, 1, 1)), endTime : new Date(Date.UTC(2017, 3, 3)), allDay: true }; constructor(public navCtrl: NavController, public navParams: NavParams) { //this.loadEvents(); this.eventSource = this.events; } What's wrong in my code? Thanks
Mohamed Abdulahman (not verified)
Thank you for your Great effort Anish ... i have a Q. how can i decide Monthly or weekly special events from admin side to display on customer devices not Random events ... thank you in advance