我的简单日历

简单的日历
自己留着以后做日历就方便一些了。

ts

ngOnInit() {
var systemDate = new Date();
this.changeYear = systemDate.getFullYear().toString(); // ±月(点击上下月后的年值)
this.changeMonth = this.transformation((systemDate.getMonth() + 1).toString()); // ±月(点击上下月后的月值)
this.cal_data.todayWeek = (this.calculateWeeks(this.currentYear, this.currentMonth, this.currentDay)).toString(); // 计算该日期星期(获取当前星期X(0-6 , 0代表星期天))
this.previous();//查询上个月
}
// 获取本月方法
calendarData(year, month) {
let arr = [];
this.calculateEmptyGrids(year, month); // 此月1号前空出天数格子
this.currentMonthDays = this.getThisMonthDays(year, month); // 当前月天数
for (var i = 1; i <= this.currentMonthDays; i++) {
let fullDate = year + “-” + this.transformation(month) + “-” + this.transformation(i); // 完整日期
let fullDateText = year + “年” + this.transformation(month) + “月” + this.transformation(i) + “日”; // 完整日期文本(2019年01月01)
let week = this.calculateWeeks(year, month, i.toString()); // 计算该日期星期(获取当前星期X(0-6 , 0代表星期天))
let weekText = “”; // 星期文本
if (week == 0) {
week = 7;
}
switch (week) {
case 1: {
weekText = “星期一”;
break;
}
case 2: {
weekText = “星期二”;
break;
}
case 3: {
weekText = “星期三”;
break;
}
case 4: {
weekText = “星期四”;
break;
}
case 5: {
weekText = “星期五”;
break;
}
case 6: {
weekText = “星期六”;
break;
}
case 7: {
weekText = “星期日”;
break;
}
default: {
weekText = “星期一”;
break;
}
}
let obj = {
id: “”,
fullDate: fullDate, // 完整日期(日历上对应的日期)
year: “”,//年 2019
name: “”,//假期名元旦
day_type: “”,// 日期类型 类型：work表示工作日，holiday表示假期
legal: “”,//是否法定
day: i,
state: “0”, // 0: 无状态, 1: 工作日, 2: 休假
weekText: weekText, // 星期
}
if (this.systemDateTime == fullDate) {
obj.state = “7”; // 0: 无状态, 1: 工作日, 2: 休假，7: 当前日期
}
// 日历数据处理
if (this.calDatas.length != 0) {
this.calDatas.forEach(data => {
if (fullDate == data.day) {
obj.id = this.noNull(data.id);
obj.fullDate = this.noNull(data.fullDate);
obj.year = this.noNull(data.year);
obj.name = this.noNull(data.name);
obj.day_type = this.noNull(data.day_type);
obj.legal = this.noNull(data.legal);
obj.fullDate = this.noNull(data.day); // 完整日期(日历上对应的日期)
}
});
}
arr.push(obj);
}
this.cal_data.days = arr; // 映射到页面
}
//上一年
previousYear() {
let year = parseInt(this.changeYear);
this.changeYear = String(year - 1);
this.previous();
}
//下一年
nextYear() {
let year = parseInt(this.changeYear);
this.changeYear = String(year + 1);
this.previous();
}
// 上一月
previousMouth() {
// this.hideLayer(); // 关闭气泡弹层
let year = parseInt(this.changeYear);
let month = parseInt(this.changeMonth);
if (this.changeMonth == “01”) {
this.changeMonth = “12”;
this.changeYear = (year - 1).toString();
} else {
this.changeMonth = this.transformation((month - 1).toString());
}
this.previous();
}
// 下一月
nextMouth() {
// this.hideLayer(); // 关闭气泡弹层
let year = parseInt(this.changeYear);
let month = parseInt(this.changeMonth);
if (this.changeMonth == “12”) {
this.changeMonth = “01”;
this.changeYear = (year + 1).toString();
} else {
this.changeMonth = this.transformation((month + 1).toString());
}
this.previous();
}

