之前的CSDN编译器有问题，所以现在重新整理出来给大家。
先po上效果图：
html代码：
<script type="text/x-template" id="calendar">
<div id="">
<!
<div class="month">
<ul>
<!
<li class="arrow" @click="pickPre(currentYear,currentMonth)"></li>
<li class="year-month" @click="pickYear(currentYear,currentMonth)">
<span class="choose-year">{{ currentYear }}</span>
<span class="choose-month">{{ currentMonth }}月</span>
</li>
<li class="arrow" @click="pickNext(currentYear,currentMonth)"></li>
</ul>
</div>
<!
<ul class="weekdays">
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li style="color:red">六</li>
<li style="color:red">日</li>
</ul>
<!
<ul class="days">
<!
<li v-for="dayobject in days">
<!
<!
<span v-if="dayobject.day.getMonth()+1 != currentMonth" class="other-month">{{ dayobject.day.getDate() }}</span>
<!
<span v-else>
<!
<span v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()"
class="active">{{ dayobject.day.getDate() }}</span>
<span v-else>{{ dayobject.day.getDate() }}</span>
</span>
</li>
</ul>
</div>
</script>
<div id="app">
<calendar></calendar>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
js代码：
Vue.component("calendar", {
template: "#calendar",
data: function () {
return {
currentDay: 1,
currentMonth: 1,
currentYear: 1970,
currentWeek: 1,
days: [],
}
},
created() {
let that = this;
that.initData(null);
},
methods: {
initData: function (cur) {
let that = this;
let leftcount = 0;
let date;
if (cur) {
date = new Date(cur);
} else {
let now = new Date();
let d = new Date(that.formatDate(now.getFullYear(), now.getMonth(), 1));
d.setDate(35);
date = new Date(that.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
}
that.currentDay = date.getDate();
that.currentYear = date.getFullYear();
that.currentMonth = date.getMonth() + 1;
that.currentWeek = date.getDay();
if (that.currentWeek == 0) {
that.currentWeek = 7;
}
let str = that.formatDate(that.currentYear, that.currentMonth, that.currentDay);
that.days.length = 0;
for (let i = that.currentWeek - 1; i >= 0; i--) {
let d = new Date(str);
d.setDate(d.getDate() - i);
let dayobject = {};
dayobject.day = d;
that.days.push(dayobject);
}
for (let i = 1; i <= 35 - that.currentWeek; i++) {
let d = new Date(str);
d.setDate(d.getDate() + i);
let dayobject = {};
dayobject.day = d;
that.days.push(dayobject);
}
},
pickPre: function (year, month) {
let that = this;
let d = new Date(that.formatDate(year, month, 1));
d.setDate(0);
that.initData(that.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
},
pickNext: function (year, month) {
let that = this;
let d = new Date(that.formatDate(year, month, 1));
d.setDate(35);
that.initData(that.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
},
pickYear: function (year, month) {
alert(year + "," + month);
},
formatDate: function (year, month, day) {
let y = year;
let m = month;
if (m < 10) m = "0" + m;
let d = day;
if (d < 10) d = "0" + d;
return y + "-" + m + "-" + d
},
}
})
let vm = new Vue({
el: '#app',
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
css代码：
* {
margin: 0;
padding: 0;
}
#calendar {
width: 98%;
border: 2px solid #A4A7B0;
height: 335px;
margin-left: 0.5%;
}
.month {
width: 92%;
height: 48px;
border: 2px solid #FFFFFF;
margin-left: 3%;
margin-top: 20px;
}
.month ul {
margin: 0;
padding: 0;
display: flex;
margin-top: 11px;
justify-content: space-between;
}
.year-month {
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.choose-year {
padding: 0 20px;
font-size: 16px;
font-weight: 200;
}
.choose-month {
text-align: center;
font-size: 16px;
font-weight: 200;
}
.arrow {
width: 3%;
height: 25px;
}
.arrow1 {
background: url(left.png) no-repeat 0 0 /100% 100%;
margin-left: 44px;
}
.arrow2 {
background: url(right.png) no-repeat 0 0 /100% 100%;
margin-right: 44px;
}
.month ul li {
color: #999;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
list-style: none;
}
.weekdays {
margin: 0;
color: #FFFFFF;
background: #A4A7B0;
width: 96.6%;
margin-top: 26px;
height: 34px;
line-height: 34px;
margin-left: 2.2%;
}
.weekdays li {
display: inline-block;
text-align: center;
color: #11616f;
font-size: 14px;
font-weight: 100;
width: 12.7%;
}
.days {
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.days li {
list-style-type: none;
display: inline-block;
width: 14.2%;
text-align: center;
padding-bottom: 3px;
padding-top: 7px;
font-size: 12.78px;
color: rgb(14, 220, 235);
font-weight: 200;
}
.days li span span {
height: 29.5px;
width: 27px;
line-height: 29.5px;
display: inline-block;
}
.days li .class-30 {
background: url(bg_30.png) no-repeat 0 0 /100% 100%;
}
.days li .class-60 {
background: url(bg_60.png) no-repeat 0 0 /100% 100%;
}
.days li .class-3060 {
background: url(bg_3060.png) no-repeat 0 0 /100% 100%;
}
.days li .other-month {
padding: 5px;
color: #84a8ae;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
github地址：https://github.com/AmberWuWu/vue-calendar
原文发布时间：2018年03月13日 10:14:29
原文作者：AmberWu
本文来源CSDN，如需转载请联系原作者
