中企动力官做网站怎么样,做类似58类型网站,注册公司流程和费用大概多少钱,上海公司查名一网通功能#xff1a;
1.日历可以周视图、月视图切换#xff1b;
2.点击月视图中日期可以切换到对应周视图#xff1b;
3.点击周视图查看当日对应数据#xff1b;
4.周、月视图状态下#xff0c;点击前后按钮#xff0c;分别切换对应上下的周、月#xff1b;
5.点击回到…功能
1.日历可以周视图、月视图切换
2.点击月视图中日期可以切换到对应周视图
3.点击周视图查看当日对应数据
4.周、月视图状态下点击前后按钮分别切换对应上下的周、月
5.点击回到今天立即切回到周、月视图下对应的当日
引用dayjs处理日期结合el-calendar完美实现。
要注意的是日历显示周的话传的日期范围要按照计算所在星期比如我们的需求是周日为每周起始日那么就要给周日的日期和周六日期为起始日月视图我不想再去计算日期范围了就直接用了:value注意用的不是v-model而是value因为value是单向的v-model是双向数据绑定了。 template
div classchildContainerCompBar nameXX日历 iconNamerili.png titleName回到今天 handleBarClicknowCalendardiv classkalendardiv classkalendar-headerspan classcurrent-monuthi classel-icon-caret-left clickshowPrev/ii classel-icon-caret-right clickshowNext/i/spanel-radio-group v-modelmonthYear sizeminiel-radio-button label周/el-radio-buttonel-radio-button label月/el-radio-button/el-radio-group/divCalendarMonth v-ifmonthYear月 :calendarValuemonthDate :selectDaydayDate :dateListdateList getPlanListgetplanList/CalendarMonthCalendarWeek v-else :rangeArrdateRange :selectDaydayDate :dateListdateList
getPlanListgetplanList/CalendarWeek/divtabs :classmonthYear月?monthTabs:weekTabs v-modelactivePlan v-loadingisLoadingel-tab-pane nametabApplyEndPlan
//此处是个列表
/el-tab-paneel-tab-pane nametabEndPlan/el-tab-pane/tabs
/template
// 此处省略组件、接口引入
import dayjs from dayjs;
var weekplugin require(dayjs/plugin/weekday);
dayjs.extend(weekplugin)// 此处省略,直接放核心代码
data(){return{activePlan:tabApplyEndPlan,monthYear:周, // 周、月视图切换默认显示周monthDate:, // 传后端参数 YYYY-MM查视图上需要显示点的日期dayDate:, // 传后端参数 YYYY-MM-DD查视图下面对应的当日数据列表dateRange:[], // 周日历传入周日历视图日期范围dateList:[], // 存放月数据视图中需要显示点的日期}
},watch:{
// 比较简单直接省略代码了记录下逻辑
// 监听 monthDate、dayDate 值的改变调用对应接口
},methods:{
showPrev() {// 上个月if (this.monthYear 月) {this.monthDate dayjs(this.monthDate).add(-1, month).format(YYYY-MM);// 需要判断当前选中日期是否属于当前月份let _dayDate dayjs(this.dayDate).format(YYYY-MM);if (_dayDate this.monthDate) {// 计算本周第一天let day1 dayjs(this.dayDate).startOf(week).format(YYYY-MM-DD);// 计算本周最后一天let day2 dayjs(this.dayDate).endOf(week).format(YYYY-MM-DD);this.dateRange [day1, day2];} else {let day1 dayjs(this.monthDate).startOf(month).startOf(week).format(YYYY-MM-DD);let day2 dayjs(this.monthDate).startOf(month).endOf(week).format(YYYY-MM-DD);this.dateRange [day1, day2]}}// 上星期if (this.monthYear 周) {// 获取当前周视图let day1 dayjs(this.dateRange[0]).add(-1, week).startOf(week).format(YYYY-MM-DD);let day2 dayjs(this.dateRange[1]).add(-1, week).endOf(week).format(YYYY-MM-DD);this.monthDate dayjs(this.dateRange[0]).add(-1, week).startOf(week).format(YYYY-MM);this.dateRange [day1, day2]}},
showNext() {// 下个月if (this.monthYear 月) {this.monthDate dayjs(this.monthDate).add(1, month).format(YYYY-MM);// 需要判断当前选中日期是否属于当前月份let _dayDate dayjs(this.dayDate).format(YYYY-MM);if (_dayDate this.monthDate) {// 计算本周第一天let day1 dayjs(this.dayDate).startOf(week).format(YYYY-MM-DD);// 计算本周最后一天let day2 dayjs(this.dayDate).endOf(week).format(YYYY-MM-DD);this.dateRange [day1, day2];} else {let day1 dayjs(this.monthDate).endOf(month).startOf(week).format(YYYY-MM-DD);let day2 dayjs(this.monthDate).endOf(month).endOf(week).format(YYYY-MM-DD);this.dateRange [day1, day2]}}// 下星期if (this.monthYear 周) {// 获取当前周视图let day1 dayjs(this.dateRange[0]).add(1, week).startOf(week).format(YYYY-MM-DD);let day2 dayjs(this.dateRange[1]).add(1, week).endOf(week).format(YYYY-MM-DD);this.monthDate dayjs(this.dateRange[0]).add(1, week).startOf(week).format(YYYY-MM);this.dateRange [day1, day2]}},
// 返回今日nowCalendar() {this.monthDate dayjs(new Date()).format(YYYY-MM);this.dayDate dayjs(new Date()).format(YYYY-MM-DD);let day1 dayjs(new Date()).startOf(week).format(YYYY-MM-DD);let day2 dayjs(new Date()).endOf(week).format(YYYY-MM-DD);this.dateRange [day1, day2];this.activePlan tabApplyEndPlan},
// 周、月视图日期被点击处理方法getPlanList(date) {// console.log(this.monthYear)// console.log(date)this.dayDate date.day;// 点击上、下月/周日期不涉及视图的切换if (this.monthYear 月) {if (date.type next-month) {this.showNext()}if (date.type prev-month) {this.showPrev()}}if (this.monthYear 周) {let _month dayjs(date.day).format(YYYY-MM);if (date.type next-month) {if (_month ! this.monthDate) {this.monthDate dayjs(date.day).format(YYYY-MM);}}if (date.type prev-month) {if (_month ! this.monthDate) {this.monthDate dayjs(date.day).format(YYYY-MM);}}}if (date.type current-month) {this.monthYear 周;// 计算本周第一天let day1 dayjs(this.dayDate).startOf(week).format(YYYY-MM-DD);// 计算本周最后一天let day2 dayjs(this.dayDate).endOf(week).format(YYYY-MM-DD);// 计算点击日期所在周第一天所属月this.monthDate dayjs(day1).startOf(week).format(YYYY-MM);this.dateRange [day1, day2];}},}
自定义日历样式没有用日历原先的头全部自己重写的还不错
::v-deep .kalendar {-header {text-align: center;margin: 10px 16px 0 16px;.current-monuth {font-size: 16px;letter-spacing: 0;font-weight: 500;margin-left: 15%;color: #262626;font-family: PingFangSC-Medium;i {cursor: pointer;}}.el-radio-group {float: right;}.el-radio-button__orig-radio:checked .el-radio-button__inner {background: #ffffff;box-shadow: -1px 0 0 0 transparent;border: 1px solid rgba(199, 0, 11, 1);font-family: PingFangSC-Medium;font-size: 12px;color: #c7000b;letter-spacing: -0.04px;font-weight: 500;}.el-radio-button__inner:hover {color: #c7000b;}}.calender-dot-box {width: 100%;bottom: -8px;position: absolute;span {width: 6px;height: 6px;margin-right: 3px;border-radius: 50%;display: inline-block;:last-of-type {margin-right: 0;}}.endPlan {background-color: #d61212;}.applyEndPlan {background-color: #ffd100;}}.el-calendar {__body {padding: 10px 16px;}.is-today {.el-calendar-day {.calender-date {width: 34px;height: 34px;margin: 0 auto;color: #ff534f;border-radius: 10px;background: #fff;box-shadow: none;}}}__header {display: none;}.current {.el-calendar-day {color: #262626;}}.prev,.next {color: #bfbfbf;}-day {padding: 0;font-weight: 700;font-size: 16px;letter-spacing: 0;text-align: center;position: relative;transition: color 0.3s;font-family: DINAlternate-Bold;}-table {th {font-family: PingFangSC-Regular;font-size: 16px;color: #262626;letter-spacing: 0;text-align: center;line-height: 34px;font-weight: 400;padding: 0;:last-of-type,:first-of-type {color: #ff564e;}}td {border: none;.is-selected {background-color: transparent;}}.el-calendar-day {height: 34px;line-height: 34px;:hover {background-color: transparent;}.calendar-isSelected {width: 34px;height: 34px;margin: 0 auto;color: #fff;border-radius: 10px;background: #ff534f;box-shadow: 0px 0px 2px 0px rgba(238, 88, 64, 1);}}}}
再看看子组件里面先看月的
template!-- 月日历 --el-calendar :valuecalendarValue :first-day-of-week7 value-formatYYY-MMtemplate slotdateCell slot-scope{ date, data }div v-ifselectedDay data.day classcalendar-isSelected clickhandleDate($event, date, data){{ date.getDate() }}/divdiv v-else classcalender-date clickhandleDate($event, date, data){{ date.getDate() }}/divdiv classcalender-dot-box clickhandleDate($event, date, data, dot)template v-for(item) in dateListsspan classapplyEndPlan v-ifitem.date data.day item.applyEndPlanNum 0/spanspan classendPlan v-ifitem.date data.day item.endPlanNum 0/span/template/div/template/el-calendar
/template
script
export default {components: {},name: CalendarMonth,props: {selectedDay: {type: String,default: ,},calendarValue: {type: String,default: new Date(),},dateList: {type: Array,default: () {return [];},},},watch: {dateList: {handler(list) {this.dateLists list;},immediate: true,},},data() {return { monthDate: this.calendarValue, dateLists: [] };},created() { },methods: {handleDate(e, date, data) {this.$emit(getPlanList, data);},},
};
/script
style langscss scoped/style
周日历组件
template!-- 周日历 --el-calendar :rangerangeArr :first-day-of-week7 value-formatYYY-MMtemplate slotdateCell slot-scope{date,data}div v-ifselectedDay data.day classcalendar-isSelected clickhandleDate($event, date, data){{ date.getDate() }}/div div v-else classcalender-date clickhandleDate($event, date, data){{ date.getDate() }}/divdiv classcalender-dot-box clickhandleDate($event, date, data)template v-for(item) in dateListspan classapplyEndPlan v-ifitem.date data.day item.applyEndPlanNum 0/spanspan classendPlan v-ifitem.date data.day item.endPlanNum 0/span/template/div/template/el-calendar
/template
script
export default {components: {}, name: CalendarWeek, props: {selectedDay: {type: String, default: ,}, rangeArr: {type: Array,default: () {return [];}}, dateList: {type: Array, default: () {return [];}}}, data() {return {}}, created() {}, methods: {handleDate(e, date, data) {// console.log(e,date,data)this.$emit(getPlanList, data)},}
}/script
style langscss scoped/style
其实应该把日历组件二次封装一下就不用单独再去写周、月日历子组件了有空了可以试试。
不过不得不再吐槽一句elementui的日历组件给提供的API真心的少功能很简单。。。
最终效果图
月视图效果图 月视图下有时候会出现整整一行的灰色日期看起来不是很美观那么就需要操作dom通过js判断操作dom来处理。大概思路就是先通过 document.querySelectorAll(.el-calendar-table__row) 获取到所有.el-calendar-table__row的元素节点lists然后循环遍历这些节点若其子元素class中含有.current那么就说明是带有当月的日期则不改变样式若不含则说明这整行都是前\后月的日期那么就可以把该.el-calendar-table__row的css里面加上属性display:none。
周视图效果图
