angular ts 开发日程表,周日程/月日程

2023-12-17 17:59

本文主要是介绍angular ts 开发日程表,周日程/月日程,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

angular ts 开发日程表,周日程/月日程

项目基于angular 开发, ui 控件使用 nz-zorro ui NG-ZORRO
实现功能
1.周日程,展示当前周,上一周/下一周切换,显示阴历时间,表格内容按横向当天,纵向时间轴定位,高亮当前日期,时间轴初始化跳转当前时间
在这里插入图片描述

2.月日程,切换月份,高亮当前日期,表格内容按照时间天定位
在这里插入图片描述

所有的css

.task_list {flex: 7;}.time_title {flex: 1;margin: 5px auto;text-align: center;}.time_box {display: flex;align-items: center;justify-content: center;}.time_time {font-size: 15px;font-weight: 500;margin: 0 15px;}table tbody {display: block;max-height: 460px;overflow-y: scroll;}table thead, tbody tr {display: table;width: 100%;table-layout: fixed;}table thead {width: calc(100% - 5px);}.table_task {text-align: center;background-color: #ffffff;width: 100%;border-collapse: collapse;}.t_header_th{background-color: #0e6cf9d6;color: white;border-radius: 8px;}.t_tbody_time{background-color: #0e6cf9d6;color: white;border-radius: 8px;}th {height: 50px;border: 1px #D2D2D282 solid;}td {height: 50px;border: 1px #D2D2D282 solid;}.td_header{border-top:none;border-bottom:none;position: relative;width: 40px;}.t_none_time {height: 12px;}.time_axle{position: absolute;right: 0;left: 0;bottom: -10px;font-size: 12px;}.task_card{display: flex;align-items: stretch;}.task_body{color: white;border-radius: 4px;overflow: auto;font-size: 12px;}.task_color{color: white;cursor: pointer;}.task_card_content{flex: 4;text-align: left;}.task_card_btn{flex: 1;background-color: #7c95ff;}.task_name_box{padding: 1px 3px;}.td_month_height{height: 75px;}.month_day{text-align: left;margin: 2px 5px;}.month_time{color: white;background-color: #368dff;border-radius: 50%;width: 23px;text-align: center;}::-webkit-scrollbar {width: 5px;}::-webkit-scrollbar-thumb {background: #368dff;border-radius: 10px;}::-webkit-scrollbar-track-piece {background: transparent;}

1.周日程

html


<div class="task_list"><div class="flex"><div class="time_title"></div><div class="time_title time_box"><div class="time_time">{{nowTime.year}}年{{nowTime.month}}月</div><nz-button-group [nzSize]="'small'"><button class="button-size" nz-button nzType="primary" [nzSize]="'small'" (click)="dateChangeFn('up')" [nzLoading]="searchLoading"><span nz-icon nzType="left" nzTheme="outline"></span></button><button class="button-size" nz-button nzType="primary" [nzSize]="'small'" (click)="dateChangeFn('down')" [nzLoading]="searchLoading"><span nz-icon nzType="right" nzTheme="outline"></span></button></nz-button-group></div><div class="time_title"><nz-date-picker *ngIf="tableType == 'month'" [(ngModel)]="nowMonth" nzMode="month" [nzSize]="'small'" [nzPlaceHolder]="'选择月份'" (ngModelChange)="getMonthChange('change',$event)"></nz-date-picker><button class="button-size ml-sm mr-sm" nz-button nzType="primary" [nzSize]="'small'" (click)="dateChangeFn('ref')" [nzLoading]="searchLoading">今日</button><nz-radio-group [(ngModel)]="tableType" nzButtonStyle="solid" nzSize="small" (ngModelChange)="dateChangeFn('ref')" ><label style="font-size: 12px" nz-radio-button nzValue="week">周</label><label style="font-size: 12px" nz-radio-button nzValue="month">月</label></nz-radio-group></div></div>
<div style="border: 1px solid #D2D2D282"><!--周日程--><table *ngIf="tableType == 'week'" class="table_task"><thead><tr><th style="text-align: center;width: 40px;background-color: aliceblue;"></th><th *ngFor="let time of headerTime;let index = index" style="text-align: center;font-size: 12px"><div [class.t_header_th]="time.time | taskTimeColor:'day'"><div>{{time.weekName}}</div><div>{{time.dayName}}</div><div>{{time.lunarName}}</div></div></th></tr></thead><tbody id=tbodyCard><tr style="height: 12px;"><td class="td_header t_none_time"><div class="time_axle">00:00</div></td><td colspan="7" style="height: 12px;"></td></tr><tr *ngFor="let trData of borderList; let i = index"><td class="td_header"><div class="time_axle" [class.t_tbody_time]="trData.timeH | taskTimeColor:'time'">{{trData.timeHour}}</div></td><td *ngFor="let td of trData.task; let j = index"><div *ngIf="td.dataList.length>0" class="task_color"><div *ngIf="!td.showMore" class="task_card task_body"><div class="task_card_content" [style]="{ 'background-color':'#8c8c8c' }" (click)="gotoTask(td.dataList[0])"><div class="task_name_box">{{td.dataList[0].TaskTypeName}}</div><div class="task_name_box"><ellipsis length="4" tooltip>{{td.dataList[0].CustomerName}}</ellipsis></div></div><div *ngIf="td.dataList.length>1" class="task_card_btn" (click)="showMoreChange(td)">更多<div><span nz-icon nzType="down" nzTheme="outline"></span></div></div></div><div *ngIf="td.showMore"><div class="task_body" *ngFor="let taskItem of td.dataList; let k = index" style="margin-bottom: 2px;"><div class="task_card_content" [style]="{ 'background-color':'#8c8c8c'}" (click)="gotoTask(taskItem)"><div class="task_name_box">{{taskItem.TaskTypeName}}</div><div class="task_name_box"><ellipsis length="5" tooltip>{{taskItem.CustomerName}}</ellipsis></div></div></div><div *ngIf="td.dataList.length>1" class="task_card_btn task_body"><div (click)="showMoreChange(td)">收起<span nz-icon nzType="up" nzTheme="outline"></span></div></div></div></div></td></tr><tr style="height: 12px;"><td class="td_header t_none_time"></td><td colspan="7" style="height: 12px;"></td></tr></tbody></table><!--月日程--><table *ngIf="tableType == 'month'" class="table_task" ><thead><tr><th *ngFor="let week of monthUseWeek;let indexW = indexW" style="text-align: center;font-size: 12px"><div>周{{week}}</div></th></tr></thead><tbody><tr *ngFor="let trDataM of borderMonthList; let iM = index"><td class="td_month_height" *ngFor="let tdM of trDataM; let jM = index"><div style="height: 100%"><div class="month_day"><div [class.month_time]="tdM.date | taskTimeColor:'day'">{{tdM.day}}</div></div><div *ngIf="!tdM.showMore" class="task_card task_body"><div class="task_card_content" [style]="{ 'background-color':'#8c8c8c' }" (click)="gotoTask(tdM.dataList[0])"><div class="task_name_box">{{tdM.dataList[0]?.TaskTypeName}}</div><div class="task_name_box"><ellipsis length="4" tooltip>{{tdM.dataList[0]?.CustomerName}}</ellipsis></div></div><div *ngIf="tdM.dataList.length>1" class="task_card_btn" (click)="showMoreChange(tdM)">更多<div><span nz-icon nzType="down" nzTheme="outline"></span></div></div></div><div *ngIf="tdM.showMore"><div class="task_body" *ngFor="let taskItem of tdM.dataList; let k = index" style="margin-bottom: 2px;"><div class="task_card_content" [style]="{ 'background-color':'#8c8c8c' }" (click)="gotoTask(taskItem)"><div class="task_name_box">{{taskItem.TaskTypeName}}</div><div class="task_name_box"><ellipsis length="5" tooltip>{{taskItem.CustomerName}}</ellipsis></div></div></div><div *ngIf="tdM.dataList.length>1" class="task_card_btn task_body"><div (click)="showMoreChange(tdM)">收起<span nz-icon nzType="up" nzTheme="outline"></span></div></div></div></div></td></tr></tbody></table>
</div>
</div>

export class TestModalComponent implements OnInit {constructor(private modalHelper: ModalHelper,) { }// allChecked = false;// allCheckedUser = false;// indeterminate = false;// indeterminateUser = false;// checkOptionsOne = [];// checkOptionsUser = [];monthUseWeek:any[] =["日", "一", "二", "三", "四", "五", "六"];count:number=0ngOnInit(): void {// 初始化 -> 创建时间轴 -> 获取周数据for (let i = 1; i <= 24; i++) {let hour = i<10?('0'+i+':'+'00'):(i+':'+'00') //用于构造时间轴展示的时间this.borderList.push({timeHour:hour,timeH:i,task:[{day:'',dataList:[]}]}) //timeH 用于循环插入数据时进行比较的时间}this.getTableHeaderTime(0)}// 获取周数据headerTime:any[]=[];nowTime:any = {year:'', month:''};borderList:any[]=[];getTableHeaderTime(page){let timeWeekNum = weekTime(page)  //  返回一周时间戳,数组结构 ,this.headerTime = timeWeekNum.map(item=>{return {weekName:getWeekNameByTime(item),dayName:new Date(item).getDate(),lunarName:dateLunar(item), // 获取农历time:item,}})this.nowTime = {year:new Date(this.headerTime[3].time).getFullYear(),month:new Date(this.headerTime[3].time).getMonth()+1}// 组装表格内时间轴内容this.borderList = this.borderList.map(item=>{return{timeHour:item.timeHour,timeH:item.timeH,task:this.headerTime.map(i=>{return {day:i.dayName,dataList:[],showMore:false}})}})this.getTaskList(true)}tableType:string = 'week';borderMonthList:any[]=[];searchLoading:boolean = false;taskList:any[] = [];getTaskList(isRefCheck:boolean){// 每次请求前先清空上次查询任务if (this.tableType == 'week'){this.borderList.forEach(item=>{item.task.forEach((j)=>{j.dataList = []})})}if (this.tableType == 'month'){this.borderMonthList.forEach((item)=>{item.forEach(j=>{j.dataList = []j.showMore = false;})})}// 模拟调取接口this.searchLoading = true;setTimeout(()=>{//接口返回数据类型let res = {Data:[{TaskTemplateId:1,TaskTypeName:'任务1',Id:'1',CustomerName:'内容11',DistributionTime:"2022-10-09T09:48:46"},{TaskTemplateId:2,TaskTypeName:'任务2',Id:'2',CustomerName:'内容22',DistributionTime:"2022-10-09T09:48:46"},{TaskTemplateId:2,TaskTypeName:'任务5',Id:'5',CustomerName:'内容55',DistributionTime:"2022-10-09T09:58:46"},{TaskTemplateId:3,TaskTypeName:'任务3',Id:'3',CustomerName:'内容33',DistributionTime:"2023-10-08T10:48:46"},{TaskTemplateId:4,TaskTypeName:'任务4',Id:'4',CustomerName:'内容44',DistributionTime:"2022-10-07T11:48:46"}]}//接口数据处理if(isNotNullOrUndefined(res.Data) && res.Data.length != 0){//总数this.count = res.Data.lengthlet taskListRes = res.Dataif (this.tableType == 'week'){// 周数据,此处将接口返回的数据按照 相同任务 -> 同一时间段 归类taskListRes.forEach((i)=>{let dayI = new Date(i.DistributionTime).getDate()let hourI = new Date(i.DistributionTime).getHours()taskListRes.forEach((j,jIndex)=>{j.Id = j.Id.toString()let dayJ = new Date(j.DistributionTime).getDate()let hourJ = new Date(j.DistributionTime).getHours()if((dayI == dayJ && hourI == hourJ && i.TaskTemplateId == j.TaskTemplateId) && i.Id != j.Id){i.Id = i.Id+','+j.Idi.CustomerName = i.CustomerName+','+j.CustomerNametaskListRes.splice(jIndex, 1);}})})}else if(this.tableType == 'month'){// 月数据,此处将接口返回的数据按照 相同任务 -> 同一天段 归类taskListRes.forEach((i)=>{let dayMI = new Date(i.DistributionTime).getDate()// let hourMI = new Date(i.DistributionTime).getHours()taskListRes.forEach((j,jIndex)=>{let dayMJ = new Date(j.DistributionTime).getDate()// let hourMJ = new Date(j.DistributionTime).getHours()j.Id = j.Id.toString()if((dayMI == dayMJ && i.TaskTemplateId == j.TaskTemplateId) && i.Id != j.Id){i.Id = i.Id+','+j.Idi.CustomerName = i.CustomerName+','+j.CustomerNametaskListRes.splice(jIndex, 1);}})})}this.taskList = taskListResif(isRefCheck){// 刷新勾选框数据// 此处是根据特殊需求对接口返回数据进行去重,遍历出勾选框数据,与日程表无关this.getCheckedList(this.taskList)}if(this.tableType == 'week'){this.taskList.forEach(item=>{let taskDay = new Date(item.DistributionTime).getDate()// let taskTime = format(new Date(item.DistributionTime),DateConstant.FORMAT_TIME)let taskH = new Date(item.DistributionTime).getHours()+1this.borderList.forEach(taskItem=>{if(taskH == taskItem.timeH){taskItem.task.forEach(timeWeek=>{if(taskDay == timeWeek.day){timeWeek.dataList.push(item)}})}})})}else if(this.tableType == 'month'){this.taskList.forEach(item=>{let taskDay = new Date(item.DistributionTime).getDate()let taskMonth = new Date(item.DistributionTime).getMonth()this.borderMonthList.forEach(weekTrItem=>{weekTrItem.forEach((dayItem)=>{let dayTime = new Date(dayItem.date).getDate()let monthTime = new Date(dayItem.date).getMonth()if(taskDay == dayTime && taskMonth == monthTime){dayItem.dataList.push(item)}})})})}this.searchLoading = false;}if(isRefCheck){this.setScrollH()}},1000)}//赋值滚动条高度,根据当前时间将 时间轴置为当前高度// 重新赋值滚动条高度setScrollH(){const nowScrollHeight = document.getElementById('tbodyCard')?.scrollTop;if(isNotNullOrUndefined(nowScrollHeight)){let newHours = new Date().getHours()let scrollHeightTop = newHours*50-200>0?newHours*50-100:0setTimeout(()=>{document.getElementById('tbodyCard').scrollTop = scrollHeightTop},300)}}dateChangeFn(changType){if (this.tableType == 'week'){this.weekChecked(changType)}else if(this.tableType == 'month'){this.getMonthChange(changType)}}currentWeek:number = 0;// 按周切换weekChecked(type){if(type == 'up'){this.currentWeek = this.currentWeek-1}else if (type == 'down'){this.currentWeek = this.currentWeek+1}else if (type == 'ref'){this.currentWeek = 0}this.getTableHeaderTime(this.currentWeek)}// 获取当前月份第一天// 初始化当前月份并记录,月份切换后记录nowMonth:any = format(new Date(), 'yyyy-MM')getMonthChange(type,monthValue?){//type=='now' 初始话当前月,up上一月,down 下一月let nowMonthDate = format(new Date(this.nowMonth), 'yyyy-MM')if (type == 'up'){this.nowMonth = format(new Date(new Date(nowMonthDate).getFullYear(),new Date(nowMonthDate).getMonth() - 1, new Date(nowMonthDate).getDate()),'yyyy-MM')}else if(type == 'down'){this.nowMonth = format(new Date(new Date(nowMonthDate).getFullYear(),new Date(nowMonthDate).getMonth() + 1, new Date(nowMonthDate).getDate()),'yyyy-MM')}else if (type == 'ref'){this.nowMonth = format(new Date(), 'yyyy-MM')}else if (type == 'change'){this.nowMonth = format(monthValue, 'yyyy-MM')}// 表头时间更新this.nowTime = {year:new Date(this.nowMonth).getFullYear(),month:new Date(this.nowMonth).getMonth()+1}let monthDateAll = getMonthList(new Date(this.nowMonth)).map((item)=>{return {date:format(new Date(item), 'yyyy-MM-dd'),day:new Date(item).getDate(),dataList:[],showMore:false}})let newListArr = []for(let i = 0;i<monthDateAll.length;i+=7){newListArr.push(monthDateAll.slice(i,i+7))}this.borderMonthList = newListArrthis.getTaskList(true)}//getCheckedList(taskList){// this.allChecked = false;// this.allCheckedUser = false;// this.indeterminate = false;// this.indeterminateUser = false;// if (isNotNullOrUndefined(taskList) && taskList.length>0){//   this.checkOptionsOne = taskList.map(item=>{//     return {//       value:item.TaskTemplateId,//       label:item.TaskTypeName,//       checked:false//     }//   })//   //去重//   let map = new Map();//   for (let item of this.checkOptionsOne) {//     if (!map.has(item.value)) {//       map.set(item.value, item);//     }//   }//   this.checkOptionsOne = [...map.values()];// }else{//   this.checkOptionsOne = []// }// this.checkOptionsUser = this.checkOptionsUser.map(item=>{//   return {//     value:item.value,//     label:item.label,//     checked:false//   }// })}// 业务处理gotoTask(task){//todo}// 标签内容展开关闭showMoreChange(value){value.showMore = !value.showMore}
}

创建公用方法function

/*** 根据时间戳获取星期* @param time*/
export function getWeekNameByTime(time){if (time){let a = ["日", "一", "二", "三", "四", "五", "六"];let week = new Date(time).getDay();return "周"+ a[week];}return ''
}/***根据时间戳获取农历时间*/
export function dateLunar(time){/**获取农历 start*/let nyear;let nmonth;let nday = -1;let nwday;let nhrs;let nmin;let nsec;let lmonth, lday, lleap; //农历参数let nStr1 = ['', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];let nStr2 = ['初', '十', '廿', '卅', '□'];//辅助函数let NewTick = (time)=> {let noww = new Date(time);if (noww.getDate() != nday) {nyear = noww.getFullYear();nmonth = noww.getMonth() + 1;nwday = noww.getDay();nday = noww.getDate();getlunar(); //获取农历}nhrs = noww.getHours();nmin = noww.getMinutes();nsec = noww.getSeconds();}function Lunar(y, m, d) {let i, leap: number,temp = 0;let offset = (Date.UTC(y, m, d) - Date.UTC(1900, 0, 31)) / 86400000;for (i = 1900; i < 2050 && offset > 0; i++) {temp = lYearDays(i);offset -= temp;}if (offset < 0) {offset += temp;i--;}this.year = i;leap = leapMonth(i);this.isLeap = false;for (i = 1; i < 13 && offset > 0; i++) {if (leap > 0 && i == (leap + 1) && this.isLeap == false) {--i;this.isLeap = true;temp = leapDays(this.year);} else {temp = monthDays(this.year, i);}if (this.isLeap == true && i == (leap + 1)) this.isLeap = false;offset -= temp;}if (offset == 0 && leap > 0 && i == leap + 1) if (this.isLeap) {this.isLeap = false;} else {this.isLeap = true; --i;}if (offset < 0) {offset += temp; --i;}this.month = i;this.day = offset + 1;}function GetcMon(m) {if (m == 1) return '正';else return nStr1[m];}let GetcDay = (d)=> {let s;switch (d) {case 10:s = '初十';break;case 20:s = '二十';break;case 30:s = '三十';break;default:s = nStr2[Math.floor(d / 10)];s += nStr1[d % 10];break;}return (s);}let getlunar = ()=> {let lObj = new Lunar(nyear, nmonth - 1, nday);lmonth = GetcMon(lObj.month);lday = GetcDay(lObj.day);lleap = lObj.isLeap;if (lleap == 1) {lmonth = "闰" + lmonth;}return}//农历函数开始let lunarInfo = [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, 0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, 0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, 0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, 0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, 0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, 0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, 0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, 0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, 0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, //19900x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, 0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, 0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, 0x05aa0, 0x076a3, 0x096d0, 0x04bd7, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, 0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, 0x14b63];function lYearDays(y) {let i, sum = 348;for (i = 0x8000; i > 0x8; i >>= 1) sum += (lunarInfo[y - 1900] & i) ? 1 : 0;return (sum + leapDays(y));}function leapDays(y) {if (leapMonth(y)) return ((lunarInfo[y - 1900] & 0x10000) ? 30 : 29);else return (0);}function leapMonth(y) {return (lunarInfo[y - 1900] & 0xf);}function monthDays(y, m) {return ((lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29);}NewTick(time);return lmonth + "月" + lday;
}/*** 获取一周的时间* @param num num为0时表示当前周,递增或递减时周数也递增或递减, 1 下一周    -1.上一周*/
export function weekTime(num) {let currentFirstDatelet formatDate = (date)=>{// let year = date.getFullYear() + "-";// let month = date.getMonth() + 1 + "-";return date.getTime();}let addDate = (date,n)=>{date.setDate(date.getDate() + n);return date;}let setDateFn = (date)=>{let week = date.getDay();date = addDate(date, week * -1);currentFirstDate = new Date(date);let arr = [];for (let i = 0; i < 7; i++) {let a = formatDate(i == 0 ? date : addDate(date, 1)); //星期一开始arr.push(a);}return arr;}// setDateFn(new Date());return setDateFn(addDate(new Date(), 7 * num));
}/*** 获取到一个月  月表前后补齐天数* @param date*/
export function getMonthList(date){// 获取本月第一天let getMonthDay =(date)=>{date=new Date(date.valueOf())date.setDate(1);return date}// 获取本月最后一天let getMonthLastDay = (date)=>{date=new Date(date.valueOf())date.setMonth(date.getMonth()+1);date.setDate(0);return date}//获取本月的时间对象集合let arr = []// 获取本月第一天let _date = getMonthDay(date)// // 获取本月最后一天let dataLast = getMonthLastDay(date).getDate()arr.push(new Date(_date.valueOf()))// 处理本月第一天 到本月最后一天for (let i = 1; i < dataLast; i++) {_date.setDate(_date.getDate() + 1)arr.push(new Date(_date.valueOf()))}// 向前补全,重置为本月一号_date=getMonthDay(date)let forln=_date.getDay()for(let i=0;i<forln;i++){_date.setDate(_date.getDate()-1)arr.unshift(new Date(_date.valueOf()))}// 向后补全,重置为本月最后一天_date=getMonthLastDay(date)forln=_date.getDay()for(let i=forln;i<6;i++){_date.setDate(_date.getDate()+1)arr.push(new Date(_date.valueOf()))}return arr
}

创建公用管道

import {Pipe, PipeTransform} from '@angular/core';
import {isNotNullOrUndefined} from 'codelyzer/util/isNotNullOrUndefined';@Pipe({name: 'taskTimeColor'
})export class taskTimeColorPipe implements PipeTransform{/***  根据type判断 传入的时间是否为当天 || 当前小时*  value  时间戳 | 时间(小时)*  type 调用类型 天 | 小时*/transform(value: any,type: string): any {if(type == 'day'){if (isNotNullOrUndefined(value)){let day= new Date(value).getDate()let m= new Date(value).getMonth()let y= new Date(value).getFullYear()return day == new Date().getDate() && m ==new Date().getMonth() && y ==new Date().getFullYear();}else{return false;}}else if(type == 'time'){if (isNotNullOrUndefined(value)){let day= new Date().getHours()return day == value;}else{return false;}}return false;}
}

这篇关于angular ts 开发日程表,周日程/月日程的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/505310

相关文章

使用Python开发一个简单的本地图片服务器

《使用Python开发一个简单的本地图片服务器》本文介绍了如何结合wxPython构建的图形用户界面GUI和Python内建的Web服务器功能,在本地网络中搭建一个私人的,即开即用的网页相册,文中的示... 目录项目目标核心技术栈代码深度解析完整代码工作流程主要功能与优势潜在改进与思考运行结果总结你是否曾经

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性,它们用于控制元素周围的空白区域,本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性,用于告诉浏览器某个元素在未来可能会发生哪些变化,本文给大家介绍CSSwill-change属性详解,感... will-change 是一个 css 属性,用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中,去除a标签(超链接)的下划线的几种方法,本文给大家介绍的非常详细,感兴趣的朋友一起看看吧... 在 css 中,去除a标签(超链接)的下划线主要有以下几种方法:使用text-decoration属性通用选择器设置:使用a标签选择器,将tex

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展,CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis

Python基于wxPython和FFmpeg开发一个视频标签工具

《Python基于wxPython和FFmpeg开发一个视频标签工具》在当今数字媒体时代,视频内容的管理和标记变得越来越重要,无论是研究人员需要对实验视频进行时间点标记,还是个人用户希望对家庭视频进行... 目录引言1. 应用概述2. 技术栈分析2.1 核心库和模块2.2 wxpython作为GUI选择的优