<script type="text/javascript">
new Vue({
el: ‘#calendar‘,
data: {
currentDay: 1,
currentMonth: 1,
currentYear: 1970,
currentWeek: 1,
days: [],
addDay: [],
},
created: function() {
this.initData(null);
var $this = this;
//请求数据
$.ajax({
url: "这里填接口名称",
type: "POST",
data: {
name: ‘‘,
params: ‘‘
},
dataType: "json",
async: false,
success: function(data) {
console.log(data);
$this.addDay = data;
},
error: function(xhr) {
console.log(xhr);
}
});
},
methods: {
j: function(y, m, d) {
//将传入的参数转换成字符串，作比较
var Y = y.toString();
var M = m < 10 ? ‘0‘ + m : m.toString();
var D = d < 10 ? ‘0‘ + d : d.toString();
//判断日历日期跟数据返回日期做对比
for (var i = 0; i < this.addDay.length; i++) {
if (toData(this.addDay[i][‘日历日期‘]) == (Y + M + D)) {
return true
}
}
function toData(date) { //将时间戳转化成标准的日期格式
if (date == null) {
return "";
}
var ndate = new Date(date);
var Y = ndate.getFullYear();
var M = (ndate.getMonth() + 1 < 10 ? ‘0‘ + (ndate.getMonth() + 1) : ndate.getMonth() + 1);
var D = (ndate.getDate() < 10 ? ‘0‘ + (ndate.getDate()) : ndate.getDate());
ndate = Y + M + D;
return ndate;
}
},
initData: function(cur) {
var date;
if (cur) {
date = new Date(cur);
} else {
date = new Date();
}
this.currentDay = date.getDate();
this.currentYear = date.getFullYear();
this.currentMonth = date.getMonth() + 1;
this.currentWeek = date.getDay(); // 1...6,0
if (this.currentWeek == 0) {
this.currentWeek = 7;
}
var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
// console.log("today:" + str + "," + this.currentWeek);
this.days.length = 0;
// 今天是周日，放在第一行第7个位置，前面6个
for (var i = this.currentWeek - 1; i >= 0; i--) {
var d = new Date(str);
d.setDate(d.getDate() - i);
// console.log("y:" + d.getDate());
this.days.push(d);
}
for (var i = 1; i <= 35 - this.currentWeek; i++) {
var d = new Date(str);
d.setDate(d.getDate() + i);
this.days.push(d);
}
},
pick: function(date) {
alert(this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate()));
},
pickPre: function(year, month) {
// setDate(0); 上月最后一天
// setDate(-1); 上月倒数第二天
// setDate(dx) 参数dx为 上月最后一天的前后dx天
var d = new Date(this.formatDate(year, month, 1));
d.setDate(0);
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
},
pickNext: function(year, month) {
var d = new Date(this.formatDate(year, month, 1));
d.setDate(35);
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
},
pickYear: function(year, month) {
alert(year + "," + month);
},
// 返回 类似 2016-01-02 格式的字符串
formatDate: function(year, month, day) {
var y = year;
var m = month;
if (m < 10) m = "0" + m;
var d = day;
if (d < 10) d = "0" + d;
return y + "-" + m + "-" + d
},
}
});
</script>
