Vue制作一个日程表

自己的代码功底实在太弱，所以想要通过重写这种组件来锻炼一下能力。

我在项目中使用了element，这个日程表参照了full-calendar 和 element 的日历组件。

日期时间是使用了moment，http://momentjs.cn/，使用它来操作时间非常方便。

结果如下，主要是做出来了一个日历及日程表的形式，下一篇想在上面做出一些事件等。

<template><div id="parent"><div class="header"><div class="left"><el-button-group><el-button type="primary" size="mini" @click="prev">&lt;</el-button><el-button type="primary" size="mini" @click="next">&gt;</el-button></el-button-group>&nbsp;&nbsp;&nbsp;{{headerContent}}</div><div class="right"><el-button-group><el-button type="primary" size="mini" @click="switchMonth">月</el-button><el-button type="primary" size="mini" @click="switchWeek">周</el-button></el-button-group></div></div><div class="body"><table class="month-table"  cellspacing="0" cellpadding="0" v-show="showMonth"><thead><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th></thead><tbody><!-- 双重for循环生成 6 * 7 = 42 个日期格子 --><tr v-for="(week, weekIndex) in dates" v-bind:key="weekIndex"><td v-for="(date, dateIndex) in dates[weekIndex]"v-bind:key="dateIndex"@mouseenter="dateMouseEnter(weekIndex, dateIndex)"@mouseleave="dateMouseLeave(weekIndex, dateIndex)"><divclass="date":class="[date.class, date.isAlive]"><span>{{date.day}}</span></div></td></tr></tbody></table><!-- 生成一个周 时间列表 --><table class="week-table"  cellspacing="0" cellpadding="0" v-show="!showMonth"><thead><th></th><th v-for="(header, index) in weekTableHeader" v-bind:key="index" :class="header.class">{{header.date}}</th></thead><tbody><tr v-for="(hourMinute, index) in weekList[0]" v-bind:key="index"><td><div class="hours"><span>{{hourMinute}}</span></div></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table></div></div>
</template><script>
import moment from 'moment'
export default {data () {return {today: moment().format('YYYY-MM-DD'),currentYearMonth: moment().format('YYYY-MM'),weekTableHeader: [],dates: [],showMonth: true,weekList: [],headerContent: moment().format('YYYY-MM'),currentWeekday: ''}},methods: {// 点击上个月 通过改变currentYearMonth来获取上个月的 YYYY-MM 格式prev () {if (this.showMonth) {this.currentYearMonth = moment(this.currentYearMonth).subtract(1, 'months').format('YYYY-MM')this.headerContent = this.currentYearMonththis.createCalendar()} else {this.currentWeekday = moment(this.currentWeekday).subtract(7, 'days')this.weekHeaderContent()this.createWeekList()}},next () {if (this.showMonth) {this.currentYearMonth = moment(this.currentYearMonth).add(1, 'months').format('YYYY-MM')this.headerContent = this.currentYearMonththis.createCalendar()} else {this.currentWeekday = moment(this.currentWeekday).add(7, 'days')this.weekHeaderContent()this.createWeekList()}},switchMonth () {this.showMonth = truethis.headerContent = this.currentYearMonth},switchWeek () {this.showMonth = falsethis.weekHeaderContent()},dateMouseEnter (weekIndex, dateIndex) {this.dates[weekIndex][dateIndex].isAlive = 'date-alive'},dateMouseLeave (weekIndex, dateIndex) {this.dates[weekIndex][dateIndex].isAlive = ''},createCalendar () {this.dates = []// 获取当月的一号是星期几 以便来生成上月的日期 填补够42个格子const monthFirstDay = moment(this.currentYearMonth + '-01', 'YYYY-MM-DD')// 获得一号与第一个格子内应该有的天数距离 这里需要注意的是 weekday 是从周日 为 0 开始的let firstDayWeekday = moment(monthFirstDay).weekday()if (firstDayWeekday === 0) {firstDayWeekday = 7}let daysDistance = 1 - firstDayWeekdayfor (let weeks = 0; weeks < 6; weeks++) {this.dates.push([])for (let weekday = 0; weekday < 7; weekday++) {// 该对象有两个属性 一个是class属性 还有一个就是日期let date = {}date.day = moment(monthFirstDay).add(daysDistance, 'days')date.isAlive = ''const dayMonth = moment(date.day).month()// 是这个月的日期if (dayMonth === moment(monthFirstDay).month()) {date.class = 'current-month '// 日期是今天的高亮if (moment(date.day).isSame(this.today, 'days')) {date.class += 'today '}} else {date.class = 'not-current-month '}date.day = moment(date.day).format('DD')this.dates[weeks].push(date)daysDistance++}}},createWeekList () {this.weekTableHeader = ['Mon ', 'Tue ', 'Wed ', 'Thu ', 'Fri ', 'Sat ', 'Sun ']this.weekList = []for (let index = 0; index < 7; index++) {let item = {}item.date = moment(this.currentWeekday).add(index, 'days')if (item.date.isSame(this.today, 'days')) {item.class = 'today'}item.date = this.weekTableHeader[index] + item.date.format('MM/DD')this.weekTableHeader[index] = item}for (let days = 0; days < 7; days++) {this.weekList.push([])let item = ''for (let hours = 0; hours < 48; hours++) {if (hours % 2 === 0) {item = hours / 2 + '点'} else {item = ''}this.weekList[days].push(item)}}},weekHeaderContent () {this.headerContent = moment(this.currentWeekday).format('MM/DD') + '~' + moment(this.currentWeekday).add(6, 'days').format('MM/DD')}},created () {// v-show是在创建后 保留dom 只是做切换的 不会v-if那样 销毁dom 所以只需要创建一次this.createCalendar()let weekday = moment().weekday() === 0 ? 7 : moment().weekday()let daysDistance = 1 - weekdaythis.currentWeekday = moment().add(daysDistance, 'days')this.createWeekList()}
}
</script><style lang="less" scoped>
#parent {margin: 2rem auto;padding: 1rem;border: 1px solid #ebeef5;
}
.header {display: flex;justify-content: space-between;padding: 12px 20px;font-size: 18px;border-bottom: 1px solid #ebeef5;
}
.body {padding: 12px 20px 35px;
}
table {table-layout: fixed;width: 100%;
}
table thead th {padding: 10px 0;font-weight: 400;
}
tbody tr {display: table-row;vertical-align: inherit;border-color: inherit;
}
.month-table tbody td {vertical-align: inherit;border-right: 1px solid #ebeef5;border-bottom: 1px solid #ebeef5;
}
.month-table tbody tr:first-child td {border-top: 1px solid #ebeef5;
}
.month-table tr td:first-child {border-left: 1px solid #ebeef5;
}
.date {box-sizing: border-box;padding: 8px;height: 84px;
}
.not-current-month {color: #909399;
}
.current-month {color: #000000;
}
.today {color: #F44E50;background-color: #FFFF99;
}
.date-alive {background-color: rgb(252, 212, 215);
}
.week-table tbody tr td {border: 1px solid #ebeef5;
}
.hours{text-align: center;height: 24px;
}
</style>

