vue 自定义月日历日程组件（MSchedule）

效果图

组件的使用

日程内容可以自定义
状态对应颜色可以自定义

<MSchedule :scheduleList="plan" :isExpend="false" :hasNumExpend="3" @handleDetail="handleDetail" @chooseEntireCard="chooseEntireCard"@changeMonth="changeMonth"><template v-slot:card="{row}"><span>时段：{{ row.timePeriod }}</span><span>课程：{{ row.course }}</span></template></MSchedule>

下载组件使用教程及参数点击这里

npm i mschedule -S

组件完整代码如下

html部分

<template><div class="month-container"><div class="month-top"><div class="m-btn-wrap"><span @click="handleShowLastMonth">上一月</span><span @click="handleShowToday"> 今天 </span><span @click="handleShowNextMonth">下一月</span></div><span class="m-today-date"> {{ year }}年{{ month > 9 ? month : `0${month}` }}月</span><div class="m-card-status"><div v-for="sta in cardStatus"><span class="square" :style="{background:sta.color}"></span><span class="title">{{ sta.title }}</span></div></div></div><div class="m-date-wrap"><ul class="m-week"><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul><ul class="m-day"><li v-for="(item,index) in days":class="{'m-isActive':item.isActive,'m-isCurToday':item.isCurToday}":key="index"><span @click="handleChooseCard(item)" class="m-date" :class="{'m-isCurMonth':item.isNextMonth||item.isLastMonth}">{{ item.day }}</span><template v-for="(plan,i) in item.planList"><div :key="`plan${i}`" @click="handleDetail(plan)"class="m-card-default":style="{background: cardStatus[plan.status].color}"><slot name="card" :row="plan"></slot></div></template></li></ul></div></div>
</template>

js 部分 import MyTools from "../utils/MyTools"; 点击这里