//标记
sign(e, date) {
let id = date.id;
let day = date.fullDate;
let name = date.name;
let legal = date.legal;
if (this.selectedValue == ‘val1’) {//工作日
date.day_type = ‘work’;
} else if (this.selectedValue == ‘val2’) {//休息日
date.day_type = ‘holiday’;
} else {
return
}
let dateParams = { id: id, day: day, year: this.changeYear, name: date.day_type, day_type: date.day_type, legal: legal }
let that = this;
// that.params = [];
that.params.push(dateParams);

}
//保存
update() {
this.isDisabled=true;
this.http.httpPostJson(updateCalList, this.params).subscribe(
data => {
if (data[‘success’] == true) {
if (data[‘responseData’] != null) {
this.isDisabled=false;
this.previous();//查询上个月
this.noticeDisplay=true;
this.msg=“保存成功！”;
this.params = [];
}
}
}
)
}
// 获取考勤日历列表
calendarList() {
this.calDatas = “”; // 清空之前月份数据
let params = { time: this.changeYear + “-” + this.changeMonth };
this.http.httpPostJson(getCalList, params).subscribe(
data => {
if (data[‘success’] == true) {
if (data[‘responseData’] != null) {
console.log(data);
this.calDatas = data[‘responseData’];
this.calendarData(this.changeYear, this.changeMonth); // 将接口数据转换并映射到日历上
}
}
}
)
}

//查询上个月数据
previous() {
let params;
let year;
let month;
if (parseInt(this.changeMonth) == 1) {
month = 12;
year = parseInt(this.changeYear) - 1;
params = { time: year + “-” + month };
} else {
month = parseInt(this.changeMonth) - 1;
month = this.transformation(month);
year = this.changeYear;
params = { time: year + “-” + month };
}
this.http.httpPostJson(getCalList, params).subscribe(
data => {
if (data[‘success’] == true) {
if (data[‘responseData’] != null) {
this.previousDatas = data[‘responseData’];
this.previousDatas.forEach(function (item, i) {
item.day = i + 1;
})
this.next();//下个月
}
}
}
)
}
//查询下个月数据
next() {
let params;
let year;
let month;
if (parseInt(this.changeMonth) == 12) {
month = “01”;
year = parseInt(this.changeYear) + 1;
params = { time: year + “-” + month };
} else {
month = parseInt(this.changeMonth) + 1;
month = this.transformation(month);
year = this.changeYear;
params = { time: year + “-” + month };
}
this.http.httpPostJson(getCalList, params).subscribe(
data => {
if (data[‘success’] == true) {
if (data[‘responseData’] != null) {
this.nextDatas = data[‘responseData’];
this.nextDatas.forEach(function (item, i) {
item.day = i + 1;
})
this.calendarList();
}
}
}
)

}
// 计算当月1号前空了几个格子(上月在本月中显示天数&下月在本月中显示天数)
calculateEmptyGrids(year, month) {
var firstDayOfWeek = this.getFirstDayOfWeek(year, month);
var currentDate = new Date(year, month, 0); // 当前月
var previousDate = new Date(year, month - 1, 0); // 上月
this.changeMonthDays = currentDate.getDate(); // 当前月天数
var previousDays = previousDate.getDate(); // 上月天数
this.cal_data.previousEmpty = []; // 上月在本月中显示天数
this.previousEmptyes = []; // 上月在本月中显示天数
this.cal_data.nextEmpty = []; // 下月在本月中显示天数
if (firstDayOfWeek == 0) {
firstDayOfWeek = 7;
}
if (firstDayOfWeek > 0) {
// 将不渲染的添加进入 previousEmpty 数组
for (let i = 0; i < firstDayOfWeek; i++) {
this.cal_data.previousEmpty.push((previousDays - i).toString()); // 上月在本月中显示天数
}
var nextEmpty = 42 - firstDayOfWeek - this.changeMonthDays; // 下月在本月中显示天数
let arr = [];
for (let i = 0; i < nextEmpty; i++) {
this.cal_data.nextEmpty.push((i + 1).toString());
arr.push(this.nextDatas[i])
}
let length = this.cal_data.previousEmpty.length;
let nextlength = this.cal_data.nextEmpty.length;
let previousEmptyNumber = this.previousDatas.splice(-length);
this.previousEmptyes = previousEmptyNumber;
this.nextEmptyes = arr;
// this.cal_data.previousEmpty = this.cal_data.previousEmpty.reverse();
}
}
// 获取当月第一天星期几，传年和月
getFirstDayOfWeek(year, month) {
return new Date(Date.UTC(year, month - 1, 1)).getDay();
}

