vue 日历面板,vue实现一个炫酷的日历组件
最近做项目的时候需要做一个定制的日历组件。本文主要介绍从零开始编写的vue日历组件，通过示例代码详细介绍，具有一定的参考价值。感兴趣的朋友可以参考一下。
:
目录
1.前言2。vue日历制作2.1制作月份选择器2.2制作日历2.2.1获取当前月份要显示的日期2.2为不同的日期添加不同的样式2.3合并月份选择器和日历组件2.4编辑功能
1. 前言
最近在做项目的时候遇到一个定制日历组件的需求(项目用的UI框架满足不了需求，算了，我直说了吧。蚂蚁设计vue的日历组件真的很丑，我自己写了一个)，如下图。需求大致如下：
(2)日历可以按月进行逐月切换。
(2)按月显示周一至周日的排班信息。
(3)排班信息分为早班和晚班。
(4)按日期给排班着色：当月排班信息为正常颜色，今天显示深色，其他月份显示浅色。
(5)点击编辑按钮，日历将进入编辑模式。简单来说，选择按钮显示在今天和今天之后的日程安排的右侧。单击它后，会显示一个框来编辑当天的日程。
如果只需要日历组件部分，可以直接看2.2部分，只需要传递当前时间（一个包含当前年份和月份的对象），即可展示完整的当前月日历。
2. vue日历制作
因为项目用的是ant desgin vue框架，所以会有a-row，a-col，a-card等标签。如果使用elementUI，只需将标签替换为el-row、el-col、el-card等相应的标签即可。
2.1 制作月份选择器
效果图：
根据要求，我们首先需要做一个月份选择器，用来提供月份切换，默认显示当前月份。点击左边的箭头前进一个月，点击右边的箭头后退一个月，每次点击都会抛出changeMonth函数，携带对象时间，包括当前月份选择器的年份和月份。
模板
！-月份选择器，支持左右箭头修改月份-
div class=month-con
a-icon type= left @ click= reduce month()/
span class=月
{{ time.year }}年{{
时间。1 9月？时间.月1:“0”(时间.月1)
}}月/span
a-icon type= right @ click= add month()/
/div
/模板
脚本
导出默认值{
data() {
返回{
时间：{
年份：新日期()。getFullYear()，
月：新日期()。getMonth()
}
}
},
已创建(){}，
方法：{
reduceMonth() {
如果(this.time.month 0) {
this . time . month=this . time . month-1
}否则{
this.time.month=11
这一年=这一年- 1
}
这个。$emit(changeMonth ，this.time)
},
addMonth() {
如果(这一次.月11日){
此时月=此时月1
}否则{
this.time.month=0
这一年=这一年
}
这个。$emit(changeMonth ，this.time)
}
}
}
/脚本
style lang=less 范围。月结
字体粗细：700；
字体大小：18px。月份{
边距：0 10px
}
}
/风格
2.2 制作日历
2.2.1 获取当前月所要显示的日期
在制作日历之前，我们可以先看看电脑自带的日历。经过观察，我们可以发现以下规律：
(1)虽然每个月的总天数不同，但统一显示6行，共计42天。
(2)当月的第一天在第一行，当1号不是周一时，用上月的日期补全周一到1号的时间。
(3)第五行和第六行不属于当月，用下个月的日期完成。
因此，参照上述规则，在获取当月需要显示的日期时，可以遵循以下步骤：
(1)获取当月第一天所在的日期和星期几。
(2)当月第一天的天数减1就是之前要填的天数。从当月的第一天减去这个天数就是要显示的日历的开始日期。例如，上述日历的开始日期是1月31日。
(3)循环42次，从开始日期开始，每次加一天，将这42天的日期保存到一个数组中，这个数组就是日历中要显示的当月的所有日期。
(4)因为每次切换月份都会刷新日历，所以日历数组可以直接写成computed属性。
计算值：{
//获取当月的显示日历，共42天
visibleCalendar: function() {
const calendarArr=[]
//获取当月的第一天
const currentFirstDay=新日期(this.time.year，this.time.month，1)
//获取第一天是星期几
const weekDay=current first day . getday()
//从当前月的第一天减去前一周的天数，这是您看到的日历的第一天。
const start day=current first day-(weekDay-1)* 24 * 3600 * 1000
//我们用42天来显示当前显示日历。
for(设I=0；i 42i ) {
常数日期=新日期(开始日期i * 24 * 3600 * 1000)
calendarArr.push({
日期：新日期(startDay i * 24 * 3600 * 1000)，
year: date.getFullYear()，
month: date.getMonth()，
day: date.getDate()
})
}
返回日历Arr
}
}
2.2.2 给不同的日期添加不同的样式
效果图：
根据要求，我们需要为不同的日期添加不同的样式：
(1)当前月调度信息正常颜色
(2)今天天黑了。
(3)其他月份呈现浅色。
因此，当我们获取当前月份的日历数组时，我们可以将每一天与今天的日期进行比较，以便添加不同的属性来获取和添加不同的样式：
(1)如果是当前月份，thisMonth属性为thisMonth，否则为空；
(2)如果是当天，isToday的属性为isToday，否则为空；
(3)如果是当月，则afterToday属性为afterToday，否则为空；
计算值：{
//获取当月的显示日历，共42天
visibleCalendar: function() {
//获取今天的日、月、日
const today=新日期()
today.setHours(0)
today . set分钟数(0)
today.setSeconds(0)
today . set毫秒(0)
const calendarArr=[]
//获取当月的第一天
const currentFirstDay=新日期(this.time.year，this.time.month，1)
//获取第一天是星期几
const weekDay=current first day . getday()
//从当前月的第一天减去前一周的天数，这是您看到的日历的第一天。
const start day=current first day-(weekDay-1)* 24 * 3600 * 1000
//我们用42天来显示当前显示日历。
for(设I=0；i 42i ) {
const date=新日期(开始日期i * 24 * 3600 * 1000)
calendarArr.push({
日期：新日期(startDay i * 24 * 3600 * 1000)，
year: date.getFullYear()，
month: date.getMonth()，
day: date.getDate()，
//是在当月吗？
本月：
date . get full year()===today . get full year()
date . getmonth()===today . getmonth()
？这个月
: ,
//是今天吗？
今天：
date . get full year()===today . get full year()
date . getmonth()===today . getmonth()
date.getDate()===today.getDate()
？“今天”
: ,
//是今天之后吗？
after today:date . gettime()=today . gettime()？今天之后 :
})
}
返回日历Arr
}
}
日历组件的vue代码如下。测试时，可以先将时间的默认值设置为当前月份：
模板
差异
实际行数
！-左边显示早班、晚班或上下午班-
a-col :span=2
div class=日期提示
a-col
v-for=第6项
:key=item
本月提示日期
:span=1
早班
夜班
/a列
/div
/a列
！-右边，周一至周五，具体内容-
span=22
！-第一行表头，周一到周日-
div class=top-con
div class= top v-for= item in top :key= item 星期{{ item }}/div
/div
！-日历号-
div class=date-con
差异
class=date
:class=[item.thisMonth，item.isToday，item.afterToday]
v-for=(item，index) in visibleCalendar
:key=index
div{{ item.day }}/div
早上好张三，李四/div
晚上王五，赵六/div
/div
/div
/a列
/a行
/div
/模板
脚本
//从""导入实用工具 utils.js
导出默认值{
道具：{
时间：{
类型：对象，
默认值：()={
返回{}
}
}
},
data() {
返回{
顶部：[一, 二, 三, 四, 五, 六, 日]
}
},
已创建(){
console.log(123 ，this.time)
},
方法：{
//获取
},
计算值：{
//获取当前月份显示日历，共42天
visibleCalendar: function() {
//获取今天的年月日
今日常量=新日期()
today.setHours(0)
今天。设置分钟数(0)
today.setSeconds(0)
今天。设置毫秒(0)
const calendarArr=[]
//获取当前月份第一天
const currentFirstDay=新日期(本.时.年，本.时.月，1)
//获取第一天是周几
常量工作日=当前第一天。getday()
//用当前月份第一天减去周几前面几天，就是看见的日历的第一天
常数开始日=当前第一天-(工作日-1)* 24 * 3600 * 1000
//我们统一用42天来显示当前显示日历
对于(设I=0；i 42i ) {
常数日期=新日期（开始日期i * 24 * 3600 * 1000)
calendarArr.push({
日期：新日期(startDay i * 24 * 3600 * 1000)，
year: date.getFullYear()，
month: date.getMonth()，
day: date.getDate()，
//是否在当月
本月：
约会。获取全年()===今天。获取整年()
约会。getmonth()===今天。getmonth()
？这个月
: ,
//是否是今天
今天：
约会。获取全年()===今天。获取整年()
约会。getmonth()===今天。getmonth()
date.getDate()===today.getDate()
？"今天"
: ,
//是否在今天之后
今天之后：日期。gettime()=今天。gettime()？今天之后 :
})
}
返回日历arrive）
}
}
}
/脚本
style lang=less 范围。顶级欺诈
显示器：flex
对齐-项目：居中；顶部{
宽度：14.285%;
背景色：rgb(242，242，242)；
填充：10px 0；
保证金：5px
文本对齐：居中；
}
}。日期会议{
显示器：flex
柔性包装：缠绕；日期{
宽度：14.285%;
文本对齐：居中；
填充：5px。早上好
填充：10px 0；
背景色：rgba(220，245，253，0.3)；
}。晚上{
填充：10px 0；
背景色：rgba(220，244，209，0.3)；
}
}。本月{。早上好
背景色：rgb(220，245，253)；
}。晚上{
背景色：rgb(220，244，209)；
}
}。今天{
字体粗细：700;早上好
背景色：rgb(169，225，243)；
}。晚上{
背景色：rgb(193，233，175)；
}
}
}。提示-con {
边距-顶部：51px。提示{
边距-顶部：21px
宽度：100%;
}
}
/风格
2.3 将月份选择器和日历组件组合使用
效果示意图：
组合代码如下：
模板
差异
a卡
！-操作栏-
a行type=" flex " justify=" space-around "
a列：span=12
！-月份选择器-
月份选择器@更改月份=更改月份/月份选择器
/a列
a-col:span=12 /a-col
/a行
！-日历栏-
a-row class=calendar-con
日历：time=time/calendar
/a行
/a卡
/div
/模板
脚本
//月份选择器
从导入Monthpicker。/components/Monthpicker.vue
//日历组件
从导入日历。/components/Calendar.vue
导出默认值{
组件：{
monthpicker: Monthpicker
日历：日历
},
data() {
返回{
时间：{
年份：新日期()。getFullYear()，
月：新日期()。getMonth()
}
}
},
已创建(){}，
方法：{
//修改月份
更改月份(时间){
console.log(time ，time)
this.time=时间
}
}
}
/脚本
style lang=less 范围。月结
字体粗细：700；
字体大小：18px。月份{
边距：0 10px
}
}。日历-con {
边距-顶部：20px
}
/风格
通过changeMonth事件，月份选择器中的月份被传递给calendar组件，从而完成了一个可以修改月份的简单calendar组件。
2.4 编辑功能
效果图：
根据需求，我们还需要能够编辑日历的内容。具体来说，您需要在日历上方添加一个编辑按钮，然后单击它将日历切换到编辑模式。事实上，在每个网格的职责信息后都会显示一个选择按钮。点击后会弹出一个框或者跳转到编辑页面，用于修改当前网格的值班信息。修改后点击保存，关闭弹出框或返回日历页面，重新查询当前日历值班信息。
当然，以上只是实现编辑功能的一种方式。如果网格中只有文本信息，不涉及复杂的绑定，也可以点击编辑按钮，将每个网格转换成一个输入框，并在右侧添加保存按钮(或者在日历上方添加一个通用的保存按钮)。编辑后，单击保存，然后恢复到文本形式。
注意：通常只有今天和今天之后的值班信息可以编辑，因此之前的日历数组中的每个日期对象我们都保存了一个afterToday属性，可以用于判断是否渲染选择按钮。因为编辑功能太简单，我就不写代码演示了。
这就是这篇关于从头开始编写vue日历组件的文章。更多相关vue日历内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。