vue周日历组件，从周一开始周日结束

活动日历组件，从周一开始

功能：

1、左右按钮为【上一周】【下一周】。日期显示一到日（对应为周一到周日）

2、默认选中当前日期；

3、点击对应月份的时间，则该月份亮起，顶部时间显示对应月份。

4、如一周内出现两个月份，则当前选择的月份正常显示，未选中页面则置灰。

关键代码：

<template><div class="weekly-calendar"><h2>{{ showMonth }}</h2><div class="controls"><button class="prev-btn" @click="prevWeek">Prev</button><button class="next-btn" @click="nextWeek">Next</button></div><div class="days"><div class="day-labels"><div class="day-label">一</div><div class="day-label">二</div><div class="day-label">三</div><div class="day-label">四</div><div class="day-label">五</div><div class="day-label">六</div><div class="day-label">日</div></div><div class="day-cells"><div class="day-cell" v-for="(day, index) in days" :key="index":class="{ today: (isToday(day) && !checkIndex) || checkIndex == index, 'not-in-month': !isInMonth(day) }"><div class="day-number" @click="clickDays(index, day)">{{ isToday(day) ? '今天' : format(day, "dd") }}</div></div></div></div></div>
</template><script>
import { format } from "date-fns";export default {data() {return {currentWeek: {start: null,end: null},checkIndex: null,// 当前选中indexshowMonth: null // 当前显示月份};},computed: {days() {const days = [];const weekStart = this.currentWeek.start;const weekEnd = this.currentWeek.end;const diff = (weekEnd.getTime() - weekStart.getTime()) / (24 * 60 * 60 * 1000);for (let i = 0; i <= diff; i++) {const day = new Date(weekStart.getTime() + i * 24 * 60 * 60 * 1000);days.push(day);}return days;}},methods: {format,clickDays(index, day) {this.checkIndex = indexthis.seShowMonth(day)},prevWeek() {this.checkDay = nullconst firstDayOfWeek = 1;const weekStart = this.currentWeek.start;const prevWeekStart = new Date(weekStart.getTime() - 7 * 24 * 60 * 60 * 1000);this.currentWeek.start = new Date(prevWeekStart.getTime() - (prevWeekStart.getDay() - firstDayOfWeek) * 24 * 60 * 60 * 1000);this.currentWeek.end = new Date(this.currentWeek.start.getTime() + 6 * 24 * 60 * 60 * 1000);this.checkIndex = 3const day = new Date(this.currentWeek.end.getTime() - 3 * 24 * 60 * 60 * 1000);this.seShowMonth(day)},nextWeek() {this.checkDay = nullconst firstDayOfWeek = 0;const weekEnd = this.currentWeek.end;const nextWeekEnd = new Date(weekEnd.getTime() + 7 * 24 * 60 * 60 * 1000);this.currentWeek.end = new Date(nextWeekEnd.getTime() + (firstDayOfWeek - nextWeekEnd.getDay()) * 24 * 60 * 60 * 1000);this.currentWeek.start = new Date(this.currentWeek.end.getTime() - 6 * 24 * 60 * 60 * 1000);this.checkIndex = 3const day = new Date(this.currentWeek.start.getTime() + 3 * 24 * 60 * 60 * 1000);this.seShowMonth(day)},isToday(date) {const today = new Date();return date.toDateString() === today.toDateString();},isInMonth(date) {return format(date, "yyyy/MM") == this.showMonth},seShowMonth(day) {this.showMonth = format(day, "yyyy/MM")},setToday() {const firstDayOfWeek = 1;const today = new Date();const currentWeekStart = new Date(today.getTime() - (today.getDay() - firstDayOfWeek) * 24 * 60 * 60 * 1000);this.currentWeek.start = currentWeekStart;this.currentWeek.end = new Date(currentWeekStart.getTime() + 6 * 24 * 60 * 60 * 1000);this.seShowMonth(this.currentWeek.start)}},created() {this.setToday()}
};
</script><style scoped>
.weekly-calendar {max-width: 500px;margin: 0 auto;font-family: Arial, sans-serif;
}.weekly-calendar h2 {text-align: center;
}.weekly-calendar .controls {display: flex;justify-content: space-between;margin-bottom: 20px;
}.weekly-calendar .day-labels {display: flex;justify-content: space-between;margin-bottom: 10px;
}.weekly-calendar .day-label {flex: 1;text-align: center;font-size: 16px;font-weight: bold;
}.weekly-calendar .day-cells {display: flex;justify-content: space-between;flex-wrap: wrap;
}.weekly-calendar .day-cell {flex: 1;border: 1px solid #ccc;padding: 10px;text-align: center;
}.weekly-calendar .today {background-color: #f9f9f9;
}.weekly-calendar .not-in-month {color: #ccc;
}
</style>

vue周日历组件，从周一开始周日结束相关推荐

一周日期选择（周一至周日）
一周日期选择(周一至周日) 效果图: html代码: <div class="ewb-date-link"><span data-number="-36 ...
日历选择：周一到周日固定、选择当前周、上一周、下一周的日期。
其中日期是分为前一周.当前周.下一周三段时间戳来计算的. 周一到周日的时间戳.我是根据第一天的时间戳firstTime来往后推的. perTime = firstTime + i * 24 * 60 ...
一个vue的日历组件
说明: 1.基于element-ui开发的vue日历组件. 地址更新: 1.增加value-format指定返回值的格式 2.增加头部插槽自定义头部 <ele-calendar >< ...
VUE自定义日历组件，计算年月日，上个月份的空白展示，点击某一天进入详情页面
效果图: 背景描述: 产品提出需求,需要日历来配置每一天的商品价格.刚开始使用的element-ui的el-calendar组件,由于样式.跳转.点击事件等功能都不好控制,所以自己写了一个日历组件.完 ...
vue 自定义日历组件
<template> <div class=""> <div class="calendarTraffic" name=" ...
vue节假日日历组件
先上效果图一.整个数据总计为42个格子,格式为六行七列,单个天数数据格式datas单个字段 day: 1 //当前是几号 isMonth: "" //是否是当前月份(空值是当前月 ...
vue自定义日历组件（12日历平铺） pc/移动
文章目录前言前言思路: 获取每个月天数,把每个月天数给数组中的day 再day天数给list的name 获取12个月的年月日把获取的年月日和选中的年月日对比如果相等让list中的type变为 ...
vue自定义日历组件
代码地址 https://github.com/nan1010082085/vue-components/tree/master/CustomCalendar 享一下组件目录 tip: 组件功能: 展 ...
vue 日历翻拍效果_VUE实现日历组件功能
哈哈, 就在昨天笔者刚刚在Github 上发布了一个基于VUE的日历组件.过去做日历都是需要引用 jquery moment 引用 fullCalendar.js 的.几者加起来体积庞大不说,也并不是 ...

vue周日历组件，从周一开始周日结束

vue周日历组件，从周一开始周日结束相关推荐

最新文章

热门文章