Contents
1. สร้างแอพและรัน
[code]
> ionic start myCalendar blank
> cd ./myCalendar
> ionic serve -l
[/code]
2. เขียนโค๊ดแสดงปฏิทิน
src/pages/home/home.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { // We will create our own calendar UI or view from scratch. // This basic calendar will very simple, // it just Month header with previous and next month button. date: any; // date for calendar to show daysInThisMonth: any; daysInLastMonth: any; daysInNextMonth: any; monthNames: string[]; // array of month'name currentMonth: any; // current month currentYear: any; // current year currentDate: any; // current date constructor(public navCtrl: NavController) { this.currentDate = new Date(); this.monthNames = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; this.currentMonth = this.monthNames[this.currentDate.getMonth()]; this.currentYear = this.currentDate.getFullYear(); this.date = this.currentDate; this.getDaysOfMonth(); } // function for push calendar date items to the arrays // that will be displaying the full calendar date. getDaysOfMonth() { this.daysInThisMonth = new Array(); this.daysInLastMonth = new Array(); this.daysInNextMonth = new Array(); this.currentMonth = this.monthNames[this.date.getMonth()]; this.currentYear = this.date.getFullYear(); if(this.date.getMonth() === new Date().getMonth()) { this.currentDate = new Date().getDate(); } else { this.currentDate = 999; } var firstDayThisMonth = new Date(this.date.getFullYear(), this.date.getMonth(), 1).getDay(); var prevNumOfDays = new Date(this.date.getFullYear(), this.date.getMonth(), 0).getDate(); for(var i = prevNumOfDays-(firstDayThisMonth-1); i <= prevNumOfDays; i++) { this.daysInLastMonth.push(i); } var thisNumOfDays = new Date(this.date.getFullYear(), this.date.getMonth()+1, 0).getDate(); for (var i = 0; i < thisNumOfDays; i++) { this.daysInThisMonth.push(i+1); } var lastDayThisMonth = new Date(this.date.getFullYear(), this.date.getMonth()+1, 0).getDay(); var nextNumOfDays = new Date(this.date.getFullYear(), this.date.getMonth()+2, 0).getDate(); for (var i = 0; i < (6-lastDayThisMonth); i++) { this.daysInNextMonth.push(i+1); } var totalDays = this.daysInLastMonth.length+this.daysInThisMonth.length+this.daysInNextMonth.length; if(totalDays<36) { for(var i = (7-lastDayThisMonth); i < ((7-lastDayThisMonth)+7); i++) { this.daysInNextMonth.push(i); } } } // Now, add the function for previous month button action. goToLastMonth() { this.date = new Date(this.date.getFullYear(), this.date.getMonth(), 0); this.getDaysOfMonth(); } // Also for the next month button action. goToNextMonth() { this.date = new Date(this.date.getFullYear(), this.date.getMonth()+2, 0); this.getDaysOfMonth(); } } |
src/pages/home/home.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<ion-header> <ion-navbar> <ion-title> My Calendar App </ion-title> </ion-navbar> </ion-header> <ion-content padding> <div class="calendar-header"> <ion-row class="calendar-month"> <ion-col col-2 (click)="goToLastMonth()"><ion-icon name="arrow-back"></ion-icon></ion-col> <ion-col col-8>{{currentMonth}} {{currentYear}}</ion-col> <ion-col col-2 (click)="goToNextMonth()"><ion-icon name="arrow-forward"></ion-icon></ion-col> </ion-row> </div> <div class="calendar-body"> <ion-grid> <ion-row class="calendar-weekday"> <ion-col>Su</ion-col> <ion-col>Mo</ion-col> <ion-col>Tu</ion-col> <ion-col>We</ion-col> <ion-col>Th</ion-col> <ion-col>Fr</ion-col> <ion-col>Sa</ion-col> </ion-row> <ion-row class="calendar-date"> <ion-col col-1 *ngFor="let lastDay of daysInLastMonth" class="last-month">{{lastDay}}</ion-col> <ion-col col-1 *ngFor="let day of daysInThisMonth"> <span class="currentDate" *ngIf="currentDate === day; else otherDate">{{day}}</span> <ng-template #otherDate class="otherDate">{{day}}</ng-template> </ion-col> <ion-col col-1 *ngFor="let nextDay of daysInNextMonth" class="next-month">{{nextDay}}</ion-col> </ion-row> </ion-grid> </div> </ion-content> |
src/pages/home/home.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
page-home { [col-1] { -webkit-box-flex: 0; -webkit-flex: 0 0 8.33333%; -ms-flex: 0 0 8.33333%; flex: 0 0 14.285714285714286%; width: 14.285714285714286%; max-width: 14.285714285714286%; } .col { text-align: center; padding: 5px; } .last-month, .next-month { color: #999999; font-size: 90%; } .currentDate, .otherDate { padding: 5px; } .currentDate { font-weight: bold; background-color: red; color: white; border-radius: 30px; } .calendar-header { background-color: #1a732d; color: #FFFFFF; } .event-bullet { margin: 2px auto; height: 5px; width: 5px; background-color: green; border-radius: 30px; } .selected-date { width: 20px; height: 2px; background-color: blue; } .unselected-date { border: none; } .calendar-body { .grid { padding: 0; } .col:last-child { border-right: none; } .calendar-weekday, .calendar-date { text-align: center; margin: 0; } .calendar-weekday { font-weight: bold; border-bottom: solid 1px #1a732d; background-color: #26ab56; } .calendar-date { border-top: solid 1px #1a732d; border-bottom: solid 1px #1a732d; } } } |
3. ติดตั้งและคอนฟิก Native Ionic Cordova Calendar Plugin
To integrate the calendar with native Ionic 3 Cordova calendar plugin, type this command to install it first.
[code]
> ionic cordova plugin add cordova-plugin-calendar
> npm install –save @ionic-native/calendar
[/code]
Now, open and edit src/app/app.module.ts
then add this import.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { SplashScreen } from '@ionic-native/splash-screen'; import { StatusBar } from '@ionic-native/status-bar'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { Calendar } from '@ionic-native/calendar'; @NgModule({ declarations: [ MyApp, HomePage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler}, Calendar ] }) export class AppModule {} |
บรรทัดที่ 10: import Calendar เข้ามาใช้
บรรทัดที่ 30: เพิ่มโมดูล Calendar
เข้ามาใน @NgModule
providers.
Now, it’s ready to implement in the pages.
3.
Link