日历组件（可加上一年下一年）)

el-calendar 日历组件（可加上一年下一年）

图片:

// An highlighted block
<template><div class="info"><div @click="handleJ" class="addYear" title="上一年"><img src="../../assets/arrow_left_2@2x.png" alt="" /></div><div @click="handleA" class="addYear addYearP" title="下一年"><img src="../../assets/arrow_right_2@2x.png" alt="" /></div><el-calendar v-model="value" class="data"><!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法--><template slot="dateCell" slot-scope="{ date, data }"><div class="info_foo"><!--这里原本有动态绑定的class，去掉--><div class="data_title"><!-- 阳历日期 --><div class="date_now">{{data.day.split("-").slice(2).join("-")}}</div><!-- 农历日期 --><div>{{ solarDate2lunar(data.day) }}</div></div><div class="content_h"><divclass="content"v-for="(item, index) in dealMyDate(data.day)":key="index"><div class="job"><div class="leader">{{ item.job }}</div><div class="leader">{{ item.allDay }}</div></div><div class="job job1"><div class="name">{{ item.userName }}</div><div class="name">{{ item.phone }}</div></div></div></div><divclass="edit"v-if="dealMyDate(data.day).length > 0"@click="handleTail(item)">编辑</div></div></template></el-calendar></div>
</template><script>
import Axios from "axios";
import leftImg1 from "../../assets/arrow_left@2x.png";
import rightImg1 from "../../assets/arrow_right@2x.png";
import calendar from "../../utils/calendar.js";
export default {data() {return {value: new Date(),tableData: [],dataList: ["", "周一", "周二", "周三", "周四", "周五", "周六", "周日"]};},created() {this.$nextTick(() => {// 点击前一个月let prevBtn = document.querySelector(".el-calendar__button-group .el-button-group>button:nth-child(1)");prevBtn.title = "上个月";prevBtn.innerHTML = "";let img = document.createElement("img");img.style.width = 15 + "px";img.style.height = 15 + "px";img.setAttribute("src", leftImg1);prevBtn.appendChild(img);prevBtn.addEventListener("click", e => {let d = new Date(this.value);let resDate = d.getFullYear() + "-" + this.handleTime(d.getMonth() + 1);console.log(resDate);});// 点击下一个月let nextBtn = document.querySelector(".el-calendar__button-group .el-button-group>button:nth-child(3)");nextBtn.title = "下个月";nextBtn.innerHTML = "";let imgs = document.createElement("img");imgs.style.width = 15 + "px";imgs.style.height = 15 + "px";imgs.setAttribute("src", rightImg1);nextBtn.appendChild(imgs);nextBtn.addEventListener("click", e => {let d = new Date(this.value);let resDate = d.getFullYear() + "-" + this.handleTime(d.getMonth() + 1);console.log(resDate);});// 点击今天let todayBtn = document.querySelector(".el-calendar__button-group .el-button-group>button:nth-child(2)");todayBtn.innerHTML = "今日";todayBtn.style.height = 33 + "px";todayBtn.style.position = "absolute";todayBtn.style.left = 160 + "px";todayBtn.style.top = 1 + "px";todayBtn.addEventListener("click", e => {let d = new Date(this.value);let resDate = d.getFullYear() + "-" + this.handleTime(d.getMonth() + 1);console.log(resDate);});// 周一至周日修改for (let i = 1; i < this.dataList.length; i++) {document.querySelector(".el-calendar__body .el-calendar-table th:nth-child(" + i + ")").innerHTML = this.dataList[i];}});},methods: {getInfoList() {let url = "/apis/workInfo/workInfo";Axios.get(url).then(res => {if (res.data.code === 200) {//   this.tableData = res.data.data || []let arr = res.data.data || [];this.tableData = arr.map(v => {return {job: v.occupation,allDay: v.dayType,userName: v.personName,phone: v.phone,dutyDate: v.startTime.slice(0, 10),workinfoId: v.workinfoId};});}});},dealMyDate(v) {let len = this.tableData.length;let res = [];for (let i = 0; i < len; i++) {if (this.tableData[i].dutyDate == v) {res.push(this.tableData[i]);}}return res;},// 处理时间handleTime(s) {return s < 10 ? "0" + s : s;},handleTail(item) {this.$router.push({path: "/dutyDetail"});},// 加一年handleA() {let d = new Date(this.value);this.value =d.getFullYear() + 1 + "-" + this.handleTime(d.getMonth() + 1);},handleJ() {let d = new Date(this.value);this.value =d.getFullYear() - 1 + "-" + this.handleTime(d.getMonth() + 1);},// 农历日期转换solarDate2lunar(solarDate) {var solar = solarDate.split("-");var lunar = calendar.solar2lunar(solar[0], solar[1], solar[2]);// return solar[1] + '-' + solar[2] + '\n' + lunar.IMonthCn + lunar.IDayCnreturn lunar.IMonthCn + lunar.IDayCn;}},mounted() {this.getInfoList();}
};
</script><style lang="scss" scoped>
.info {width: 100%;height: 970px;overflow: auto;padding: 0 20px;background: #f8f9ff;.addYear {width: 45px;height: 32px;line-height: 31px;text-align: center;border: 1px solid #ccc;cursor: pointer;img {width: 15px;height: 15px;}}.addYear:hover {background: #409eff;opacity: 0.4;}.addYearP {position: absolute;top: 21px;left: 159px;}/deep/ .el-button-group {position: absolute;top: -32px;left: 46px;}/deep/ .el-calendar-day {padding: 0;}.data {width: 100%;height: 100%;position: relative;/deep/ .el-calendar__header {-webkit-box-pack: none;display: block;/deep/ .el-calendar__title {position: absolute;top: -22px;right: 750px;font-size: 18px;}}.info_foo {height: 100%;//   padding: 0 12px;}/deep/ .el-calendar-day {height: 256px;overflow: auto;}/deep/ .el-calendar-day {position: relative;}.content {border-bottom: 1px solid #d3dae8;padding: 9px 12px;.job1 {margin-top: 9px;}.job {display: flex;justify-content: space-between;.leader {font-size: 14px;font-family: Microsoft YaHei;font-weight: bold;color: #000000;}.name {font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #666666;}}}}//   .info_foo {//     position: relative;//   }.edit {width: 100%;height: 34px;line-height: 34px;text-align: center;position: absolute;bottom: 0;left: 0;display: none;font-size: 16px;font-family: Microsoft YaHei;font-weight: 400;color: #568aff;}.info_foo:hover .edit {display: block;}.content_h {height: 200px;overflow: auto;}.data_title {display: flex;justify-content: space-between;height: 27px;background: #ecf1fd;font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #a1aabf;line-height: 27px;padding: 0 12px;}.date_now {}
}
</style>

日历组件（可加上一年下一年）)相关推荐

手把手撸一个小而美的日历组件
手把手撸一个小而美的日历组件前言日历是前端开发中常见的业务组件之一,虽然现在有很多现成的日历组件,但是呢很多时候需要定制的时候就需要我们自己造一个,此时我们便需要了解日历的生成原理.其实也没有想象 ...
react 日历组件拖拽部分逻辑/元素
目标我们在上半部分实现了一个可以渲染年月的月视图的日历组件.其中有一个api是cellAppend,可以往日历内容区域写内容. 代码示例如下: <CalendarcellAppend={(ce ...
基于Vue开发一个日历组件
最近在做一个类似课程表的需求,需要自制一个日历来支持功能及展现,就顺便研究一下应该怎么开发日历组件. 更新 2.23修复了2026年2月份会渲染多一行的bug,谢谢@深蓝一人童鞋提出的bug,解决方案 ...
java月历组件_vue之手把手教你写日历组件
---恢复内容开始--- 1.日历组件 1.分析功能:日历基本功能,点击事件改变日期,样式的改变 1.结构分析:html 1.分为上下两个部分 2.上面分为左按钮,中间内容展示,右按钮下面分为周几展 ...
手把手教你写一个微信小程序日历组件
今天我们一起写一个微信小程序日历组件微信小程序日历组件 github.com/749264345/w- 好,我们先看一下要实现的模样,如下图由以上截图我们可以看到 1.日历可以通过按钮[切换展示效 ...
Android一个漂亮的日历组件源码
简介: Android 一个漂亮的日历组件源码主要特性日历样式完全自定义,拓展性强左右滑动切换上下周月,上下滑动切换周月模式抽屉式周月切换效果标记指定日期(marker) 跳转到指定日期下载 ...
记：使用IScroll.js 开发picker日历组件遇到的问题及经验总结
IScroll中文文档第一个问题: 边界留白就是这种,上边界(最小),下边界(最大)有两个列表的位置是不能选择的.解决的办法是: 在HTML中,添加空白节点就行了. 第二个问题:初始化之后的滚动停 ...
android 携程日历控件,仿携程酒店日历组件for小程序
仿携程酒店日历接受日历组件开发之前,本来是拒绝的,日历组件,表单组件绝逼是前端开发的一个噩梦,尤其要做好一个旅游项目的日历,产品的收货标准只有一条,你看携程都实现了哦, MMP的.要在小程序中实现携 ...
自已撸的一个小程序日历组件
? 小程序日历组件概述这是一款简单易用的小程序日历组件,实现了选择开始时间和结束时间的功能.克隆 maxrisk/calendar 之后可在微信开发者工具中打开查看示例. 项目地址:https:/ ...

日历组件（可加上一年下一年）)

el-calendar 日历组件（可加上一年下一年）

日历组件（可加上一年下一年）)相关推荐

最新文章

热门文章