<script>
import MyTools from "../utils/MyTools";export default {name: 'monthSchedule',props: {list: {type: Array,},cardStatus: {type: Object,default: () => {return {1: {title: '已过期',color: '#9CADADB7'},2: {title: '进行中',color: '#FF6200'},3: {title: '未开始',color: '#3291F8'},}}}},data() {return {year: '',//年month: '',//月days: [],//日期endTime: null,startTime: null,monthValue: '',}},methods: {changeMonth() {const date = this.monthValue && this.monthValue.split('-').map(Number) || []if (date.length === 0) {return}this.year = date[0];this.month = date[1]this.days = [];this.pushDays();},//得到当前年这个月分有多少天getDays(Y, M) {return new Date(Y, M, 0).getDate();},//得到当前年，这个月的一号是周几getWeek(Y, M) {let now = new Date()now.setFullYear(this.year)now.setMonth(this.month - 1)now.setDate(1);return now.getDay();},/*** 获取本月日期*/pushDays() {//将这个月多少天加入数组daysfor (let i = 1; i <= this.getDays(this.year, this.month); i++) {const _day = `${i > 9 ? i : '0' + i}`, _month = `${this.month > 9 ? this.month : '0' + this.month}`,date = `${this.year}-${_month}-${_day}`;this.days.push({day: _day,//date,planList: this.list.filter(item => item.date === date),isCurMonth: true,month: _month,year: `${this.year}`,timestamp: new Date(date).getTime(),//转换时间戳})}this.getLastMonthDays()this.getNextMonthDays()},/*** 获取下个月的日期*/getNextMonthDays() {const month = this.month < 12 ? this.month + 1 : 1,year = this.month < 12 ? this.year : this.year + 1,len = 42 - this.getDays(this.year, this.month) - this.getWeek(this.year, this.month)//将下个月要显示的天数加入daysfor (let i = 1; i <= len; i++) {const _day = `${i > 9 ? i : '0' + i}`, _month = `${month > 9 ? month : '0' + month}`,date = `${year}-${_month}-${_day}`;this.days.push({day: _day,date,month: _month,year: `${year}`,planList: this.list.filter(item => item.date === date),isNextMonth: true,timestamp: new Date(date).getTime()})}},/*** 获取上个月的日期*/getLastMonthDays() {const month = this.month > 1 ? this.month - 1 : this.year > 1970 ? 12 : 1,year = this.month > 1 ? this.year : this.year > 1970 ? this.year - 1 : 1970,len = this.getWeek(this.year, this.month),lastMonthDays = this.getDays(this.year, this.month - 1)//将上个月要显示的天数加入daysfor (let i = 0; i < len; i++) {const _month = month > 9 ? `${month}` : `0${month}`,date = `${year}-${_month}-${lastMonthDays - i}`;this.days.unshift({day: `${lastMonthDays - i}`,date,month: _month,year: `${year}`,planList: this.list.filter(item => item.date === date),isLastMonth: true,timestamp: new Date(date).getTime(),})}},/*** 获取日期数据*/getDate() {let now = new Date();this.year = now.getFullYear();this.month = now.getMonth() + 1;this.pushDays();},/*** 下个月*/handleShowNextMonth() {if (this.month < 12) {this.month = this.month + 1;} else {this.month = this.month = 1;this.year = this.year + 1;

css部分

<style>
ul {list-style: none;
}
.month-container {width: 100%;border: 1px solid #ddd;padding: 20px;box-sizing: border-box;
}.month-top {width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 1% 0;box-sizing: border-box;}.month-top .m-btn-wrap {width: 200px;display: flex;justify-content: space-around;color: #409EFF;}.month-top .m-btn-wrap > span {cursor: pointer;display: flex;justify-content: center;align-items: center;font-size: 15px;}.month-top .m-card-status {display: flex;width: 20%;justify-content: flex-end;
}.month-top .m-card-status > div {flex: 1;display: flex;padding: 0 2%;white-space: nowrap;line-height: 20px;box-sizing: border-box;}.month-top .m-card-status > div .square {display: flex;width: 16px;height: 16px;border-radius: 4px;box-sizing: border-box;
}.month-top .m-card-status > div .title {display: flex;align-items: center;line-height: 16px;margin-left: 4px;font-size: 14px;
}.m-date-wrap {width: 100%;height: auto;}.m-date-wrap .m-week {width: 100%;height: 80px;margin: 0;line-height: 80px;display: flex;flex-direction: row;font-size: 16px;background: #EAEDF2;box-sizing: border-box;}.m-date-wrap .m-week > li {width: 14.28%;
}.m-date-wrap .m-day {width: 100%;display: flex;flex-direction: row;padding: 0;margin: 0;font-size: 14px;flex-wrap: wrap;box-sizing: border-box;}.m-day .m-date{cursor: pointer;
}.m-date-wrap .m-day > li {width: 14.28%;padding: 1%;min-height: 100px;box-sizing: border-box;border: 1px solid #ddd;
}.m-date-wrap .m-day > li .m-card-default {cursor: pointer;width: 100%;min-height: 60px;border-radius: 8px;display: flex;margin: 6% 0;flex-direction: column;justify-content: space-around;white-space: nowrap;color: #fff;background: #FF6200;padding: 2% 4%;box-sizing: border-box;
}.m-date-wrap .m-day > li:nth-child(n+8) {border-top: none;
}.m-date-wrap .m-day > li:nth-child(n+1) {border-right: none;
}.m-date-wrap .m-day > li:nth-child(7n) {border-right: 1px solid #ddd
}.m-isCurMonth {background: #fff;color: #c0c4cc;
}.m-isCurToday {background: #FFF1F0 10000%;color: #FF2525;
}.m-isActive {background: #409EFF;color: #f2f8fe;
}</style>

vue 自定义月日历日程组件（MSchedule）相关推荐

[vue] vue自定义事件中父组件怎么接收子组件的多个参数？
[vue] vue自定义事件中父组件怎么接收子组件的多个参数? 子组件传递多个参数,父组件用展开运算符获取个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起 ...
vue关于element日历calendar组件上月、今天、下月、日历块点击事件
vue关于element日历calendar组件上月.今天.下月.日历块点击事件参考 https://blog.csdn.net/qq493820798/article/details/106858 ...
Vue 自定义音乐播放器组件为H5添加背景音乐
自定义音乐播放器组件为H5添加背景音乐: 1.创建music.vue组件 <template><div><div @click="changeOn" ...
vue可视化拖拽组件模板,vue自定义下拉框组件
怎样利用Vue动态生成form表单 . $formCreate参数rules 表单生成规则[inputRule,selectRule,...]options 初始化配置参数(详细见底部createOp ...
vue 自定义多选框组件
自定义多选框组件 <template><div class="checkBox"><input v-model="isInherit&quo ...
vue关于element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
交流qq群:672373393 前端项目公开在码云:https://gitee.com/xiao_yulong/noob-admin-ui 欢迎大家进群讨论! 辰小白小白最近在写日历模板,项目已经用了 ...
vue 自定义marquee无缝滚动组件
今天介绍一下,上下,左右无缝滚动的公告栏信息组件的开发. 首先上效果: 看起来有点卡顿,实际上还是挺顺畅的... 代码: 左右滚动的组件:marqueeX <template><di ...
vue 自定义marquee无缝滚动组件
首先上效果: 看起来有点卡顿,实际上还是挺顺畅的... 代码: 左右滚动的组件:marqueeX <template><div class="my-outbox" ...
vue自定义日历小组件
vue自定义小日历组件一.前言自己开发的项目需要用到类似博客侧边栏小日历组件,觉得自己造一个比较随心所欲,更能满足自己的需求,所以决定自己开发一个.最终效果如图所示. 二.日历样式我的这个日历组 ...

vue 自定义月日历日程组件（MSchedule）

vue 自定义月日历日程组件（MSchedule）相关推荐

最新文章

热门文章