angualr5.0 制作简单日历

只是一个很简单的日历。

HTML
采用table表格来展示日历。通常日历总共是7*7的表格。这样也方便数据的展示。

  <div class="left-cal">
      <div class='datapicker'>
        <div class="datepickTitle">
          <i class="iconfont icon-dobble-left" (click)="behindyear()"></i>
          <i class="iconfont icon-play-copy" (click)="behindMonth()"></i>
          <span>{{today}}</span>
          <i class="iconfont icon-play" (click)="nextMonth()"></i>
          <i class="iconfont icon-youshuangjiantou" (click)="nextyear()"></i>
        </div>

        <table class="dateTable">
          <tr>
            <td *ngFor="let weekitem of weekday">
              {{weekitem}}
            </td>
          </tr>
          <tr>
            <td *ngFor="let firstday of firstDatarows" (click)="clickDay($event)" [class.hover]="firstday==date&&finalday==month&&slectYear==year"
              [class.slectday]="selectday==firstday&&selectday!==''">
              {{firstday}}
            </td>
          </tr>
          <tr>
            <td *ngFor="let seconday of secondDatarows" (click)="clickDay($event)" [class.hover]="seconday==date&&finalday==month&&slectYear==year"
              [class.slectday]="selectday==seconday">
              {{seconday}}</td>
          </tr>
          <tr>
            <td *ngFor="let threeday of threeDatarows" (click)="clickDay($event)" [class.hover]="threeday==date&&finalday==month&&slectYear==year"
              [class.slectday]="selectday==threeday">{{threeday}}</td>
          </tr>
          <tr>
            <td *ngFor="let fourday of fourDatarows" (click)="clickDay($event)" [class.hover]="fourday==date&&finalday==month&&slectYear==year"
              [class.slectday]="selectday==fourday">{{fourday}}</td>
          </tr>
          <tr>
            <td *ngFor="let fiveday of fiveDatarows" (click)="clickDay($event)" [class.hover]="fiveday==date&&finalday==month&&slectYear==year"
              [class.slectday]="selectday==fiveday">{{fiveday}}</td>
          </tr>
          <tr>
            <td *ngFor="let sixday of sixDatarows" (click)="clickDay($event)" [class.hover]="sixday==date&&finalday==month&&slectYear==year"
              [class.slectday]="selectday==sixday">{{sixday}}</td>
          </tr>
        </table>
      </div>
    </div>

TS部分
使用一个date对象，操作也只针对这一个date对象。
1.服务部分(粗浅操作,可使用date-fans)

/**
   * 获取日期
   */
  getData(){
    let myDate=new Date(); 
    return{
      get:(){
        return myDate;
      },
      set:(date){
        myDate=date;
      },
      
      
    }   
  }

2.ts
主要使用7个数组来存放每一行的数据，后续继续优化。展示日历主要是要获取每个月的第一天是星期几。以及每个月是几天。在确定每个月的第一天是星期几以后

import { ActivatedRoute } from '@angular/router';
import { UtilService } from './../services/util.service';
import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';
@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss'],
  host: {
    '[class.right_content]': "true",
  }
})
export class ListComponent implements OnInit {
  day = new Date();
  // 存放所有日期
  firstDatarows = []
  secondDatarows = []
  threeDatarows = []
  fourDatarows = []
  fiveDatarows = []
  sixDatarows = []
  allDateRows = [];
  // 当前日期
  today: string;
  finalday:number;
  // 当前月
  month: number;
  // 当前年
  date:number;
  year: number;
  weekday = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
  constructor(
    private api: ApiService,
    private route: ActivatedRoute,
    private dateService: UtilService
  ) { }

  ngOnInit() {
   this.month = this.dateService.getData().get().getMonth();
    this.finalday = this.month;
    this.year = this.dateService.getData().get().getFullYear();
    this.slectYear = this.year;
    this.date = this.dateService.getData().get().getDate();
    this.today = `${this.year}年${(this.month + 1 > 9) ? this.month + 1 : `0${this.month + 1}`}月`;
    this.dateTableList();
  }

