vue 日程日历组件应用
一般涉及后台系统 或者移动端 都比较普遍,习惯性使用 插件什么的 ,说实话 个人比较自写组件 ,不显得臃肿, 就阔以完成所需要的 应用快速 bug不在 工作量降低 上传一段组件吧<template><div class="cal-wrapper"><div class="cal-header
·
一般涉及后台系统 或者移动端 都比较普遍,习惯性使用 插件什么的 ,说实话 个人比较自写组件 ,不显得臃肿, 就阔以完成所需要的 应用快速 bug不在 工作量降低
上传一段组件吧
<template>
<div class="cal-wrapper">
<div class="cal-header">
<div class="l">考勤日历</div>
<div class="r">
<div class="iconfont icon-jiantouleft icon" @click="preMonth"></div>
<div class="title icon">{{curYearMonth}}</div>
<div class="iconfont icon-jiantouright icon" @click="nextMonth"></div>
</div>
</div>
<div class="cal-body">
<div class="weeks">
<span v-for="(dayName, dayIndex) in dayNames" :key="dayIndex" :style="`width:${100/dayNames.length}%;`">
{{dayName}}
</span>
</div>
<div class="dates">
<div v-for="(date,index) in dayList" :key="index" :style="bgColor(date)" :class="[{ today: date.status ? (today == date.date) : false,event:date.status ? date.type : false}]" @click="unusualFunc(date)">
<p class="date-num" :style="`color:${date.type?'#fff':date.status?'#74797b':'#b0b3b4'};`">{{date.date.split('/')[2]}}</p>
<span>{{date.desc}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
calendar: {
type: Object,
required: true
},
events: {
type: Array,
required: true
}
},
data() {
return {
emptyText,
dayNames,
showUnusual: false,
tableData: [],
worknData: [],
currentDay: "",
checkDate: ""
};
},
methods: {
nextMonth() {
this.$emit("month-changed", "next");
},
preMonth() {
this.$emit("month-changed", "pre");
},
bgColor(date) {
// 1 迟到 #f68787 2 未打卡 #56bff5 3 早退 #edb55d
let bg =
date.type == 1
? "#f68787"
: date.type == 2 ? "#56bff5" : date.type == 3 ? "#edb55d" : "#fff";
return `width:${100 / 7}%;background:${bg};color:#fff;`;
},
}
}
},
computed: {
dayList() {
let firstDay = new Date(
this.calendar.params.curYear,
this.calendar.params.curMonth,
1
);
let dayOfWeek = firstDay.getDay();
// 根据当前日期计算偏移量 // Calculate the offset based on the current date
if (this.calendar.options.weekStartOn > dayOfWeek) {
dayOfWeek = dayOfWeek - this.calendar.options.weekStartOn + 7;
} else {
dayOfWeek = dayOfWeek - this.calendar.options.weekStartOn;
}
let startDate = new Date(firstDay);
startDate.setDate(firstDay.getDate() - dayOfWeek);
let item,
status,
tempArr = [],
tempItem;
for (let i = 0; i < 42; i++) {
item = new Date(startDate);
item.setDate(startDate.getDate() + i);
status = this.calendar.params.curMonth === item.getMonth() ? 1 : 0;
tempItem = {
date: `${item.getFullYear()}/${item.getMonth() +
1}/${item.getDate()}`,
status: status,
customClass: []
};
this.events.map(event => {
if (isEqualDateStr(event.date, tempItem.date)) {
tempItem.type = event.type;
tempItem.desc = event.desc || "";
if (event.customClass) tempItem.customClass.push(event.customClass);
}
});
tempArr.push(tempItem);
}
return tempArr;
},
curYearMonth() {
return `${this.calendar.params.curYear}年${this.calendar.params.curMonth +
1}月`;
},
today() {
let dateObj = new Date();
return `${dateObj.getFullYear()}/${dateObj.getMonth() +
1}/${dateObj.getDate()}`;
}
}
};
</script>
//样式我就不卖弄了 按需求调试吧
直接运用
<cal-panel :calendar="calendarOptions" :events="event" @month-changed="handleMonthChanged"></cal-panel>
let dateObj = new Date();
calendarOptions: {
options: {
weekStartOn: 0
},
params: {
curYear: dateObj.getFullYear(),
curMonth: dateObj.getMonth(),
curDate: dateObj.getDate(),
curEventsDate: "all"
}
},
event: [
{
date: `2018/07/21`,
type: 1,
desc: "迟到"
},
{
date: `2018/07/24`,
type: 2,
desc: "未打卡"
},
{
date: `2018/07/05`,
type: 3,
desc: "早退"
},
{
date: `2018-07-16`,
type: 1,
desc: "迟到"
},
{
date: `2018/07/10`,
type: 2,
desc: "未打卡"
}
]
代码我就上传到这了
扩能会有点问题 还需要优化一波
来个效果图吧
有些涉及工作机密 但不透露了
更多推荐
已为社区贡献14条内容
所有评论(0)