基于vue的日历组件,vue做一个日历标记节假日
这篇文章主要介绍了如何用某视频剪辑软件设计一个日历表，帮助大家更好的理解和学习某视频剪辑软件框架，感兴趣的朋友可以了解下
日历的功能，我们会经常用到，且逻辑比较复杂，小算法较多，花了半天时间写了个，特此详记。
先贴图
功能阐述：返回本月不多说，设置工作日和节假日是为了公司制度需要，后台会有假日表来记录。
为了适应于某视频剪辑软件框架，很多框架的方法用不上，例如添加类别及removeClass所以可能某些地方做的比较繁琐。
模板
差异
div class=date
！-年份月份-
div class=month
I class= El-icon-arrow-left @ click= pick pre(当前年，当前月)/i
我{{当前年份}}年{{当前月}}月/i
I class= El-icon-arrow-right @ click=选取下一个(当前年，当前月)/i
/div
！-星期-
ul class=工作日
里一/李
里二/李
里三/李
里四/李
里五/李
李style=color:#0A0A0A 六/李
李style=color:#0A0A0A 日/李
/ul
！-日期-
div class=bodyDiv
ul class=days v-for=(值，索引1)以天数表示
li @click=pick(day，index index1*7) v-for=(day，index)in value :class=[{ ban :isBan[index index 1 * 7]}，{xiu:isXiu[index index1*7]}]
！-本月-
span v-if=day.getMonth() 1！=当前月份 class= other-month :class= { selected :is selected[index index 1 * 7]} { { day。getdate()} }/span
span v-else:class= { selected :is selected[index index 1 * 7]}
！-今天-
span v-if=day.getFullYear()==新日期()。getFullYear() day.getMonth()==新日期()。getMonth() day.getDate()==新日期()。getDate() class= active { day。getDate()} }/span
span v-else { { day。getdate()} }/span
/span
/李
/ul
/div
HR style= height:2px；边框：无；border-top:2px dotted # 185598；/
/div
div class=button
divel-button type= primary size= large @ click= return now()返回本月/El-按钮/div
divel-button type= primary size= large @ click= setRestOrWork( R )设置为节假日/El-按钮/div
divel-button type= primary size= large @ click= setRestOrWork( W )设置为工作日/El-按钮/div
divel-button type= primary size= large @ click= cancel()取消/El-按钮/div
/div
/div
/模板
脚本
从导入{ calendarMsgService } ./CalendarMsgService
导出默认值{
姓名：日期，
data () {
返回{
当前年份：1970年，//年份
当前月：1,//月份
当前日期：1,//日期
当前周：1,//星期
第一周：1,
天数：[],
日苏尔：[],
参数：{
选择日期：,
类型：""
},
isSelected:[]，
国际标准书号：[],
isXiu:[]，
休息日：{
年份：,
月份：,
日期：,
resttype: ，
休息日期：""
},
restDaysList:[]，
banList:[]，
秀才：[],
选择索引：""
}
},
已创建(){
this.initData(空)
},
方法：{
//格式化日期
格式日期（年、月、日){
常数y=年
让m=月
if (m 10) m=`0${m}
设d=天
if (d 10) d=`0${d}
返回" ${y}-${m}-${d} "
},
initData (cur) {
调试器；
let date=
如果（当前){
日期=新日期（当前)
}否则{
日期=新日期()
}
这个。当前日期=日期。getdate()//今日日期几号
这个。当前年份=日期。获取整年()//当前年份
这个。当月=日期。getmonth()1//当前月份
这个。当前周=日期。getday()//1.6,0 //今天是星期几
//当前月的第一天是星期几
约会。设置日期(1)；
这个。第一周=日期。getday()；
if (this.firstWeek===0) {
这个。第一周=7；
}
const str=this。格式化日期(this。当前年份，this.currentMonth，1)//今日日期年-月-日
this.days.length=0
//今天是周日，放在第一行第七个位置，前面6个这里默认显示一周，如果需要显示一个月，则第二个循环为我=42-这是第一周
对于(让我=这个。第一周-1；I=0；i -=1) {
常数d=新日期(str)
d.setDate(d.getDate() - i)
本。天。推(四)
}
//处理一号是星期天为七的情况，为七天就直接放在代苏尔里
if (this.days.length % 7===0){
这个。天数ul。推(这个。天)；
这个。天数=[]；
}
对于(设I=1；I=42-这个。第一周；i=1) {
常数d=新日期(str)；
d。设置日期(d . getdate()I)；
这个。几天。推(d)；//一个天就是一行七天代苏尔就是个数组，里面有六个天就是六行42天
if (this.days.length % 7===0){
这个。天数ul。推(这个。天)；
这个。天数=[]；//清空重新存放天数
}
}
//调后台接口，获取当前年，当前月的班休时间
calendarmsgservice。getrestdays({当前年份：this。当年，当月：这个。当前月份}).然后(res={
if (res.code===0){
调试器；
这个。休息日列表=休息内容；
这个。交易结果(这个。今年，这个。当月)；
}
})
},
setRestOrWork(类型){
if (this.onlySelect()) {
这个。参数。type=类型；
调试器；
calendarmsgservice。addrestdays(这个。params).然后(res={
if (res.code===0) {
这个消息({
消息： 设置成功!,
类型："成功"
})
if (type==R){
这个。是秀[这个。选择素指数]=真；
}
if (type==W){
这个。isban[这个。选择素指数]=真；
}
}否则{
这个消息({
消息：res.msg，
类型："错误"
})
}
这个。参数。selectday=
这个。参数。type=
})
}
},
取消(){
if (this.onlySelect()) {
calendarmsgservice。取消预订(这。params).然后(res={
if (res.code===0) {
这个消息({
消息： 取消成功!,
类型："成功"
})
这个。是秀[这个。选择素指数]=假；
这个。isban[这个。选择素指数]=假；
}否则{
这个消息({
消息：res.msg，
类型："错误"
})
}
这个。参数。selectday=
这个。参数。type=
})
}
},
//上一個月传入当前年份和月份
pickPre(年，月){
这个。天数ul=[]；
这个。被选中=[]；
常数d=新日期(this.formatDate(年，月，1))
d。设置日期(0)
这个。initdata(这个。formatdate(d . get full year()，d.getMonth() 1，1))
calendarmsgservice。getrestdays({当前年份：this。当年，当月：这个。当前月份}).然后(res={
if (res.code===0){
调试器；
这个。休息日列表=休息内容；
这个。交易结果(这个。今年，这个。当月)；
}
})
},
//下一個月传入当前年份和月份
选择下一个（年，月){
这个。天数ul=[]；
这个。被选中=[]；
常数d=新日期(this.formatDate(年，月，1))
设置日期(42)
这个。initdata(这个。格式日期(d . get full year()、d.getMonth() 1，1))；
//当点击下个月的时候，才会去拿该月的休息或者工作日的日期，而不是一下子都拿出来
calendarmsgservice。getrestdays({当前年份：this。当年，当月：这个。当前月份}).然后(res={
if (res.code===0){
调试器；
这个。休息日列表=休息内容；
这个。交易结果(这个。今年，这个。当月)；
}
})
},
//算法
dealResult(currentYear，currentMonth){
调试器；
这个。banlist=[]；//把当前月的工作日放在一起
这个。xiu list=[]；//把当前月的休息日放在一起
这个。isban=[]；//设置标识，来确定用什么样的背景图
这个。是xiu=[]；
设周吉=新日期(this.formatDate(currentYear，currentMonth，1)).getDay()；//被查找的月份一号是星期几
如果(周吉===0){ //0就是星期天
周吉=7;
}
对于(设I=0；这是。休息日列表。长度；i ){
这个。休息日=这个。休息日列表[I]；
如果(这个。休息日。rest type=== W ){
设ban=this.restDays.day - 1(周吉-1);//重要算法，算出班日，在几号位
这个。banlist。推(禁)；
}
如果(这个。休息日。rest type=== R ){
设xiu=this.restDays.day - 1(周吉-1);//重要算法，算出休息日，在几号位
这个。秀榜。推(修)；
}
}
对于(设m=0；m 42m ) { //banlist里面放置的都是在日历上处于几号位，而不是工作日的日期，
让nothave=true//所以得把这些位置号拎出来，给它们于不同的样式
对于(设k=0；k这个。banlist。长度；k ) {
if (m==this.banList[k]) {
这个。isban。推(真)；
nothave=false
打破；
}
}
如果（没有){
这个。isban。推(假)；
}
}
对于(设n=0；n42n ) { //同上，来处理休息日
让nothave=true
对于(设k=0；k这个。秀榜。长度；k ) {
if (n==this.xiuList[k]) {
this.isXiu.push(真);
nothave=false
打破；
}
}
如果（没有){
这个。是秀。推(假)；
}
}
},
returnNow(){
这个。天数ul=[]；
这个。initdata(null)；
},
//当前选择日期
选择（日期，索引){
调试器；
这个。选择指数=指数；
这个。被选中=[]；
这个。参数。selectday=this。格式日期(日期。get full year()、date.getMonth() 1、date。getdate())；
对于(设I=0；i 42i ) {
if (index==i) {
这个。被选中。推(真)；
继续；
}
这个。被选中。推(假)；
}
},
onlySelect(){
调试器；
如果(这个。参数。selectday=== ){
这个消息({
消息： 请选择日期，
类型："警告"
})
返回错误的
}
返回真实的
}
},
}
/脚本
样式范围。日期{
高度：150像素
宽度：1000像素
颜色：# 333;
浮动：左；
}。按钮{
浮动：左；
左边距：110像素
边距-顶部：120像素
}。按钮分区{
边距-顶部：70px
}。月份{
字体大小：24px
文本对齐：居中；
边距-顶部：20px
}。工作日{
背景色：# 20A0FF
不透明度：0.6;
显示器：flex
字体大小：28px
边距-顶部：20px
}。天数{
显示器：flex
}
李{
flex:1；
字体大小：35px
宽度：50px
列表样式类型：无；
文本对齐：居中；
边距-顶部：5px
行高：60px
光标：指针；
}。已选择{
显示：内嵌-块；
宽度：60px
高度：60px
颜色：# fff
边界半径：70%;
背景色：# 1e 90 ff
}。班
背景-图片：网址(图片/ban。jpg)；
}。秀{
背景-图像：url(./图片/秀。jpg)；
背景-重复：不重复；
}。活动{
显示：内嵌-块；
宽度：60px
高度：60px
颜色：# fff
边界半径：50%;
背景色：# 324057;
}
我{
右边距：30px
光标：指针
}。其他月{
颜色：# EEC591
}
/风格
以上就是用某视频剪辑软件设计一个日历表的详细内容，更多关于某视频剪辑软件日历的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。