最近有个App项目，需要创建一个日历，然后日历上可以标注每日的工作日程，这显然是要自定义一个日历的，怕忘记 了简单记录一下，先看看效果先：

calendar.png

上面年月里可以点击翻到上一个月和下一个月，直接上源码吧：

HTML：

<div class="app-full-width app-overflow" margin-bottom>
  <div class="calendar-list-title app-border-bottom" text-center>
    <ion-icon name="ios-arrow-back" (click)="preMonth()"></ion-icon>
    <span class="calendar-year">{{select_year}}年{{select_month}}月</span>
    <ion-icon name="ios-arrow-forward" (click)="nextMonth()"></ion-icon>
  </div>
  <div class="app-common-bg app-border-bottom calendar-table">
    <div class="calendar-table-item">周日</div>
    <div class="calendar-table-item">周一</div>
    <div class="calendar-table-item">周二</div>
    <div class="calendar-table-item">周三</div>
    <div class="calendar-table-item">周四</div>
    <div class="calendar-table-item">周五</div>
    <div class="calendar-table-item">周六</div>
    <div class="calendar-table-item" *ngFor="let day of days" 
    [ngClass]="{'currentDay':day.day==active_day}" (click)="change_day(day.day)">
      <div style="justify-content: center;align-items: center;">
        <div>{{day.day}}</div>
      </div>
    </div>
  </div>
</div>

ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the CalendarlistComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'calendarlist',
  templateUrl: 'calendarlist.html'
})
export class CalendarlistComponent {

  all_year = [];
  all_month = [];
  // 当前年月日
  active_day:any;
  select_year: any;
  select_month: any;
  // 指定的年和月的所有日期
  days = [];

  constructor(public navCtrl: NavController) {
    console.log('Hello CalendarlistComponent Component');
    this.showTime();
  }

  //  创建日历
  showTime(){
    //在select中填入年份
    for(var year = 2016; year < 2050; year++) {
      var obj_1 = {'value': year, 'id': year}
      this.all_year.push(obj_1);
    }
    //在select中填入月份
    for(var month = 1; month < 13; month++) {
      var obj_2 = {'value': month, 'id': month}
      this.all_month.push(obj_2);
    }
    console.log(this.all_year)
    //初始化显示 当前年和月
    this.show_now();
  }

  //初始化显示 当前年和月
  show_now(){
    var now = new Date();
    this.active_day = now.getDate();
    this.select_year = now.getFullYear();
    this.select_month = now.getMonth() + 1;
    this.showDays(this.select_year, this.select_month)
  }

  //展示指定的年和月的所有日期
  showDays(year, month){
    this.days = [];
    //得到表示指定年和月的1日的那个时间对象
    var date = new Date(year, month - 1, 1);
    //1.先添加响应的空白的div:这个月1号是星期几，就添加几个空白的div
    var dayOfWeek = date.getDay(); //得到1日是星期几
    for(var i = 0; i < dayOfWeek; i++) {
        this.days.push("");
    }
    //计算一个月有多少天
    var daysOfMonth = this.calDays(year, month);
    //2. 从1号开始添加li
    for(var j = 1; j <= daysOfMonth; j++) {
      this.days.push(j)
    }
  }

   //返回指定的月份的天数 月份1-12
   calDays(year, month){
    return new Date(year, month, 0).getDate();
   }


  //  下一个月
  nextMonth(){
    var date = new Date(this.select_year, this.select_month, 1);
    this.showDays(date.getFullYear(), date.getMonth() + 1)
    this.select_month = date.getMonth() + 1;
    this.select_year = date.getFullYear();
  }

  //  上一个月
  preMonth(){
    var date = new Date(this.select_year, this.select_month-1);
    
        if(this.select_month>1){
          this.showDays(date.getFullYear(), date.getMonth() - 1 + 1)
          this.select_year = date.getFullYear();
          this.select_month = date.getMonth()-1 + 1;
        }else {
          this.showDays(date.getFullYear()-1, 12)
          this.select_month = 12;
          this.select_year = this.select_year -1;
        }
  }

   change_day(day){
     this.active_day = day;
   }

}