只是一个很简单的日历。

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

最终效果