日历看板 element日历组件

日历看板需求
日历展示分为两个维度月，日。在日历上每一天显示该天待办事项，点击事项跳转到该事项详细页面。可以查看上一月，下一月，上一天，下一天。
难点：以日维度的展示，element日历组件没有展示每一天的，需要仿照element日历组件自己实现。
页面大概功能实现了，具体对接口取数据，细节样式之后在加
效果

具体实现
贴下大概功能实现的代码
月没什么特别的，element日历组件自定义内容

<el-button size="mini" @click="handleMonth">月</el-button>
<el-button size="mini" @click="handleData">日</el-button>
<!-- 月 -->
<el-calendar v-if="select === 'month'"><template slot="dateCell" slot-scope="{date, data}"><div class="posi"><p class="abs">{{ data.day.split('-').slice(2).join('-') }}</p><el-button size="mini" type="warning" @click="handleRouter(data)">待办事项</el-button></div></template>
</el-calendar>

日
实现的时候也是骚操作，本来想着用element日历中自定义范围数组直接设置为一天，后来发现最短范围也要一周。

没办法日维度的只能自己实现。
我是首先用日历组件自定义范围设置为一周，打开浏览器控制台，定位到日历的elements元素，复制，粘贴，结构有了，最后把页面写死的改为变量。

<!-- 日 -->
<div class="el-calendar__body" v-if="select === 'date'"><div class="el-calendar__header"><div class="el-calendar__title">{{forDate}}</div><div class="el-calendar__button-group"><div class="el-button-group"><buttontype="button"class="el-button el-button--plain el-button--mini"@click="handleBefore(newDate)"><span> 上一天 </span></button><buttontype="button"class="el-button el-button--plain el-button--mini"@click="newDate=new Date().getDay()"><span> 今天 </span></button><buttontype="button"class="el-button el-button--plain el-button--mini"@click="handleAfter(newDate)"><span> 下一天 </span></button></div></div></div><tablecellspacing="0"cellpadding="0"class="el-calendar-table is-range"><thead><th>{{"周"+"日一二三四五六".charAt(newDate)}}</th></thead><tbody><tr class="el-calendar-table__row"><td class="current"><div class="el-calendar-day"><div class="posi"><el-buttonsize="mini"type="warning"@click="handleRouter()">待办事项</el-button></div></div></td></tr></tbody></table>
</div>

data() {return {select: 'month',newDate: new Date().getDay(), //当天周几，要注意的是周日为0forDate: moment().format('YYYY年MM月DD日'), //moment时间格式化，需要引入}
},
methods: {// 跳转待办handleRouter(val) {console.log(val)},// 月handleMonth(data) {this.select = 'month'},// 日handleData() {this.select = 'date'},// 上一天handleBefore(val) {if (val == 0) {this.newDate = 6} else {this.newDate = val - 1}},// 下一天handleAfter(val) {if (val == 6) {this.newDate = 0} else {this.newDate = val + 1}},
},

new Date().getDay()获取当天星期几，要注意的是周日为0,
"周"+"日一二三四五六".charAt(new Date().getDay())转换为周一这样的格式

日历看板 element日历组件相关推荐

vue学习之关于element日历calendar组件中上月，今天，下月的显示
今天学习写日历的模板,不过element日历组件官方文档提供的资料较少,所以试着写了个简单的,以后再深入学习. 显示效果图: 本月: 上月: 下月: 下方是源码 <template> &l ...
vue关于element日历calendar组件上月、今天、下月、日历块点击事件
vue关于element日历calendar组件上月.今天.下月.日历块点击事件参考 https://blog.csdn.net/qq493820798/article/details/106858 ...
element 日历组件应用相关的问题
1.使用element日历组件会自带按钮组,要实现切换时间的时候去获取相关月份的排班数据,但是按钮组并不存在于日历组件中 <el-calendar v-model="value&quo ...
vue关于element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
交流qq群:672373393 前端项目公开在码云:https://gitee.com/xiao_yulong/noob-admin-ui 欢迎大家进群讨论! 辰小白小白最近在写日历模板,项目已经用了 ...
element 日历定制化
element 日历定制化效果图组件封装  <calendar :datatime="timeData" @click="da ...
小程序日期（日历）时间选择器组件
封装一个小程序日期(日历)时间选择器组件简要说明: 一共两个版本 ,date-time-picker 和 date-time-picker-plus. date-time-picker 弹窗层是 ...
开源炫酷日历、网页日历模板、自适应大小日历、win10日历
开源炫酷日历.网页日历模板.自适应大小日历博主的话如何引用运行图片文件目录开源日历html.css源码博主的话本日历的样式,仿照的是Win10系统自带的日历样式.读者可自行粘贴源码放入所 ...
推荐一款移动端日历App吉日历
推荐一款移动端日历App吉日历一应用描述万年历.日历.农历.黄历.假期安排.天气预报.记事提醒便捷查看,一目了然! 二功能介绍: 1.万年历:精美的日期展示,完整的节日日历随意查看,节假日.休 ...
农历法定日历_木瓜日历安卓版下载-木瓜日历V1.5下载
下周五公司聚餐,不能忘记.女朋友生理期,要提醒她注意身体.木瓜日历app来帮你记录重要日程!专业的日历软件,不用担心错过重要事项,让你的生活更加条理化,添加闹钟提醒,不再忘记! 软件功能一款简单,有 ...
element table 组件内容换行方案
element table 组件内容换行方案 white-space的值: normal 默认.空白会被浏览器忽略. pre 空白会被浏览器保留.其行为方式类似 HTML 中的<pre> ...

日历看板 element日历组件

日历看板 element日历组件相关推荐

最新文章

热门文章