前端日历组价（包含新建日程，查看日程/切换年月查看日程）vue组件日历复制即用，日程可能要看这调一调。

<template>
<div id="dom"><!-- <div id="dom2"> --><!-- 切换月份 --><!-- </div>  --><!-- <h3>2023-20-2</h3> --><section class='m-calendar' :style="dateStyle"><header class='changeMonth'><!-- <span class='prepMonth' @click="changeMonth(-1)"></span><span class='nextMonth' @click="changeMonth(1)"></span> --><el-button class="bu" @click="setXjrc()">添加日程</el-button></header><!-- <span class='prepMonth' @click="changeMonth(-1)"></span><p>{{year}}年{{month}}月</p><span class='nextMonth' @click="changeMonth(1)"></span> --><ul class='dates2'><!-- 星期 --><li class='weeks' v-for="item in weeks" :key="item">{{item}}</li></ul><ul class='dates'><!-- 日期 @mouseenter="enter(item)" @mouseleave="leave" @mousemove="updateXY" --><liclass='day'v-for="(item, i) in dates" :key="i"@click="hiveDate(item),clickDate(item)" :class="{isPrep: item.isPrep,isNext: item.isNext,hidden: (item.isNext || item.isPrep) && !showPrepNext,isToday: item.date == today,isSelected: item.date == selectedDate,isMarked: markDates.includes(item.date)}">{{item.date == today ? item.day : item.day}}</li></ul></section></div><!-- <span class="ltn" @click="changeYear(-12)">⟪</span> --><span class="lt" @click="changeMonth(-1)">&lt;</span><p class="ny"  @click="getUserYeaar()">{{year}}年{{month}}月</p><span class="gt" @click="changeMonth(1)">&gt;</span><!-- <span class="gtn" @click="changeYear(12)">⟫</span> --><div class="tck" v-show="seen" :style="positionStyle"  @mouseleave="tckgb()"><!-- <div class="gb" v-on:click="tckgb()">✖</div>    --><ul class="uu" ><li  v-for="date in Timmdate" :key="date" @click="ckrcs(date.type,date.id)"><er class="er">●</er> <c class="dayrocheng"> {{date.beginDate}} </c>   <c class="dayrocheng"> {{date.beginTime}} </c>  <tit class="tit"> {{date.name}}</tit> </li></ul></div> <!-- @mouseleave="setUserYeaar()" --><div class="xhn" v-show="sees" @mouseleave="setUserYeaar()" ><ul><li @click="getyearusers(-1)">{{year - 1}}年</li><li @click="getyearusers(year)">{{year}}年</li><li @click="getyearusers(1)">{{year + 1}}年</li><!-- <li @click="getyearusers(-1)">{{year - 1}}</li><li @click="getyearusers(year-1)">{{year - 1}}</li><li @click="getyearusers(year-1)">{{year - 1}}</li> --></ul></div></template><script>
import { getMeetUserList } from '@/api/meeting'const D = new Date()
const ThisYear = D.getFullYear()
const ThisMonth = D.getMonth() + 1
const today = new Date().toLocaleDateString()
export default {// props都为非必传props: {// 初始年月startYearMonth: {type: String,default () {return `${ThisYear}/${ThisMonth}`// 格式：2021-1或2020-01或者2020/1或者2020/01}},// 需要标记的日期数组markDate: {type: Array,default () {return ['2023-03-14']// 格式：['2020-01-01', '2020-02-12']}},// 选中的日期checkedDate: {type: String,default () {return ''// 格式：'2020-01-01'}},// 是否星期一开始，默认星期日开始mondayStart: {type: Boolean,default () {return false}},// 是否显示上个月和下个月日期showPrepNext: {type: Boolean,default () {return true}},// 日期字体颜色fontColor: {type: String,default () {return '#000'}},// 标记点颜色markColor: {type: String,default () {return '#ff6633'}},// 选中的日期字体颜色activeColor: {type: String,default () {return '#fff'}},// 选中的日期背景颜色activeBgColor: {type: String,default () {return '#ff6633'}}},data () {return {//有日程的日期数组days : [],// 当前年year: ThisYear,// 当前月month: ThisMonth,// 今天today,// 日期数组dates: [],// 选中的日期selectedDate: '',seen:false,sees:false,// 选择的日期带0的selectedDateto : '',selectedDateHive:'',x:0,y:0,positionStyle:{top:'20px',left:'20px'},//   鼠标移动过的日期Timmdate : [],} },computed: {// 标记的日期 方法markDates () {// 获得不带0的日期，如：2021/1/1  =>  2021/1/1return this.days.map(item => this.formatDate(item))},// 星期weeks () {if (this.mondayStart) {return ['一', '二', '三', '四', '五', '六', '日']} else {return ['日', '一', '二', '三', '四', '五', '六']}},dateStyle () {return {'--font-color': this.fontColor,'--mark-color': this.markColor,'--active-color': this.activeColor,'--active-bg-color': this.activeBgColor}}},created () {this.year = new Date(this.startYearMonth).getFullYear()this.month = new Date(this.startYearMonth).getMonth() + 1//选中的日期if (this.checkedDate) {console.log(this.checkedDate)// 获得不带0的日期，如：2021-1-1  =>  2021/1/1this.selectedDate = this.formatDate(this.checkedDate)// this.selectedDate = this.checkedDate}// 初始化日历console.log(this.days)this.initCalendar()console.log(this.days)},methods: {// 初始化日历initCalendar () {// ⚠️注意：new Date中的month要减1才是真正的本月月数，即本月：this.month - 1，下个月：this.month// ⚠️注意：下个月的第0天即为本月的最后一天// 上个月总天数（本月第0天日期）const prepMonthDays = new Date(this.year, this.month - 1, 0).getDate()// 上个月最后一天星期几（本月第0天星期数）const prepMonthEndDayWeek = new Date(this.year, this.month - 1, 0).getDay()// 当前月总天数（下个月第0天日期）const thisMonthDays = new Date(this.year, this.month, 0).getDate()// 当前月第一天是星期几const firstDayWeek = new Date(this.year, this.month - 1, 1).getDay()// 当前月最后一天是星期几（下个月第0天星期数）const thisEndDayWeek = new Date(this.year, this.month, 0).getDay()// alert(thisMonthDays  +"asdasd"+ prepMonthEndDayWeek)// var zhMonth  = thisMonthDays + prepMonthEndDayWeek;var dates = []// 需要计算的总天数var totalDays = firstDayWeek + thisMonthDays// 从星期一开始index为1，从星期天开始index为0var index = this.mondayStart ? 1 : 0// 星期一开始且本月最后一天是星期天之后，需补满最后一行if (this.mondayStart && thisEndDayWeek > 0) {totalDays += 7 - thisEndDayWeek} else if (!this.mondayStart && thisEndDayWeek < 6) {// 星期天开始且本月最后一天是星期天之前，需补满最后一行totalDays += 6 - thisEndDayWeek}for (index; index < totalDays; index++) {// 上个月月底if (index < firstDayWeek) {// 上个月天数 - 上个月最后一天星期数 + 下标 (如：31 - 5 + 0)const day = prepMonthDays - prepMonthEndDayWeek + indexconst date = new Date(this.year, this.month - 2, day).toLocaleDateString()dates.push({ isPrep: true, day, date })} else if (index >= firstDayWeek + thisMonthDays) {// 下个月月初// 下标 - 当前月总天数 - 当前月第一天星期数 + 1 (如：30 - 31 + 1 + 1)const day = index - thisMonthDays - firstDayWeek + 1const date = new Date(this.year, this.month, day).toLocaleDateString()dates.push({ isNext: true, day, date })} else {// 本月// 下标 - 当前月第一天星期数 + 1 (如：5 - 5 + 1)const day = index - firstDayWeek + 1const date = new Date(this.year, this.month - 1, day).toLocaleDateString()dates.push({ day, date })}}this.dates = [...dates]console.log(this.dates)var s = this.formatDatesto(dates[firstDayWeek].date); const o = this.formatDatesto(dates[thisMonthDays].date)this.getDatetime(s,o)},// 点击日期clickDate ({ date, isPrep, isNext }) {if (isPrep || isNext) returnthis.selectedDate = datethis.$emit('clickDate', date.replace(/\//g, '-'))var datemo  = date.replace(/\//g, '-');//获取带0的this.selectedDateto = datemo.split("-").map((item) => {if (+item < 10) {return "0" + +item;} return item;}).join("-"); // 最后重组回来;if(this.markDates.includes(this.selectedDate)){this.seen =true;this.Timmdate  = [];this.getTimeDate(this.selectedDateto);}   },// 获取数据代码==========================================重要getDatetime (StartTime,StopTime) {const param = {date:'',startdate: StartTime,enddate:StopTime}getMeetUserList(param).then((res) => {res.data.forEach(element => {if(element.beginDate != element.endDate){this.getdiffdate(element.beginDate,element.endDate)}this.days.push(element.beginDate)});console.log(this.days)})},
//  获取具体一天getTimeDate (StartTime) {const param = {date: StartTime,startdate: '',enddate:''}getMeetUserList(param).then((res) => {res.data.forEach(element => {this.Timmdate.push({name:element.name,beginDate :element.beginDate,type:element.type,id : element.id,beginTime : element.beginTime})});console.log(this.Timmdate)})},ckrcs(type,hyid){console.log(type)if(type == "会议"){this.openHY(hyid);}else{this.ckrc(hyid);}},
// 会议点击openHY(hyid){let routeUrl = this.$router.resolve({name:"meetInfo",query:{hyid: this.$Base64.encode(hyid)}})window.open(routeUrl.href, '_blank')},setXjrc(){// window.open("http://hrsvc.ccccltd.cn:9898/interface/sso/ssologin.jsp?path="+this.$Base64.encode("/spa/cube/index.html?ssoToken=ssoTokenparm#/main/cube/card?type=1&modeId=6618008&formId=-19548&_key=enoy44&layoutid=7332685"));},ckrc(id){window.open("http://hrsvc.ccccltd.cn:9898/interface/sso/ssologin.jsp?path="+this.$Base64.encode("/spa/cube/index.html?ssoToken=ssoTokenparm#/main/cube/card?billid="+id+"&type=2&modeId=6618008&formId=-19548&opentype=0&customid=6784011&viewfrom=&guid=card&_key=792enj&layoutid=7333186"));},// 移动日期hiveDate ({ date, isPrep, isNext }) {if (isPrep || isNext) returnthis.selectedDateHive   = this.formatDatesto(date); if(this.markDates.includes(this.selectedDateHive)){this.getTimeDate (this.selectedDateHive);this.seen =true;this.sees = false;}   },getUserYeaar() {this.sees = true;},setUserYeaar() {this.sees = false;},getyearusers(year) {if(year==1){this.year++}else{this.year--}this.initCalendar()this.$emit('changeMonth', `${this.year}-${this.month}`)},// 切换月份changeMonth (month) {this.month += monthif (this.month === 0) {this.month = 12this.year--} else if (this.month === 13) {this.month = 1this.year++}this.initCalendar()},// 切换月份changeYear (year) {if (year === -12) {this.year-=1} else  {this.year+= 1}this.initCalendar()this.$emit('changeMonth', `${this.year}-${this.month}`)},// 格式化日期formatDate (date) {// 获得不带0，且分隔符为/的日期，如：2020-01-01  =>  2021/1/1return new Date(date).toLocaleDateString()},// 获取带0的日期formatDates(e) {return e.split("-").map((item) => {if (+item < 10) {return "0" + +item;}// 大于10的时候不用补0return item;}).join("-"); // 最后重组回来},// 获取带0的日期formatDatesto(e) {return e.split("/").map((item) => {if (+item < 10) {return "0" + +item;}// 大于10的时候不用补0return item;}).join("-"); // 最后重组回来}, tckgb() {this.seen =false;},getdiffdate(stime,etime){//初始化日期列表，数组var diffdate = new Array();var i=0;//开始日期小于等于结束日期,并循环while(stime<=etime){this.days.push(stime)//获取开始日期时间戳var stime_ts = new Date(stime).getTime();console.log('当前日期：'+stime   +'当前时间戳：'+stime_ts);//增加一天时间戳后的日期var next_date = stime_ts + (24*60*60*1000);//拼接年月日，这里的月份会返回（0-11），所以要+1var next_dates_y = new Date(next_date).getFullYear()+'-';var next_dates_m = (new Date(next_date).getMonth()+1 < 10)?'0'+(new Date(next_date).getMonth()+1)+'-':(new Date(next_date).getMonth()+1)+'-';var next_dates_d = (new Date(next_date).getDate() < 10)?'0'+new Date(next_date).getDate():new Date(next_date).getDate();stime = next_dates_y+next_dates_m+next_dates_d;//增加数组keyi++;}console.log(diffdate);
}}
}
</script><style lang='scss' scoped>.tit {font-weight:bold;cursor: pointer;
}.er {opacity: 0.5;cursor: pointer;
}.dayrocheng {color: #0099ff;font-weight:bold;cursor: pointer;
}.gb {position: fixed;left: 400px;top: 1px;width: 20px;height: 20px;
}.list-box::-webkit-scrollbar {width: 10px;// height: 10px; // 高度写不写，都不影响，因为会根据内容的长度自动计算
}.list-box::-webkit-scrollbar-thumb {background: #ccc; // 滑块颜色border-radius: 5px; // 滑块圆角
}.list-box::-webkit-scrollbar-thumb:hover {background: #f40; // 鼠标移入滑块变红
}.uu {position: relative;left: 10px;top: 2px;
}.tck{width: 350px;height: 4700px;background-color: #fffcfc;border: 2px solid rgb(201, 199, 199);position: absolute;max-height: 300px;overflow-y: auto;overflow-x: hidden;
}.bu {
position: absolute;   left: 285px;   background-color: #0099ff;color: #fdfdfd;border-radius: 30px 30px 30px 30px;width: 90px;height: 35px;
}.ny {position: absolute;top: 11px;   left: 45px;font-weight: bold;color: #E52355;cursor: pointer;
}.lt {position: absolute;top: 10px;   left: 26px;font-weight: bold;opacity: .6;cursor: pointer;
}.gt{position: absolute;top: 10px;   left: 127px;font-weight: bold;opacity: .6;cursor: pointer;
}.ltn {position: absolute;top: 10px;   left: 20px;font-weight: bold;opacity: .3;
}.gtn{position: absolute;top: 10px;   left: 137px;font-weight: bold;}::-webkit-scrollbar-track-piece {-webkit-border-radius: 0
}
::-webkit-scrollbar {width: 5px;height: 10px
}
::-webkit-scrollbar-thumb {height: 50px;background-color: #b8b8b8;-webkit-border-radius: 6px;outline-offset: -2px;filter: alpha(opacity = 50);-moz-opacity: 0.5;-khtml-opacity: 0.5;opacity: 0.5
}
::-webkit-scrollbar-thumb:hover {height: 50px;background-color: #878987;-webkit-border-radius: 6px
}.xhn {background-color:rgb(224 245 255);width: 75px;height: 100px;border-radius: 10%;padding-left: 28px;position: absolute;top: 36px;left: 29px;color: #E52355;opacity: .9 ;font-weight: 900;cursor: pointer;
}.dates2  {
background-color: #e0f5ff;height: 30px;
}$fontColor: var(--font-color);$markColor: var(--mark-color);$activeColor: var(--active-color);$activeBgColor: var(--active-bg-color);.m-calendar{max-width: 400px;max-height: 450px;border: 1px solid #fdfdfd;border-radius: 8px 8px 0 0;padding-bottom: 20px;header{display: flex;align-items: center;justify-content: center;border-bottom: 1px solid #abaeaf;padding: 20px 0;margin-bottom: 5px;h1{margin: 0 20px;color: #030303;font-size: 20px;font-weight: bold;width: 120px;text-align: center;}span{cursor: pointer;padding: 4px 10px;&::after{display: inline-block;content: '';width: 10px;height: 10px;border-top: 2px solid $fontColor;}&.prepMonth::after{border-left: 2px solid $fontColor;transform: rotate(-45deg);}&.nextMonth::after{border-right: 2px solid $fontColor;transform: rotate(45deg);}&:hover::after{border-color: $markColor;}}}ul{display: flex;flex-wrap: wrap;margin: 0 auto;padding: 0 12px;li{width: 41px;height: 40px;margin: 4px calc((100% / 7 - 42px) / 2);display: flex;flex-direction: column;justify-content: center;align-items: center;// font-weight: bold;position: relative;transition: all ease .25s;border-radius: 50px;// 标记&::after{bottom: 0;left: 50%;transform: translateX(-50%);position: absolute;top: 40px;display: inline-block;content: '';width: 5px;height: 5px;border-radius: 50%;}// 星期&.weeks{font-size: 18px;color: rgba($color: (#000000), $alpha: 0.5);margin-bottom: 12px;position: relative;top: -10px;}&.day{cursor: pointer;font-size: 20px;color: $fontColor;// 今天&.isToday{color: #ffffff;background-color: #0099ff;}// 标记&.isMarked::after{transition: all ease .25s;background: #ff1100;}// 选中、hover&.isSelected{box-sizing: border-box;//    box-shadow: inset 2px 2px 10px #043d63;border-radius: 1px;border:1px solid #0099ff ;border-radius: 50%;// border: #0099ff solid 1px;// background: #0099ff;// color: $activeColor;// border-radius: 200%;// &:after{//   display: none;// }}// 上个月、下个月&.isNext, &.isPrep{cursor: default;opacity: .3;&:hover{color: $fontColor;opacity: .3;background: transparent;}}// hidden&.hidden{opacity: 0;&:hover{opacity: 0;}}}}}}
</style>

前端日历组价（包含新建日程，查看日程/切换年月查看日程）vue组件日历复制即用，日程可能要看这调一调。相关推荐

vue自定义日历小组件
vue自定义小日历组件一.前言自己开发的项目需要用到类似博客侧边栏小日历组件,觉得自己造一个比较随心所欲,更能满足自己的需求,所以决定自己开发一个.最终效果如图所示. 二.日历样式我的这个日历组 ...
git 远程仓库管理分支创建、管理、查看、切换
作用: 区分生产环境代码以及开发环境代码研究新的功能或者攻关难题解决线上bug 特点: 项目开发中公用分支包括master.dev 分支master是默认分支,用于发布,当需要发布时将dev分支合 ...
git 分支查看与切换
git 分支查看与切换 # 1.查看所有分支 > git branch -a # 2.查看当前使用分支(结果列表中前面标*号的表示当前使用分支) > git branch# 3.切换分支 ...
前端开发介绍（包含调试什么的）
http://www.cnblogs.com/jikey/p/4259360.html 前言一.开发工具 - 前端四大利器 1. WebStorm 1). 岂今为止,业界公认的前端开发利器.优点: ...
前端Vue制作日历插件FullCalendar
前端Vue制作日历插件FullCalendar 官方文档:https://fullcalendar.io/ 效果图安装 Vue2:npm install --save @fullcalendar/v ...
【云计价i20】快速组价技巧应用综合集锦
一.智能组价应用应用场景编制造价成果文件时,我们会遇到一些大型项目,特征描述比较复杂,描述内容较多,需要对组价方案进行存档,便于类似清单项目可以直接借用:遇到工艺较复杂的情况,按照工序内容组价定额 ...
玩转GIT系列之【git的分支操作（查看分支/切换分支/新建分支/删除分支）】
一.查看分支 1.查看全部分支 git branch -a 2.查看本地分支 git branch -l 3.查看远程分支 git branch -r 二.切换分支假设本地当前处于master分支下 ...
纯前端JS导出Word包含图片
纯前端JS导出Word包含图片纯前端JS导出Word文档包含图片 Word导出方式依赖实现代码纯前端JS导出Word文档包含图片在做项目中,遇到一个需求,是将后台返回的属性以及URL图片导出 ...
给定一个整数数组 nums ，找到一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。
题目描述给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和. 输入: [-2,1,-3,4,-1,2,1,-5,4] 输出: 6 解释: 连续子数组 ...

前端日历组价（包含新建日程，查看日程/切换年月查看日程）vue组件日历复制即用，日程可能要看这调一调。

前端日历组价（包含新建日程，查看日程/切换年月查看日程）vue组件日历复制即用，日程可能要看这调一调。相关推荐

最新文章

热门文章