1. สร้างแอพและรัน

[code]
> ionic start myCalendar blank
> cd ./myCalendar
> ionic serve -l
[/code]

src/pages/home/home.html

<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>Sun</ion-col>
        <ion-col>Mon</ion-col>
        <ion-col>Tue</ion-col>
        <ion-col>Wed</ion-col>
        <ion-col>Thu</ion-col>
        <ion-col>Fri</ion-col>
        <ion-col>Sat</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}}
          <br>
          <div class="event-bullet" *ngIf="checkEvent(lastDay,0)"></div>
        </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>
          <br>
          <div class="event-bullet" *ngIf="checkEvent(day,1)"></div>
        </ion-col>

        <ion-col col-1 *ngFor="let nextDay of daysInNextMonth" class="next-month" (click)="goToNextMonth(nextDay)">{{nextDay}}
          <br>
          <div class="event-bullet" *ngIf="checkEvent(nextDay,2)"></div>
        </ion-col>
      </ion-row>

      <p>{{mylog}}</p>
    </ion-grid>
  </div>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Calendar App

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<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>

<ion-grid>

<ion-row class="calendar-weekday">

<ion-col>Sun</ion-col>

<ion-col>Mon</ion-col>

<ion-col>Tue</ion-col>

<ion-col>Wed</ion-col>

<ion-col>Thu</ion-col>

<ion-col>Fri</ion-col>

<ion-col>Sat</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}}

<br>

</ion-col>

<ion-col col-1 *ngFor="let day of daysInThisMonth" (click)="selectDate(day)">

<ng-template #otherDate class="otherDate">{{day}} </ng-template>

<br>

</ion-col>

<ion-col col-1 *ngFor="let nextDay of daysInNextMonth" class="next-month" (click)="goToNextMonth(nextDay)">{{nextDay}}

<br>

</ion-col>

</ion-row>

<p>{{mylog}}</p>

</ion-grid>

</div>

</ion-content>

src/pages/home/home.ts

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;

  eventList: any;

  constructor(public navCtrl: NavController) {
    //this.eventList = [4, 5, 6];
    this.eventList = [
      { startDate: new Date("2018-05-30T17:25:45Z"), eventName: "1cash" },
      { startDate: new Date("2018-06-02T16:28:54Z"), eventName: "2visa" },
      { startDate: new Date("2018-07-03T16:30:43Z"), eventName: "3tab" },
      { startDate: new Date("2018-07-11T17:22:59Z"), eventName: "4tab" },
      { startDate: new Date("2018-07-19T16:53:41Z"), eventName: "5tab" },
      { startDate: new Date("2018-07-26T16:48:46Z"), eventName: "6tab" },
      { startDate: new Date("2018-07-30T17:29:52Z"), eventName: "7visa" },
      { startDate: new Date("2018-07-31T16:17:54Z"), eventName: "8tab" },
      { startDate: new Date("2018-08-02T16:58:03Z"), eventName: "9tab" },
      { startDate: new Date("2018-12-30T16:58:03Z"), eventName: "10tab" },
      { startDate: new Date("2019-01-04T16:58:03Z"), eventName: "11tab" }
    ];
    console.log("this.eventList ", this.eventList);
    console.log("this.eventList ", this.eventList[0].startDate);
    console.log("this.eventList ", typeof this.eventList[0].startDate);

    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.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;
  }

  checkEvent(day, month) {
    var hasEvent = false;

    let m = this.date.getMonth() + month;
    let y = this.date.getFullYear();
    if (m > 12) {
      m -= 12;
      y += 1;
    } else if (m == 0) {
      m += 12;
      y -= 1;
    }

    var thisDate1 = new Date(y + "-" + (m) + "-" + day + " 00:00:00");
    var thisDate2 = new Date(y + "-" + (m) + "-" + day + " 23:59:59");

    // if (month == 2) {
    //   console.log("thisDate1 ", thisDate1);
    //   console.log("thisDate2 ", thisDate2);
    // }
    this.eventList.forEach(event => {
      // console.log("event.startDate ", event.startDate);
      // console.log("thisDate1       ", thisDate1);
      if ((event.startDate >= thisDate1) && (event.startDate <= thisDate2)) {
        hasEvent = true;
        //console.log("event.startDate ", event.startDate);
      }
    });
    return hasEvent;
  }
}

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

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

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;

eventList: any;

constructor(public navCtrl: NavController) {

//this.eventList = [4, 5, 6];

this.eventList = [

{ startDate: new Date("2018-05-30T17:25:45Z"), eventName: "1cash" },

{ startDate: new Date("2018-06-02T16:28:54Z"), eventName: "2visa" },

{ startDate: new Date("2018-07-03T16:30:43Z"), eventName: "3tab" },

{ startDate: new Date("2018-07-11T17:22:59Z"), eventName: "4tab" },

{ startDate: new Date("2018-07-19T16:53:41Z"), eventName: "5tab" },

{ startDate: new Date("2018-07-26T16:48:46Z"), eventName: "6tab" },

{ startDate: new Date("2018-07-30T17:29:52Z"), eventName: "7visa" },

{ startDate: new Date("2018-07-31T16:17:54Z"), eventName: "8tab" },

{ startDate: new Date("2018-08-02T16:58:03Z"), eventName: "9tab" },

{ startDate: new Date("2018-12-30T16:58:03Z"), eventName: "10tab" },

{ startDate: new Date("2019-01-04T16:58:03Z"), eventName: "11tab" }

];

console.log("this.eventList ", this.eventList);

console.log("this.eventList ", this.eventList[0].startDate);

console.log("this.eventList ", typeof this.eventList[0].startDate);

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.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;

}

checkEvent(day, month) {

var hasEvent = false;

let m = this.date.getMonth() + month;

let y = this.date.getFullYear();

if (m > 12) {

m -= 12;

y += 1;

} else if (m == 0) {

m += 12;

y -= 1;

}

var thisDate1 = new Date(y + "-" + (m) + "-" + day + " 00:00:00");

var thisDate2 = new Date(y + "-" + (m) + "-" + day + " 23:59:59");

// if (month == 2) {

// console.log("thisDate1 ", thisDate1);

// console.log("thisDate2 ", thisDate2);

// }

this.eventList.forEach(event => {

// console.log("event.startDate ", event.startDate);

// console.log("thisDate1 ", thisDate1);

if ((event.startDate >= thisDate1) && (event.startDate <= thisDate2)) {

hasEvent = true;

//console.log("event.startDate ", event.startDate);

}

});

return hasEvent;

}

src/pages/home/home.scss

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: 45px;
      width: 45px;
    }
    .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%;
    }
    .calendar-header {
      background-color: #1a732d;
      color: #FFFFFF;
    }
    .event-bullet {
      margin: 2px auto;
      height: 5px;
      width: 5px;
      background-color: green;
      border-radius: 50%;
    }
    .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;
      }
    }
}

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: 45px;

width: 45px;

}

.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%;

}

.calendar-header {

background-color: #1a732d;

color: #FFFFFF;

}

.event-bullet {

margin: 2px auto;

height: 5px;

width: 5px;

background-color: green;

border-radius: 50%;

}

.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

Phaisarn Sutheebanjard

blog.phaisarn.com

แสดงปฏิทิน และแสดงจุดสำหรับ Event ได้

1. สร้างแอพและรัน