Contents

calendar

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

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

2. เขียนโค๊ดแสดงปฏิทิน

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;

  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 + " x " + this.selectedMonth;
    } else {
      this.currentDate = 999;
      this.mylog = this.selectedDate + " y " + 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);
    }
    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();
  }
 
  selectDate(day) {
    this.currentDate = day;
    this.selectedDate = this.currentDate;
    this.selectedMonth = this.currentMonth;
    this.selectedYear = this.currentYear;
    this.mylog = this.selectedDate + " z " + this.selectedMonth + " " + this.selectedYear;
  }

}

100

101

102

103

104

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 + " x " + this.selectedMonth;

} else {

this.currentDate = 999;

this.mylog = this.selectedDate + " y " + 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);

}

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();

}

selectDate(day) {

this.currentDate = day;

this.selectedDate = this.currentDate;

this.selectedMonth = this.currentMonth;

this.selectedYear = this.currentYear;

this.mylog = this.selectedDate + " z " + this.selectedMonth + " " + this.selectedYear;

}

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)="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" (click)="goToLastMonth()">{{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}}</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)="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>

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

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

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

</ion-row>

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

</ion-grid>

</div>

</ion-content>

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

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;

}

Phaisarn Sutheebanjard

blog.phaisarn.com

แสดงปฏิทิน และเลือกวันที่ได้

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

2. เขียนโค๊ดแสดงปฏิทิน

src/pages/home/home.ts

src/pages/home/home.html

src/pages/home/home.scss