 /**
   * 上个月
   */
  behindMonth() {
    this.month--;
    if (this.month < 0) {
      this.month = 11;
      this.today = `${--this.year}年${(this.month + 1 > 9) ? this.month + 1 : `0${this.month + 1}`}月`;
      this.changeDateTable(this.year, this.month);
    } else {
      this.today = `${this.year}年${(this.month + 1 > 9) ? this.month + 1 : `0${this.month + 1}`}月`;
      this.changeDateTable(this.year, this.month);
    }
  }
  /**
   * 上一年
   */
  behindyear() {
    this.year--;
    this.today = `${this.year}年${(this.month + 1 > 9) ? this.month + 1 : `0${this.month + 1}`}月`;
    this.changeDateTable(this.year, this.month);
  }
  /**
   * 改变日期表格
   */
  changeDateTable(year, month) {
    const firstday = new Date(year, month, 1);
    const finallday = new Date(year, month + 1, 0);
    const beforeday = new Date(year, month, 0);
    let daycount = beforeday.getDate();
    for (let i = 1; i <= finallday.getDate(); i++) {
      this.allDateRows.push(i);

    }
    this.firstDatarows = this.allDateRows.splice(0, 7 - firstday.getDay());
    for (let i = 0; i < firstday.getDay(); i++) {
      this.firstDatarows.unshift('');
      daycount--;
    }
    this.secondDatarows = this.allDateRows.splice(0, 7);
    this.threeDatarows = this.allDateRows.splice(0, 7);
    this.fourDatarows = this.allDateRows.splice(0, 7);
    this.fiveDatarows = this.allDateRows.splice(0, 7);
    this.sixDatarows = this.allDateRows.splice(0);

  }
  /**
   * 表格列表
   */

  dateTableList() {
    const mydate = this.dateService.getData().get();
    const firstday = new Date(mydate.getFullYear(), mydate.getMonth(), 1);
    const finallday = new Date(mydate.getFullYear(), mydate.getMonth() + 1, 0);
    const beforeday = new Date(mydate.getFullYear(), mydate.getMonth(), 0);
    let daycount = beforeday.getDate();
    for (let i = 1; i <= finallday.getDate(); i++) {
      this.allDateRows.push(i);
    }
    for (let i = 0; i < firstday.getDay(); i++) {
      this.allDateRows.unshift('');
      daycount--;
    }
    this.firstDatarows = this.allDateRows.splice(0, 7);
    this.secondDatarows = this.allDateRows.splice(0, 7);
    this.threeDatarows = this.allDateRows.splice(0, 7);
    this.fourDatarows = this.allDateRows.splice(0, 7);
    this.fiveDatarows = this.allDateRows.splice(0, 7);
    this.sixDatarows = this.allDateRows.splice(0, 7);
  }
  /**
   * 下一年
   */
  nextyear() {
    this.year++;
    this.today = `${this.year}年${(this.month + 1 > 9) ? this.month + 1 : `0${this.month + 1}`}月`;
    this.changeDateTable(this.year, this.month);
  }
  /**
   * 下个月
   */
 nextMonth() {
    this.month++;
    if (this.month > 11) {
      this.month = 0;
      this.today = `${++this.year}年${(this.month + 1 > 9) ? this.month + 1 : `0${this.month + 1}`}月`;
      this.changeDateTable(this.year, this.month);
    } else {
      this.today = `${this.year}年${(this.month + 1 > 9) ? this.month + 1 : `0${this.month + 1}`}月`;
      this.changeDateTable(this.year, this.month);
    }
  }
}

scss

 .left-cal {
      width: 100%;
      padding-top: 27px;

      .datapicker {
        height: 342px;
        display: flex;
        padding: 0px 28px;
        align-items: center;
        flex-direction: column;

        .datepickTitle {
          display: flex;
          justify-content: center;

          span {
            font-size: 18px;
            font-family: PingFang-SC-Bold;
            outline: none;
            padding: 0px 18px
          }

          i {
            outline: none;
            font-size: 18px;
            padding-left: 5px;
          }
        }

        table {
          width: 100%;
          height: 308px;
          color: #4693FF;
          cursor: pointer;

          tr:first-child {
            text-align: center;
            height: 38px;
            width: 320px;

            td {
              color: #555 !important;
            }
          }

          tr:![在这里插入图片描述](https://img-blog.csdnimg.cn/20190103152015583.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZzeHh6cTUyMQ==,size_16,color_FFFFFF,t_70)not(:first-child) {
            text-align: center;
            height: 38px;
            width: 320px;
          }

          td {
            padding: 3px;
            line-height: 39px;
            color: #005555;
          }
        }
      }
    }

最终效果