最近项目有个需求是需要做一个工作日历,官方的calender控件不太满足需求,HTML,css和typescript写了一个,修改样式比较简单,效果如下:
html:
<div class="app-common-bg">
<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-riqi" *ngFor="let day of days" [ngClass]="{'currentDay':day.day==active_day}" (click)="change_day(day.day)">
<div style="justify-content: center;align-items: center;font-size: 15px; border: 1px solid white;
border-radius: 27px;
height: 3.2rem;
width: 3.2rem; padding: 4px;" [ngClass]="{'choosedDay':day.choosed}">
<div>{{day.day}}</div>
</div>
</div>
</div>
css:
.app-common-bg{
position: relative;
width: 100%;
}
.calendar-table-item{
padding: 5px;
width: 14.28%;
float: left;
text-align: center;
}
.calendar-table-riqi{
padding: 5px;
width: 14.28%;
float: left;
text-align: center;
}
.workCalendar{
border-radius: 8px;box-shadow: 0 4px 16px rgba(0,0,0,.12);
-webkit-box-shadow: 0 4px 16px rgba(0,0,0,.12);
margin-top: 15rem;padding: 1rem 0;
overflow: hidden;
}
.choosedDay{
color: #07AA67;
background: #EAFBF4;
}
ts:
export class 名称{
all_year = [];
all_month = [];
// 当前年月日
active_day:any;
select_year: any;
select_month: any;
// 指定的年和月的所有日期
days = [];
constructor(){
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);
}
//初始化显示 当前年和月
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 = 1; i < dayOfWeek; i++) {
this.days.push({day:''});
}
//计算一个月有多少天
var daysOfMonth = this.calDays(year, month);
//2. 从1号开始添加li
let day={day:'',choosed:false}
for(var j = 1; j <= daysOfMonth; j++) {
day.day=String(j);
if(j==15){
day.choosed=true 修改日期选中状态
};
this.days.push(day);
day={day:'',choosed:false}
}
}
//返回指定的月份的天数 月份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;
}
}