在开发项目时，需求是在日历上展示有无课程及时间切换；这是写的一个日历组件，方便页面调用，在赋复制代码是需注意图片地址，将报错位置改成你的图片地址即可。 (pc端移动端代码统一贴上，有方法报错的位置可以直接删掉哈(因为有的是调用了父页面的方法删掉就好，接口地址位置更改一下)自己选择食用哈)
废话不多说，直接上实战代码（ 下面两个代码是pc端和移动端）
// personalCalendar.vue (pc端)
<template>
<div id="calendar">
<!-- 年份 月份 -->
<div class="calendar_date flexVerticalCenter">
<div
class="class_course_list_null_des flexCenter"
@click="goToday()"
v-if="
todayDate != currentCourse.time ||
currentCourse.time.split('/')[0] != currentYear ||
currentCourse.time.split('/')[1] != currentMonth
"
>
<img
class="class_course_list_null_des_back_icon"
src="../../assets/images/pc/personalCenter/back_icon.png"
alt=""
/>
返回今天
</div>
<!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
<div
class="calendar_date_arrow_icon_bg flexVerticalCenter"
@click="pickPre(currentYear, currentMonth)"
>
<img
class="calendar_date_arrow_icon"
src="../../assets/images/pc/personalCenter/personalCalendar/arrow_left_icon.png"
alt=""
/>
</div>
<div class="calendar_date_value">
{{ currentYear }}
/
{{ currentMonth >= 10 ? currentMonth : '0' + currentMonth }}
</div>
<div
class="calendar_date_arrow_icon_bg flexVerticalCenter"
@click="pickNext(currentYear, currentMonth)"
>
<img
class="calendar_date_arrow_icon"
src="../../assets/images/pc/personalCenter/personalCalendar/arrow_right_icon.png"
alt=""
/>
</div>
</div>
<div class="calendar_out">
<!-- 星期 -->
<div class="weekday_list flexVerticalCenter">
<div
class="weekday_list_item"
v-for="(item, i) in weekdayList"
:key="i"
>
{{ item }}
</div>
</div>
<!-- 日期 -->
<div class="day_list">
<!--如果不是本月 改变类名加灰色-->
<div
:class="
dayobject.time.split('/')[1] != currentMonth
? 'day_list_item day_list_item_other'
: 'day_list_item'
"
v-for="(dayobject, i) in daysList"
:key="i"
>
<!--如果是本月 还需要判断是不是这一天-->
<!-- 有课 -->
<div
v-if="dayobject.time.split('/')[1] == currentMonth"
class="day_list_item_box"
@click="getCourseNet(dayobject, i)"
>
<!-- @click="toPage(dayobject, i)" -->
<!--今天 同年同月同日-->
<div
v-if="
dayobject.time.split('/')[0] == nowYear &&
dayobject.time.split('/')[1] == nowMonth &&
dayobject.time.split('/')[2] == nowDay
"
class="day_list_item_box_selected day_list_item_box_hover"
>
今
</div>
<div
v-else
:class="
selectCourse == i
? 'day_list_item_box_selected day_list_item_box_hover'
: 'day_list_item_box_hover'
"
>
{{ dayobject.time.split('/')[2] }}
</div>
<div class="day_list_item_box_type_out">
<div
class="day_list_item_box_type blue flexVerticalCenter"
v-if="
dayobject.status == 1 &&
dayobject.courseNet.length > 0 == 1
"
>
录
</div>
<div
class="day_list_item_box_type green flexVerticalCenter"
v-if="
dayobject.status == 0 &&
dayobject.courseNet.length > 0 == 1
"
>
直
</div>
<div
class="flexCenter"
v-if="
dayobject.status == 2 &&
dayobject.courseNet.length > 0 == 1
"
>
<div
class="day_list_item_box_type green flexVerticalCenter"
style="margin-right:8px"
>
直
</div>
<div
class="day_list_item_box_type blue flexVerticalCenter"
>
录
</div>
</div>
</div>
</div>
<!-- 无课 -->
<div
v-if="
dayobject.time.split('/')[1] == currentMonth &&
type == 0
"
class="day_list_item_box"
@click="addTeacher"
>
<div
v-if="
dayobject.time.split('/')[0] == nowYear &&
dayobject.time.split('/')[1] == nowMonth &&
dayobject.time.split('/')[2] == nowDay
"
class="day_list_item_box_selected day_list_item_box_hover"
>
今
</div>
<div
v-else
:class="
selectCourse == i
? 'day_list_item_box_selected day_list_item_box_hover'
: 'day_list_item_box_hover'
"
>
{{ dayobject.time.split('/')[2] }}
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentDay: 1,
currentMonth: 1,
currentYear: 1970,
currentWeek: 1,
days: [],
nowYear: '',
nowMonth: '',
nowDay: '',
weekdayList: ['日', '一', '二', '三', '四', '五', '六'],
daysList: [],
currentCourse: {},
selectCourse: -1,
todayDate: '',
splitType: '/'
}
},
created: function() {
// 在vue初始化时调用
var now = new Date()
this.todayDate = this.formatDate(
now.getFullYear(),
now.getMonth() + 1,
now.getDate()
)
this.getDate(this.formatDate(now.getFullYear(), now.getMonth() + 1, 1))
this.nowYear = new Date().getFullYear()
if (this.nowYear <= 9) {
this.nowYear = '0' + this.nowYear
}
this.nowMonth = new Date().getMonth() + 1
if (this.nowMonth <= 9) {
this.nowMonth = '0' + this.nowMonth
}
this.nowDay = new Date().getDate()
if (this.nowDay <= 9) {
this.nowDay = '0' + this.nowDay
}
this.getWeekDay()
sessionStorage.removeItem('selectCourse')
},
methods: {
goToday() {
var now = new Date()
this.getDate(
this.formatDate(now.getFullYear(), now.getMonth() + 1, 1)
)
},
getWeekDay() {
var weekNum
if (new Date().getDay() == 0) weekNum = '日'
if (new Date().getDay() == 1) weekNum = '一'
if (new Date().getDay() == 2) weekNum = '二'
if (new Date().getDay() == 3) weekNum = '三'
if (new Date().getDay() == 4) weekNum = '四'
if (new Date().getDay() == 5) weekNum = '五'
if (new Date().getDay() == 6) weekNum = '六'
this.weekNum = weekNum
},
// 传值给course页面
toPage(courseNet) {
// console.log(courseNet, 'topage')
this.$router.push({
path: '/courseDetails',
query: { courseNet: courseNet }
})
var item = { id: 3, title: '课程', name: 'study' }
this.$parent.changeNavIndex(item)
sessionStorage.tabIndex = 2
},
getCourseNet(courseNet, selectCourse) {
// alert(el)
this.selectCourse = selectCourse
var obejct = {}
obejct.time = courseNet.time
obejct.selectCourse = selectCourse
sessionStorage.setItem('selectCourse', JSON.stringify(obejct))
this.currentCourse = courseNet
this.$parent.getCourseNet(courseNet)
},
addTeacher() {
this.$parent.addTeacher()
},
//查询课表时间
async getDate(date) {
var params = new URLSearchParams()
params.append('time', date)
const { data: res } = await this.$http.post(
'查询日历的接口',
params
)
this.days = res.data.list
this.type = res.data.type
// var list = []
// list = this.days
for (var i = 0; i < this.days.length; i++) {
var time = this.days[i].time.replace(/-/g, this.splitType)
this.days[i].time = time
}
if (this.days.length > 0) {
if (
this.days[0].time.split('/')[1] ==
new Date().getMonth() + 1 &&
this.days[0].time.split('/')[0] == new Date().getFullYear()
) {
this.getCourseNet(this.days[new Date().getDate() - 1])
}
this.days.forEach((item, i) => {
var courseNet = this.days[i].courseNet
var live = 0
var record = 0
var liveRecord = 0
var status = 0
for (var j = 0; j < courseNet.length; j++) {
// status 0 首页课程 1 录播课程 2 直播回放 3 录播阶段课程 4 直播阶段课程
var state = courseNet[j].state
if (state == 2 || state == 4) {
live = 1
}
if (state == 1 || state == 3 || state == 0) {
record = 1
}
status = courseNet[j].status
if (status == 0) {
live = 1
}
if (status == 1) {
record = 1
}
// status 0 直播 1录播 2 直播+录播
if (j == courseNet.length - 1) {
if (live == 1 && record == 1) {
liveRecord = 1
}
if (live == 1) {
status = 0
}
if (record == 1) {
status = 1
}
if (liveRecord == 1) {
status = 2
}
this.days[i].status = status
}
}
})
}
if (this.days.length == 0) {
this.initData2(date)
} else {
this.initData(date)
}
},
initData: function(cur) {
var date
if (cur) {
date = new Date(cur)
} else {
var now = new Date()
var d = new Date(
this.formatDate(now.getFullYear(), now.getMonth(), 1)
)
d.setDate(42)
date = new Date(
this.formatDate(d.getFullYear(), d.getMonth() + 1, 1)
)
}
this.currentDay = date.getDate() + 1
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
)
// this.days.length = 0
// 初始化本周
// 今天是周日，放在第一行第7个位置，前面6个
// for (var i = this.currentWeek; i >= 0; i--) {
// 今天是周日，放在第一行第1个位置，后面6个
var initdays = []
var initdaysList = []
for (var i = this.currentWeek + 1; i >= 0; i--) {
var d2 = new Date(str)
d2.setDate(d2.getDate() - i)
var dayobjectSelf = {} // 用一个对象包装Date对象 以便为以后预定功能添加属性
dayobjectSelf.time = this.formatDate(
d2.getFullYear(),
d2.getMonth() + 1,
d2.getDate()
)
// 定位当月1号是星期几
if (dayobjectSelf.time.split('/')[1] == str.split('/')[1]) {
// var index = this.currentWeek + 1 - i
} else {
initdays.push(dayobjectSelf)
initdaysList.push(dayobjectSelf)
}
}
//将接口返回的月份天数数据加入到daysList数组去
for (var k = 0; k < this.days.length; k++) {
var object = {}
// if (k <= this.days.length - 1) {
object = this.days[k]
// }
initdaysList.push(object)
this.daysList = initdaysList
// initdaysList.push(object)
// this.daysList = initdaysList
// 判断当月1号是否为星期日 不是则判断当月1号所在的星期前面有几天
// if (k < this.days.length) {
// // k小于days数组长度时并且当月1号不是星期日 将接口返回月份天数加入到initdaysList数组中
// if (initdays.length < 7) {
// initdaysList.push(object)
// }
// } else if (k == this.days.length) {
// if (initdays.length < 7) {
// // k等于days数组长度时并且当月1号不是星期日 则将initdaysList数组赋值给daysList数组
// this.daysList = initdaysList
// } else {
// // 当月1号是星期日 daysList数组就是接口返回的月份天数
// this.daysList = this.days
// }
// }
}
// 其他周
// 周日，放在第一行第7个位置，前面6个
// for (var j = 1; j <= 41 - this.currentWeek; j++) {
// 周日，放在第一行第1个位置，后面6个
// for (var j = 1; j <= 40 - this.currentWeek; j++) {
// var d3 = new Date(str)
// d3.setDate(
// d3.getDate() + j + this.days.length - initdays.length + 1
// )
// var dayobjectOther = {}
// dayobjectOther.time = this.formatDate(
// d3.getFullYear(),
// d3.getMonth() + 1,
// d3.getDate()
// )
// if (this.daysList.length < 42) {
// this.daysList.push(dayobjectOther)
// }
// }
},
initData2: function(cur) {
// var leftcount = 0 // 存放剩余数量
var date
if (cur) {
date = new Date(cur)
} else {
var now = new Date()
var d = new Date(
this.formatDate(now.getFullYear(), now.getMonth(), 1)
)
d.setDate(42)
date = new Date(
this.formatDate(d.getFullYear(), d.getMonth() + 1, 1)
)
}
this.currentDay = date.getDate() + 1
if (this.currentDay > 0 && this.currentDay <= 9) {
this.currentDay = '0' + this.currentDay
}
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
)
this.daysList.length = 0
// 今天是周日，放在第一行第7个位置，前面6个
// 初始化本周
for (var i = this.currentWeek + 1; i >= 0; i--) {
var d2 = new Date(str)
d2.setDate(d2.getDate() - i)
var dayobjectSelf = {} // 用一个对象包装Date对象 以便为以后预定功能添加属性
dayobjectSelf.time = this.formatDate(
d2.getFullYear(),
d2.getMonth() + 1,
d2.getDate()
)
this.daysList.push(dayobjectSelf) // 将日期放入data 中的days数组 供页面渲染使用
}
// 其他周
for (var j = 1; j <= 41 - this.currentWeek; j++) {
var d3 = new Date(str)
d3.setDate(d3.getDate() + j)
var dayobjectOther = {}
dayobjectOther.time = this.formatDate(
d3.getFullYear(),
d3.getMonth() + 1,
d3.getDate()
)
this.daysList.push(dayobjectOther)
}
},
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.getDate(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
if (JSON.parse(sessionStorage.getItem('selectCourse'))) {
if (
d.getMonth() + 1 ==
JSON.parse(
sessionStorage.getItem('selectCourse')
).time.split('/')[1]
) {
this.selectCourse = JSON.parse(
sessionStorage.getItem('selectCourse')
).selectCourse
} else {
this.selectCourse = -1
}
}
// 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(42)
this.getDate(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
if (JSON.parse(sessionStorage.getItem('selectCourse'))) {
if (
d.getMonth() + 1 ==
JSON.parse(
sessionStorage.getItem('selectCourse')
).time.split('/')[1]
) {
this.selectCourse = JSON.parse(
sessionStorage.getItem('selectCourse')
).selectCourse
} else {
this.selectCourse = -1
}
}
// this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
},
// 返回 类似 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>
<style lang="scss" scoped>
#calendar {
width: 734px;
height: 779px;
background: #ffffff;
position: relative;
.calendar_date {
width: 100%;
height: 76px;
position: relative;
border-bottom: 1px solid #f5f5f5;
.class_course_list_null_des {
font-size: 18px;
font-weight: 400;
color: #4d4dd9;
position: absolute;
left: 24px;
top: 24px;
cursor: pointer;
.class_course_list_null_des_back_icon {
width: 9px;
height: 15px;
margin-right: 4px;
}
}
.calendar_date_value {
font-size: 20px;
font-weight: bold;
color: #2d2e33;
padding: 0 60px;
}
.calendar_date_arrow_icon_bg {
width: 31px;
height: 31px;
background: #f5f5f5;
border-radius: 50%;
cursor: pointer;
.calendar_date_arrow_icon {
width: 9px;
height: 15px;
}
}
}
.calendar_out {
width: 100%;
height: 702px;
padding: 0 18px 30px 19px;
box-sizing: border-box;
.weekday_list {
width: 100%;
height: 76px;
.weekday_list_item {
width: 91px;
font-size: 18px;
font-weight: bold;
color: #2d2e33;
text-align: center;
margin-right: 10px;
}
.weekday_list_item:last-child {
margin: 0;
}
}
.day_list {
margin: 0;
display: flex;
flex-wrap: wrap;
overflow: hidden;
.day_list_item {
width: 91px;
height: 91px;
background: #f8f8ff;
position: relative;
margin: 0 10px 10px 0;
.day_list_item_box {
width: 100%;
height: 100%;
font-size: 18px;
font-weight: 400;
color: #2d2e33;
position: relative;
cursor: pointer;
padding: 10px 6px 8px 6px;
box-sizing: border-box;
.day_list_item_box_type_out {
position: absolute;
bottom: 8px;
left: 8px;
.day_list_item_box_type {
width: 30px;
height: 30px;
border-radius: 50%;
font-size: 14px;
font-weight: 400;
color: #ffffff;
}
.blue {
background: #634df8;
}
.green {
background: #0dc26e;
}
}
}
.day_list_item_box:hover {
.day_list_item_box_hover {
width: 100%;
height: 100%;
background: #f8f8ff;
border: 2px solid #634df8;
padding: 8px 4px 6px 4px;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
}
}
.day_list_item_box_selected {
width: 100%;
height: 100%;
background: #f8f8ff;
border: 2px solid #634df8;
padding: 8px 4px 6px 4px;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
}
}
.day_list_item:nth-child(7) {
margin: 0 0 10px 0;
}
.day_list_item:nth-child(14) {
margin: 0 0 10px 0;
}
.day_list_item:nth-child(21) {
margin: 0 0 10px 0;
}
.day_list_item:nth-child(28) {
margin: 0 0 10px 0;
}
.day_list_item:nth-child(35) {
margin: 0 0 10px 0;
}
.day_list_item:nth-child(42) {
margin: 0 0 10px 0;
}
.day_list_item_other {
background: transparent;
}
}
}
}
.split_line {
width: 384px;
height: 0px;
border: 1px solid #e4e4e9;
margin: 14px 0 16px;
}
.course_info {
width: 384px;
height: 76px;
background: #f8f8f8;
padding: 12px 30px;
box-sizing: border-box;
.course_info_details {
color: #191919;
font-size: 18px;
font-weight: bold;
margin-bottom: 6px;
display: flex;
align-items: center;
.marRt17 {
margin-right: 17px;
}
.course_info_details_icon {
width: 48px;
height: 22px;
line-height: 22px;
text-align: center;
background: #2daa42;
border-radius: 4px;
color: #ffffff;
font-size: 14px;
}
.course_info_details_des {
color: #9b9b9b;
font-size: 15px;
}
}
.course_info_details:last-child {
color: #9b9b9b;
font-size: 15px;
margin-bottom: 0;
font-weight: 400;
}
}
</style>
// mobliePersonalCalendar.vue (移动端)
<template>
<div id="calendar">
<!-- 年份 月份 -->
<div class="calendar_date flexVerticalCenter">
<!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
<div
class="calendar_date_arrow_icon_bg flexVerticalCenter"
@click="pickPre(currentYear, currentMonth)"
>
<img
class="calendar_date_arrow_icon"
src="../../assets/images/pc/personalCenter/personalCalendar/arrow_left_icon.png"
alt=""
/>
</div>
<div class="calendar_date_value">
{{ currentYear }}
/
{{ currentMonth >= 10 ? currentMonth : '0' + currentMonth }}
</div>
<div
class="calendar_date_arrow_icon_bg flexVerticalCenter"
@click="pickNext(currentYear, currentMonth)"
>
<img
class="calendar_date_arrow_icon"
src="../../assets/images/pc/personalCenter/personalCalendar/arrow_right_icon.png"
alt=""
/>
</div>
</div>
<div class="calendar_out">
<!-- 星期 -->
<div class="weekday_list flexVerticalCenter">
<div
class="weekday_list_item"
v-for="(item, i) in weekdayList"
:key="i"
>
{{ item }}
</div>
</div>
<!-- 日期 -->
<div class="day_list">
<!--如果不是本月 改变类名加灰色-->
<div
:class="
dayobject.time.split('/')[1] != currentMonth
? 'day_list_item day_list_item_other'
: 'day_list_item'
"
v-for="(dayobject, i) in daysList"
:key="i"
>
<!--如果是本月 还需要判断是不是这一天-->
<!-- 有课 -->
<div
v-if="dayobject.time.split('/')[1] == currentMonth"
class="day_list_item_box"
@click="getCourseNet(dayobject, i)"
>
<!-- @click="toPage(dayobject, i)" -->
<!--今天 同年同月同日-->
<div
v-if="
dayobject.time.split('/')[0] == nowYear &&
dayobject.time.split('/')[1] == nowMonth &&
dayobject.time.split('/')[2] == nowDay
"
class="day_list_item_box_selected day_list_item_box_hover"
>
今
</div>
<div
v-else
:class="
selectCourse == i
? 'day_list_item_box_selected day_list_item_box_hover'
: 'day_list_item_box_hover'
"
>
{{ dayobject.time.split('/')[2] }}
</div>
<div
class="day_list_item_box_type_out"
style="display:flex"
>
<div
class="day_list_item_box_type blue flexVerticalCenter"
v-if="
dayobject.status == 1 &&
dayobject.courseNet.length > 0 == 1
"
>
录
</div>
<div
class="day_list_item_box_type green flexVerticalCenter"
v-if="
dayobject.status == 0 &&
dayobject.courseNet.length > 0 == 1
"
>
直
</div>
<div
class="flexCenter"
v-if="
dayobject.status == 2 &&
dayobject.courseNet.length > 0 == 1
"
>
<div
class="day_list_item_box_type green flexVerticalCenter"
style="margin-right:8px"
>
直
</div>
<div
class="day_list_item_box_type blue flexVerticalCenter"
>
录
</div>
</div>
</div>
</div>
<!-- 无课 -->
<div
v-if="
dayobject.time.split('/')[1] == currentMonth &&
type == 0
"
class="day_list_item_box"
@click="addTeacher"
>
<div
v-if="
dayobject.time.split('/')[0] == nowYear &&
dayobject.time.split('/')[1] == nowMonth &&
dayobject.time.split('/')[2] == nowDay
"
class="day_list_item_box_selected day_list_item_box_hover"
>
今
</div>
<div
v-else
:class="
selectCourse == i
? 'day_list_item_box_selected day_list_item_box_hover'
: 'day_list_item_box_hover'
"
>
{{ dayobject.time.split('/')[2] }}
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentDay: 1,
currentMonth: 1,
currentYear: 1970,
currentWeek: 1,
days: [],
nowYear: '',
nowMonth: '',
nowDay: '',
weekdayList: ['日', '一', '二', '三', '四', '五', '六'],
daysList: [],
currentCourse: {},
selectCourse: -1,
splitType: '/'
}
},
created: function() {
// 在vue初始化时调用
var now = new Date()
this.getDate(this.formatDate(now.getFullYear(), now.getMonth() + 1, 1))
this.nowYear = new Date().getFullYear()
if (this.nowYear <= 9) {
this.nowYear = '0' + this.nowYear
}
this.nowMonth = new Date().getMonth() + 1
if (this.nowMonth <= 9) {
this.nowMonth = '0' + this.nowMonth
}
this.nowDay = new Date().getDate()
if (this.nowDay <= 9) {
this.nowDay = '0' + this.nowDay
}
this.getWeekDay()
sessionStorage.removeItem('selectCourse')
},
methods: {
goToday() {
var now = new Date()
this.getDate(
this.formatDate(now.getFullYear(), now.getMonth() + 1, 1)
)
},
getWeekDay() {
var weekNum
if (new Date().getDay() == 0) weekNum = '日'
if (new Date().getDay() == 1) weekNum = '一'
if (new Date().getDay() == 2) weekNum = '二'
if (new Date().getDay() == 3) weekNum = '三'
if (new Date().getDay() == 4) weekNum = '四'
if (new Date().getDay() == 5) weekNum = '五'
if (new Date().getDay() == 6) weekNum = '六'
this.weekNum = weekNum
},
// 传值给course页面
toPage(courseNet) {
// console.log(courseNet, 'topage')
this.$router.push({
path: '/courseDetails',
query: { courseNet: courseNet }
})
var item = { id: 3, title: '课程', name: 'study' }
this.$parent.changeNavIndex(item)
sessionStorage.tabIndex = 2
},
getCourseNet(courseNet, selectCourse) {
// alert(el)
this.selectCourse = selectCourse
var obejct = {}
obejct.time = courseNet.time
obejct.selectCourse = selectCourse
sessionStorage.setItem('selectCourse', JSON.stringify(obejct))
this.$parent.getCourseNet(courseNet)
},
addTeacher() {
this.$parent.addTeacher()
},
//查询课表时间
async getDate(date) {
var params = new URLSearchParams()
params.append('time', date)
const { data: res } = await this.$http.post(
'查询日历的接口',
params
)
this.days = res.data.list
this.type = res.data.type
// var list = []
// list = this.days
for (var i = 0; i < this.days.length; i++) {
var time = this.days[i].time.replace(/-/g, this.splitType)
this.days[i].time = time
}
if (this.days.length > 0) {
if (
this.days[0].time.split('/')[1] ==
new Date().getMonth() + 1 &&
this.days[0].time.split('/')[0] == new Date().getFullYear()
) {
this.getCourseNet(this.days[new Date().getDate() - 1])
}
this.days.forEach((item, i) => {
var courseNet = this.days[i].courseNet
var live = 0
var record = 0
var liveRecord = 0
var status = 0
for (var j = 0; j < courseNet.length; j++) {
// status 0 首页课程 1 录播课程 2 直播回放 3 录播阶段课程 4 直播阶段课程
var state = courseNet[j].state
if (state == 2 || state == 4) {
live = 1
}
if (state == 1 || state == 3 || state == 0) {
record = 1
}
status = courseNet[j].status
if (status == 0) {
live = 1
}
if (status == 1) {
record = 1
}
// status 0 直播 1录播 2 直播+录播
if (j == courseNet.length - 1) {
if (live == 1 && record == 1) {
liveRecord = 1
}
if (live == 1) {
status = 0
}
if (record == 1) {
status = 1
}
if (liveRecord == 1) {
status = 2
}
this.days[i].status = status
}
}
})
}
if (this.days.length == 0) {
this.initData2(date)
} else {
this.initData(date)
}
},
initData: function(cur) {
var date
if (cur) {
date = new Date(cur)
} else {
var now = new Date()
var d = new Date(
this.formatDate(now.getFullYear(), now.getMonth(), 1)
)
d.setDate(42)
date = new Date(
this.formatDate(d.getFullYear(), d.getMonth() + 1, 1)
)
}
this.currentDay = date.getDate() + 1
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
)
// this.days.length = 0
// 初始化本周
// 今天是周日，放在第一行第7个位置，前面6个
// for (var i = this.currentWeek; i >= 0; i--) {
// 今天是周日，放在第一行第1个位置，后面6个
var initdays = []
var initdaysList = []
for (var i = this.currentWeek + 1; i >= 0; i--) {
var d2 = new Date(str)
d2.setDate(d2.getDate() - i)
var dayobjectSelf = {} // 用一个对象包装Date对象 以便为以后预定功能添加属性
dayobjectSelf.time = this.formatDate(
d2.getFullYear(),
d2.getMonth() + 1,
d2.getDate()
)
// 定位当月1号是星期几
if (dayobjectSelf.time.split('/')[1] == str.split('/')[1]) {
// var index = this.currentWeek + 1 - i
} else {
initdays.push(dayobjectSelf)
initdaysList.push(dayobjectSelf)
}
}
//将接口返回的月份天数数据加入到daysList数组去
for (var k = 0; k < this.days.length; k++) {
var object = {}
// if (k <= this.days.length - 1) {
object = this.days[k]
// }
initdaysList.push(object)
this.daysList = initdaysList
// initdaysList.push(object)
// this.daysList = initdaysList
// 判断当月1号是否为星期日 不是则判断当月1号所在的星期前面有几天
// if (k < this.days.length) {
// // k小于days数组长度时并且当月1号不是星期日 将接口返回月份天数加入到initdaysList数组中
// if (initdays.length < 7) {
// initdaysList.push(object)
// }
// } else if (k == this.days.length) {
// if (initdays.length < 7) {
// // k等于days数组长度时并且当月1号不是星期日 则将initdaysList数组赋值给daysList数组
// this.daysList = initdaysList
// } else {
// // 当月1号是星期日 daysList数组就是接口返回的月份天数
// this.daysList = this.days
// }
// }
}
// 其他周
// 周日，放在第一行第7个位置，前面6个
// for (var j = 1; j <= 41 - this.currentWeek; j++) {
// 周日，放在第一行第1个位置，后面6个
// for (var j = 1; j <= 40 - this.currentWeek; j++) {
// var d3 = new Date(str)
// d3.setDate(
// d3.getDate() + j + this.days.length - initdays.length + 1
// )
// var dayobjectOther = {}
// dayobjectOther.time = this.formatDate(
// d3.getFullYear(),
// d3.getMonth() + 1,
// d3.getDate()
// )
// if (this.daysList.length < 42) {
// this.daysList.push(dayobjectOther)
// }
// }
},
initData2: function(cur) {
// var leftcount = 0 // 存放剩余数量
var date
if (cur) {
date = new Date(cur)
} else {
var now = new Date()
var d = new Date(
this.formatDate(now.getFullYear(), now.getMonth(), 1)
)
d.setDate(42)
date = new Date(
this.formatDate(d.getFullYear(), d.getMonth() + 1, 1)
)
}
this.currentDay = date.getDate() + 1
if (this.currentDay > 0 && this.currentDay <= 9) {
this.currentDay = '0' + this.currentDay
}
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
)
this.daysList.length = 0
// 今天是周日，放在第一行第7个位置，前面6个
// 初始化本周
for (var i = this.currentWeek + 1; i >= 0; i--) {
var d2 = new Date(str)
d2.setDate(d2.getDate() - i)
var dayobjectSelf = {} // 用一个对象包装Date对象 以便为以后预定功能添加属性
dayobjectSelf.time = this.formatDate(
d2.getFullYear(),
d2.getMonth() + 1,
d2.getDate()
)
this.daysList.push(dayobjectSelf) // 将日期放入data 中的days数组 供页面渲染使用
}
// 其他周
for (var j = 1; j <= 41 - this.currentWeek; j++) {
var d3 = new Date(str)
d3.setDate(d3.getDate() + j)
var dayobjectOther = {}
dayobjectOther.time = this.formatDate(
d3.getFullYear(),
d3.getMonth() + 1,
d3.getDate()
)
this.daysList.push(dayobjectOther)
}
},
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.getDate(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
if (JSON.parse(sessionStorage.getItem('selectCourse'))) {
if (
d.getMonth() + 1 ==
JSON.parse(
sessionStorage.getItem('selectCourse')
).time.split('/')[1]
) {
this.selectCourse = JSON.parse(
sessionStorage.getItem('selectCourse')
).selectCourse
} else {
this.selectCourse = -1
}
}
// 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(42)
this.getDate(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
if (JSON.parse(sessionStorage.getItem('selectCourse'))) {
if (
d.getMonth() + 1 ==
JSON.parse(
sessionStorage.getItem('selectCourse')
).time.split('/')[1]
) {
this.selectCourse = JSON.parse(
sessionStorage.getItem('selectCourse')
).selectCourse
} else {
this.selectCourse = -1
}
}
// this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
},
// 返回 类似 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>
<style lang="scss" scoped>
#calendar {
width: 100%;
height: 426px;
background: #ffffff;
position: relative;
.calendar_date {
width: 100%;
height: 62px;
position: relative;
border-bottom: 1px solid #f5f5f5;
.calendar_date_value {
font-size: 16px;
font-weight: bold;
color: #2d2e33;
padding: 0 16px;
}
.calendar_date_arrow_icon_bg {
width: 20px;
height: 20px;
background: #f5f5f5;
border-radius: 50%;
cursor: pointer;
.calendar_date_arrow_icon {
width: 6px;
height: 10px;
}
}
}
.calendar_out {
width: 100%;
height: 363px;
padding: 0 15px 24px;
box-sizing: border-box;
.weekday_list {
width: 100%;
height: 42px;
.weekday_list_item {
width: 91px;
font-size: 15px;
font-weight: bold;
color: #2d2e33;
text-align: center;
margin-right: 10px;
}
.weekday_list_item:last-child {
margin: 0;
}
}
.day_list {
margin: 0;
display: flex;
flex-wrap: wrap;
overflow: hidden;
.day_list_item {
width: 13%;
height: 45px;
background: #f8f8ff;
position: relative;
margin: 0 1.2% 6px 0;
.day_list_item_box {
width: 100%;
height: 100%;
font-size: 12px;
font-weight: 400;
color: #2d2e33;
position: relative;
cursor: pointer;
padding: 5px;
box-sizing: border-box;
.day_list_item_box_type_out {
position: absolute;
bottom: 5px;
left: 5px;
.day_list_item_box_type {
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 8px;
font-weight: 400;
color: #ffffff;
}
.blue {
background: #634df8;
}
.green {
background: #0dc26e;
}
.day_list_item_box_type:nth-child(1) {
margin-right: 3px;
}
}
}
.day_list_item_box:hover {
.day_list_item_box_hover {
width: 100%;
height: 100%;
background: #f8f8ff;
border: 2px solid #634df8;
padding: 5px;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
}
}
.day_list_item_box_selected {
width: 100%;
height: 100%;
background: #f8f8ff;
border: 2px solid #634df8;
padding: 5px;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
}
}
.day_list_item:nth-child(7) {
margin: 0 0 6px 0;
}
.day_list_item:nth-child(14) {
margin: 0 0 6px 0;
}
.day_list_item:nth-child(21) {
margin: 0 0 6px 0;
}
.day_list_item:nth-child(28) {
margin: 0 0 6px 0;
}
.day_list_item:nth-child(35) {
margin: 0 0 6px 0;
}
.day_list_item:nth-child(42) {
margin: 0 0 6px 0;
}
.day_list_item_other {
background: transparent;
}
}
}
}
</style>
在页面引用写好的日历组件，如下：
// pc端
import personalCalendar from '@/components/pc/personalCalendar'
export default {
components: {
personalCalendar
},
}
// 移动端
import mobliePersonalCalendar from '@/components/mobile/mobliePersonalCalendar.vue'
export default {
components: {
mobliePersonalCalendar
}
}pc端效果图：
移动端效果图：
为了你们方便，浅浅的贴一下查询日历的接口后台返回的格式
有不懂的欢迎留言为你解答
扫一扫
2554
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
