
Calendar Month View:
Calendar Week View:
Calendar Day View:
Calendar with Events:
Click the "Load Events" button at the header.
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