แสดงวันในสัปดาห์แบบคงที่ ไม่มีการเปลี่ยนวันที่แสดง (ไม่เปลี่ยนปฏิทิน)
วันของเดือนก่อนหน้า และวันของเดือนถัดไป จะแสดงเป็นสีจาง
วันของเดือนปัจจุบันแสดงสีเข้ม
เมื่อคลิกเลือกวัน จะรู้ว่าเลือกที่วันไหน
1. สร้างแอพและรัน
[code]
> ionic start myCalendar blank
> cd ./mycalendar
> ionic serve -l
[/code]
2. เขียนโค๊ดแสดงสัปดาห์
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 47 48 |
<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> </ion-col> <ion-col col-8>{{currentMonth}} {{currentYear}}</ion-col> <ion-col col-2> </ion-col> </ion-row> </div> <div class="calendar-body"> <ion-grid> <ion-row class="calendar-weekday"> <ion-col>Suf</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)="selectLastWeek(lastDay)"> <span class="currentDate" *ngIf="currentDate === lastDay; else otherDate">{{lastDay}}</span> <ng-template #otherDate class="otherDate">{{lastDay}}</ng-template> </ion-col> <ion-col col-1 *ngFor="let day of daysInThisWeek" (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)="selectNextWeek(nextDay)"> <span class="currentDate" *ngIf="currentDate === nextDay; else otherDate">{{nextDay}}</span> <ng-template #otherDate class="otherDate">{{nextDay}}</ng-template> </ion-col> </ion-row> <p>{{mylog}}</p> </ion-grid> </div> </ion-content> |
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 127 128 129 130 131 |
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 daysInThisWeek: any; daysInThisMonth: any; daysInLastMonth: any; daysInNextMonth: any; monthNames: string[]; // array of month'name currentDate: any; // current date วันที่ currentMonth: any; // current month เดือน currentMON: any; currentYear: any; // current year ปี selectedDate: any; selectedMonth: any; selectedYear: any; mylog: any; constructor(public navCtrl: NavController) { this.date = new Date(); //this.date.setDate(2); // 2 //this.date.setMonth(5); // june this.monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; this.currentDate = this.date.getDate(); this.currentMON = this.date.getMonth(); 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.getDaysOfWeek(); } // function for push calendar date items to the arrays // that will be displaying the full calendar date. getDaysOfWeek() { this.daysInThisWeek = new Array(); 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.currentDate + " < 63> " + this.selectedDate + " " + this.selectedMonth + " " + this.selectedYear; } else { this.currentDate = 999; this.mylog = this.currentDate + " < 66> " + this.selectedDate + " " + this.selectedMonth + " " + this.selectedYear; } var thisNumOfDays = new Date(this.date.getFullYear(), this.date.getMonth() + 1, 0).getDate(); console.log(" thisNumOfDays ", thisNumOfDays); var todayDate = this.date.getDate(); var todayDay = this.date.getDay(); console.log(" todayDate ", todayDate); console.log(" todayDay ", todayDay); var stWeekDay = todayDate - todayDay var enWeekDay = stWeekDay + 6; console.log(" stWeekDay ", stWeekDay); console.log(" enWeekDay ", enWeekDay); if (stWeekDay < 1) { stWeekDay = 1; 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); } } if (enWeekDay > thisNumOfDays) { enWeekDay = thisNumOfDays; 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); } } for (var i = stWeekDay; i <= enWeekDay; i++) { this.daysInThisWeek.push(i); } } selectLastWeek(day) { console.log("day " + day); this.currentDate = day; this.selectedDate = this.currentDate; this.selectedMonth = this.monthNames[this.currentMON - 1]; this.selectedYear = this.currentYear; this.mylog = this.currentDate + " <110> " + this.selectedDate + " " + this.selectedMonth + " " + this.selectedYear; } selectNextWeek(day) { console.log("day " + day); this.currentDate = day; this.selectedDate = this.currentDate; this.selectedMonth = this.monthNames[this.currentMON + 1]; this.selectedYear = this.currentYear; this.mylog = this.currentDate + " <120> " + this.selectedDate + " " + this.selectedMonth + " " + this.selectedYear; } selectDate(day) { this.currentDate = day; this.selectedDate = this.currentDate; this.selectedMonth = this.currentMonth; this.selectedYear = this.currentYear; this.mylog = this.currentDate + " <129> " + this.selectedDate + " " + this.selectedMonth + " " + this.selectedYear; } } |
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. ลองปรับแต่ง CSS
ลองปรับแต่ง CSS ดู ให้วงกลมรอบวันที่เลือกใหญ่ขึ้น
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 68 69 70 71 |
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; width:100%; display:inline-block; line-height:10px; text-align: center; } .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; } } } |
4. ลองปรับ CSS อีกที
ลองปรับ CSS อีกที คราวนี้ ok เลย
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 68 69 70 71 72 73 74 75 76 77 78 79 80 |
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; line-height:30px; height: 40px; width: 40px; } .last-month, .next-month { color: #999999; //font-size: 90%; } .currentDate, .otherDate { padding: 5px; } .currentDate { font-weight: bold; line-height:22px; height: 30px; width: 30px; display: inline-block; text-align: center; color: white; background-color: red; border-radius: 50%; // 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; } } } |
Link