Vue制作一个日程表相关推荐

flask 检测post是否为空_用Flask和Vue制作一个单页应用（五）
使用POST向后台发送数据 Flask app修改可以直接使用现有的路由处理函数来接收前端发来的数据,server/app.py中的all_res()修改如下: @app.route('/resou ...
基于 Vue 制作一个猜拳小游戏
目录前言: 项目效果展示: 对应素材: 代码实现思路: 实现代码: 总结: 前言: 在工作学习之余玩一会游戏既能带来快乐,还能缓解生活压力,跟随此文一起制作一个小游戏吧. 描述: 石头剪子布,是一种 ...
用VUE制作一个表格
好的,我来给你介绍一下如何使用 Vue.js 制作一个表格. 首先,你需要在 HTML 中创建一个表格标签,然后使用 Vue 的指令来渲染表格的内容. 例如,你可以使用 v-for 指令来循环遍历数据 ...
vue制作一个好看的网页
1.安装并配置node.js (见本人博客-node.js) 2.建好的项目目录如下 build: 用来存放项目构建脚本 config: 存放项目的一些基本配置信息,最常用的就是端口转发 node_ ...
❤️❌ 如何用vue制作一个探探滑动组件
前言嗨,说起探探想必各位程序汪都不陌生(毕竟妹子很多),能在上面丝滑的翻牌子,探探的的堆叠滑动组件起到了关键的作用,下面就来看看如何用vue写一个探探的堆叠组件 ? 一. 功能分析简单使用下探探会 ...
Vue—制作一个todoList
我们将制作这样一个任务计划列表: 功能分析: 1. 在输入框输入任务,回车创建新任务. 2. 将新创建任务显示到任务列表里. 2. 点击每个任务前面的选择框,就可以将任务标记为已完成. 3. 双击任务 ...
用Vue制作一个图片翻面效果
1.创建文件夹创建文件夹PhotoTest. 并在当前文件夹下创建img包用来存储图片. 把vue.js文件复制到PhotoTest文件夹下. 文件目录如下. 2.图片切片随便找一张图片在(ps) ...
利用vue制作一个简单的信息登记表 ---添加删除和修改
添加信息和按照索引值删除信息 (1)登记表的样式: (2)大致思路把输入框里的姓名,年龄,性别双向绑定data里对应的变量,变量赋初值皆为空(性别赋初值为男).是否同意协议,默认不同意:给提交按钮绑 ...
前端 vue 制作一个日历（一）
由于项目需求,需要做一个日历先上一个图吧此方法获取的天数是一个总的天数全部代码 <template><div id="wfcalendar">< ...

Vue制作一个日程表

Vue制作一个日程表相关推荐

最新文章

热门文章