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 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
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 currentDate: any; // current date วันที่ currentMonth: any; // current month เดือน currentYear: any; // current year ปี selectedDate: any; selectedMonth: any; selectedYear: any; mylog: any; constructor(public navCtrl: NavController) { this.date = new Date(); this.monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; this.currentDate = this.date.getDate(); this.currentMonth = this.monthNames[this.date.getMonth()]; this.currentYear = this.date.getFullYear(); this.selectedDate = this.currentDate; this.selectedMonth = this.currentMonth; this.selectedYear = this.currentYear; this.mylog = this.selectedDate + " 1 " + this.selectedMonth + " " + this.currentYear; 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.monthNames[this.date.getMonth()] === this.selectedMonth) && (this.date.getFullYear() === this.selectedYear)) { this.currentDate = this.selectedDate; //this.currentDate = new Date().getDate(); this.mylog = this.selectedDate + " x1 " + this.selectedMonth; } else { this.currentDate = 999; this.mylog = this.selectedDate + " y1 " + this.selectedMonth; } 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); } } // Now, add the function for previous month button action. goToLastMonth1() { this.date = new Date(this.date.getFullYear(), this.date.getMonth(), 0); this.getDaysOfMonth(); } // Also for the next month button action. goToNextMonth1() { this.date = new Date(this.date.getFullYear(), this.date.getMonth() + 2, 0); this.getDaysOfMonth(); } // Now, add the function for previous month button action. goToLastMonth(day) { this.currentDate = day; this.selectedDate = this.currentDate; this.date = new Date(this.date.getFullYear(), this.date.getMonth(), 0); // this.selectedMonth = this.date.getMonth(); this.selectedMonth = this.monthNames[this.date.getMonth()]; this.selectedYear = this.date.getFullYear(); this.mylog = this.selectedDate + " z " + this.selectedMonth + " " + this.selectedYear; console.log(this.selectedDate + " z " + this.selectedMonth + " " + this.selectedYear) this.getDaysOfMonth(); } // Also for the next month button action. goToNextMonth(day) { this.currentDate = day; this.selectedDate = this.currentDate; this.date = new Date(this.date.getFullYear(), this.date.getMonth() + 2, 0); //this.selectedMonth = this.date.getMonth()+2; this.selectedMonth = this.monthNames[this.date.getMonth()]; this.selectedYear = this.date.getFullYear(); this.mylog = this.selectedDate + " z " + this.selectedMonth + " " + this.selectedYear; console.log(this.selectedDate + " z " + this.selectedMonth + " " + this.selectedYear) this.getDaysOfMonth(); } selectDate(day) { this.currentDate = day; this.selectedDate = this.currentDate; this.selectedMonth = this.currentMonth; this.selectedYear = this.currentYear; this.mylog = this.selectedDate + " z2 " + this.selectedMonth + " " + this.selectedYear; } } |
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 39 40 41 42 43 44 45 46 |
<ion-header> <ion-navbar> <ion-title> 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)="goToLastMonth1()"> <ion-icon name="arrow-back"></ion-icon> </ion-col> <ion-col col-8>{{currentMonth}} {{currentYear}}</ion-col> <ion-col col-2 (click)="goToNextMonth1()"> <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" (click)="goToLastMonth(lastDay)">{{lastDay}}</ion-col> <ion-col col-1 *ngFor="let day of daysInThisMonth" (click)="selectDate(day)"> <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" (click)="goToNextMonth(nextDay)">{{nextDay}}</ion-col> </ion-row> <p>{{mylog}}</p> </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; } } } |