<template>
<div id="calendar">
<!-- 年份 月份 -->
<div class="title">
<div class="label">活动日历</div>
<div class="total">当前活动 {{ list.length }} 场</div>
</div>
<div class="content">
<ul class="month">
<!--点击会触发pickpre函数,重新刷新当前日期 @click(vue v-on:click缩写) -->
<li class="arrow">
<span
@click="pickPre(currentYear, currentMonth, 'year')"
style="margin-right: 20px"
>❮❮</span
>
<span @click="pickPre(currentYear, currentMonth, 'month')">❮</span>
</li>
<li class="year-month">
<span class="choose-year">{{ currentYear }}年</span>
<span class="choose-month">{{ currentMonth }}月</span>
</li>
<li class="arrow">
<span @click="pickNext(currentYear, currentMonth, 'month')">❯</span>
<span
@click="pickNext(currentYear, currentMonth, 'year')"
style="margin-left: 20px"
>❯❯</span
>
</li>
</ul>
<!-- 星期 -->
<ul class="weekdays">
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
<li>日</li>
</ul>
<!-- 日期 -->
<ul class="days">
<!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->
<li v-for="(item, index) in days" :key="index">
<!--本月-->
<!--如果不是本月 改变类名加灰色-->
<span
v-if="item.month != currentMonth"
class="other-month"
@click="clickOtherItem(item)"
>{{ +item.date }}</span
>
<!--如果是本月 还需要判断是不是这一天-->
<span v-else>
<!--今天 同年同月同日-->
<span
class="current-month"
@click="clickItem(item)"
:class="{
'current-day':
item.day.getFullYear() == new Date().getFullYear() &&
item.day.getMonth() == new Date().getMonth() &&
item.day.getDate() == new Date().getDate(),
active: item.value === activeTime,
'not-allow': !item.hasActivity,
'has-activity': item.hasActivity,
}"
>{{ +item.date }}</span
>
</span>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "",
components: {},
mixins: [],
props: {},
computed: {},
watch: {},
data() {
return {
currentDay: 1,
currentMonth: 1,
currentYear: 1970,
currentWeek: 1,
days: [],
activeTime: "2023-09-21",
list: ["2023-09-20", "2023-09-21", "2023-09-11"],
};
},
created() {
this.initData(null);
},
mounted() {},
methods: {
// 点击其他月份的 判断
clickOtherItem(item) {
if (item.month < this.currentMonth) {
this.pickPre(this.currentYear, this.currentMonth, "month");
} else {
this.pickNext(this.currentYear, this.currentMonth, "month");
}
},
clickItem(item) {
if (!item.hasActivity) return;
this.activeTime = item.value;
},
initData: function (cur) {
var date;
console.log(cur);
if (cur) {
date = new Date(cur);
} else {
var now = new Date();
var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));
d.setDate(35);
date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
}
this.currentDay = date.getDate();
this.currentYear = date.getFullYear();
this.currentMonth = date.getMonth() + 1;
this.currentWeek = date.getDay(); // 1...6,0
if (this.currentWeek == 0) {
this.currentWeek = 7;
}
var str = this.formatDate(
this.currentYear,
this.currentMonth,
this.currentDay
);
this.days.length = 0;
// 今天是周日,放在第一行第7个位置,前面6个
//初始化本周
console.log(this.currentWeek, "this.currentWeek");
for (let i = this.currentWeek - 1; i >= 0; i--) {
const d = new Date(str);
d.setDate(d.getDate() - i);
const day = d;
const year = d.getFullYear();
const month =
d.getMonth() + 1 < 10 ? `0${d.getMonth() + 1}` : d.getMonth() + 1;
const date = d.getDate() < 10 ? `0${d.getDate()}` : d.getDate();
const value = `${year}-${month}-${date}`;
const dayobject = {
year,
month,
date,
value,
day,
};
this.days.push(dayobject); // 将日期放入data 中的days数组 供页面渲染使用
}
//其他周
for (var i = 1; i <= 35 - this.currentWeek; i++) {
var d = new Date(str);
d.setDate(d.getDate() + i);
const day = d;
const year = d.getFullYear();
const month =
d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
const date = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
const value = year + "-" + month + "-" + date;
var dayobject = {
year,
month,
date,
value,
day,
hasActivity: false, // 是否有活动数据
};
this.days.push(dayobject);
}
// 拿到日历数组后 根据返回的有活动的列表进行过滤
this.days = this.days.map((item) => {
if (this.list.indexOf(item.value) !== -1) {
this.$set(item, "hasActivity", true);
}
return item;
});
},
pickPre: function (year, month, type) {
if (type === "month") {
const preMonth = month - 1 <= 0 ? 12 : month - 1;
const preYear = month - 1 <= 0 ? year - 1 : year;
this.initData(this.formatDate(preYear, preMonth, 1));
} else {
this.initData(this.formatDate(year - 1, month, 1));
}
},
pickNext: function (year, month, type) {
if (type === "month") {
const nextMonth = month + 1 > 12 ? 1 : month + 1;
const nextYear = month + 1 > 12 ? year + 1 : year;
this.initData(this.formatDate(nextYear, nextMonth, 1));
} else {
this.initData(this.formatDate(year + 1, month, 1));
}
},
// 返回 类似 2016-01-02 格式的字符串
formatDate: function (year, month, day) {
var y = year;
var m = month;
if (m < 10) m = "0" + m;
var d = day;
if (d < 10) d = "0" + d;
return y + "-" + m + "-" + d;
},
},
};
</script>
<style lang="less" scoped>
* {
box-sizing: border-box;
}
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
body {
font-family: Verdana, sans-serif;
background: #e8f0f3;
}
#calendar {
width: 440px;
height: 400px;
display: flex;
flex-direction: column;
padding: 20px;
margin: 0 auto;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.title {
height: 28px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
.label {
color: #000;
font-family: PingFang SC;
font-size: 16px;
font-style: normal;
font-weight: 600;
}
.total {
height: 28px;
padding: 8px 15px;
border-radius: 32px;
background: rgba(0, 91, 255, 0.1);
display: flex;
align-items: center;
color: #005bff;
font-family: PingFang SC;
font-size: 14px;
font-style: normal;
font-weight: 400;
}
}
.content {
display: flex;
flex: 1;
height: 0;
flex-direction: column;
.month {
height: 40.25px;
display: flex;
justify-content: space-between;
padding: 0 10px;
align-items: center;
.year-month {
color: rgba(0, 0, 0, 0.85);
text-align: center;
font-family: PingFang SC;
font-size: 16px;
font-style: normal;
font-weight: 600;
.choose-year {
margin-right: 12px;
}
}
.arrow {
span:hover {
cursor: pointer;
color: #005bff;
}
}
}
.weekdays {
height: 40.25px;
display: flex;
li {
cursor: default;
display: flex;
align-items: center;
justify-content: center;
width: calc(100% / 7);
height: 40px;
color: rgba(0, 0, 0, 0.85);
text-align: center;
font-family: PingFang SC;
font-size: 14px;
font-style: normal;
font-weight: 400;
}
}
.days {
flex: 1;
height: 0;
display: flex;
flex-wrap: wrap;
li {
display: flex;
align-items: center;
justify-content: center;
width: calc(100% / 7);
height: 40px;
color: rgba(0, 0, 0, 0.85);
text-align: center;
font-family: PingFang SC;
font-size: 14px;
font-style: normal;
font-weight: 400;
span {
width: 34px;
height: 34px;
line-height: 34px;
}
.has-activity {
display: inline-block;
width: 34px;
height: 34px;
position: relative;
}
.current-day {
color: #005bff;
}
.active {
color: #fff;
display: inline-block;
width: 34px;
height: 34px;
background: #005bff;
border-radius: 50%;
position: relative;
}
.other-month {
color: rgba(0, 0, 0, 0.45);
cursor: default;
}
.current-month:hover {
width: 34px;
height: 34px;
display: inline-block;
cursor: pointer;
background: #f2f2f2;
color: rgba(0, 0, 0, 0.85);
border-radius: 50%;
}
.active:hover {
cursor: pointer;
color: #fff;
display: inline-block;
width: 34px;
height: 34px;
background: #005bff;
border-radius: 50%;
}
.not-allow:hover {
cursor: not-allowed;
background-color: white;
}
.has-activity::after {
content: "";
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #005bff;
left: 50%;
bottom: 2px;
margin-left: -2px;
}
.active::after {
content: "";
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: white;
left: 50%;
bottom: 2px;
margin-left: -2px;
}
}
}
}
</style>
js实现日历 完整版
最新推荐文章于 2024-07-27 18:37:51 发布