// 获取当月共多少天，传年和月
getThisMonthDays(year, month) {
// 通过Date来获取当月天数
return new Date(year, month, 0).getDate();
}

// 计算该日期星期(获取当前星期X(0-6 , 0代表星期天))
calculateWeeks(year, month, day) {
return (new Date(year, month - 1, day)).getDay();
}
// 日期、月份小于10前面加零(个位数转化两位数方法)
transformation(obj) {
obj = parseInt(obj);
return obj < 10 ? ‘0’ + obj : obj;
}
// null或者undefined转换为 “”
noNull(obj) {
if (obj == null || typeof (obj) == “undefined”) return “”;
return obj;
}
html:


css:
/* 头部样式 */
.breadcrumb {
background: #fff;
border-radius: 4px;
line-height: 30px;
}
.work-fa {
font-size: 16px;
color: #e7576f;
}
.tou-span {
font-size: 14px;
color: #43474a;
}
.tou-span-text {
font-size: 14px;
color: #999999;
}
.color-7576 {
color: #e7576f;
}

.ca-white {
background: white;
}

/* .div-i-b {
display: inline-block;
} */

.ca-font32 {
font-size: 32px;
color: #333;
}

.ca-font22 {
font-size: 22px;
color: #333;
}

.cp {
cursor: pointer
}
.ca-text{
padding-left: 15%;
line-height: 30px;
}
.pa0{
padding: 0px;
}
/deep/.ca-text p-radiobutton .ui-radiobutton-label{
font-weight: 500;
}
/* 日历样式 /
.cal-week {
width: 14.2%;
height: 50px;
line-height: 50px;
text-align: center;
display: inline-block;
font-size: 16px;
/ color: #c0c8cd; /
}
.cal-empty-day {
position: relative;
width: 14.14%;
height: 50px;
line-height: 50px;
text-align: center;
display: inline-block;
border-top: 1px solid #c0c8cd;
/ font-size: 24px; /
font-size: 18px;
color: #c0c8cd;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.ca-xiu{
position: absolute;
left: 60px;
top: 5px;
display: block;
width: 16px;
height: 18px;
color: #fff;
background: #e7576f;
/ text-indent: 1px; /
line-height: 18px;
overflow: hidden;
font-size: 12px;
cursor: pointer;
}
.ca-ban{
position: absolute;
left: 60px;
top: 5px;
display: block;
width: 16px;
height: 18px;
color: #fff;
background: #98999b;
/ text-indent: 1px; /
line-height: 18px;
overflow: hidden;
font-size: 12px;
cursor: pointer;
}
.cal-day {
width: 14.14%;
height: 50px;
line-height: 50px;
text-align: center;
display: inline-block;
border-top: 1px solid #c0c8cd;
/ font-size: 24px; /
font-size: 18px;
/ color: #7b8a97; */
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
position: relative;
}

.cal-today {
width: 35px;
height: 35px;
line-height: 35px;
margin: 6px auto;
border-radius: 22px;
border: 2px solid #e7576f;
color: #e7576f !important;
}
.cal-week-colo7576{
color: #e7576f !important;
}
.fz-0 {
font-size: 0
}
/deep/.ca-text p-radiobutton .ui-radiobutton-box .ui-radiobutton-icon {
margin-top: 0px!important;

}
/deep/.ca-text p-radiobutton .ui-state-focus {
-webkit-box-shadow: 0px 0px 5px #d1596f;
box-shadow: 0px 0px 5px #d1596f;

}
/deep/.ca-text p-radiobutton .ui-state-default {
border: 1px solid #000!important;
margin-top: -3px !important;

}