uniapp日历插件
文章描述：
uniapp日历插件自定义日里面的内容
<template>
<!-- 打卡日历页面 -->
<view class='all'>
<view class="bar">
<!-- 上一个月 -->
<view class="previous" @click="handleCalendar(0)">
<button class="barbtn">上一月</button>
</view>
<!-- 显示年月 -->
<view class="date">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>
<!-- 下一个月 -->
<view class="next" @click="handleCalendar(1)">
<button class="barbtn">下一月</button>
</view>
</view>
<!-- 显示星期 -->
<view class="week">
<view class="week_ri" v-for="(item,index) in weeks_ch" :key="index">{{item}}</view>
</view>
<view class="myDateTable">
<view v-for="(item,j) in days" :key="j" class='dateCell'>
<view v-if="item.date==undefined || item.date == null" class='cell'>
<text :decode="true"> </text>
</view>
<view v-else @click="clickSignUp(item.date)">
<!-- 已订餐到日期 -->
<view v-if="item.isSign == 2" class='cell yellow' style="background: #ecf3ff;color: #000000;">
<view>
<text>{{item.date}}</text>
</view>
<!-- <view v-for="(itemx,i) in item.list">
<view>
{{itemx}}
</view>
</view> -->
</view>
<!-- 今日日期-->
<!-- <view class="cell white bg-red" v-else-if="cur_year==toYear && cur_month==toMonth && item.date==today ">
<text>{{item.date}}</text>
</view> -->
<!-- 点击的日期 -->
<view class="cell white bg-red" style="background: #ffaa7f;color: #ffffff;" v-else-if="item.isSign == 3">
<text>{{item.date}}</text>
</view>
<!-- 当前日期之后 -->
<view class="whiteColor cell" v-else>
<text>{{item.date}}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
days: [],//日历
SignUp: [1,10],//已经订餐
cur_year: 0, //当前选的年
cur_month: 0, //当前选的月
today: parseInt(new Date().getDate()), //今天
toMonth: parseInt(new Date().getMonth() + 1), //本月
toYear: parseInt(new Date().getFullYear()), //本年
weeks_ch: ['日', '一', '二', '三', '四', '五', '六'],
}
},
props: {
//年
sendYear: {
type: Number,
default: new Date().getFullYear()
},
//月
sendMonth: {
type: Number,
default: new Date().getMonth() + 1
},
},
created() {
this.cur_year = this.sendYear;//年
this.cur_month = this.sendMonth;//月
this.calculateEmptyGrids(this.cur_year, this.cur_month);
this.calculateDays(this.cur_year, this.cur_month);
//网络请求
this.onJudgeSign(this.SignUp);
},
methods: {
// 获取当月共多少天
getThisMonthDays(year, month) {
return new Date(year, month, 0).getDate()
},
// 获取当月第一天星期几
getFirstDayOfWeek(year, month) {
return new Date(Date.UTC(year, month - 1, 1)).getDay();
},
// 计算当月1号前空了几个格子，把它填充在days数组的前面
calculateEmptyGrids(year, month) {
//计算每个月时要清零
this.days = [];
const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
if (firstDayOfWeek > 0) {
for (let i = 0; i < firstDayOfWeek; i++) {
var obj = {
date: null,
isSign: false,
list:[1,2,3]
}
this.days.push(obj);
}
}
console.log(this.days)
},
// 绘制当月天数占的格子，并把它放到days数组中
calculateDays(year, month) {
const thisMonthDays = this.getThisMonthDays(year, month);
for (let i = 1; i <= thisMonthDays; i++) {
var obj = {
date: i,
isSign: false,
list:[1,2,3]
}
this.days.push(obj);
}
//console.log(this.days);
},
//匹配判断当月与当月哪些日子订餐
onJudgeSign(date) {
var signs = date;
var daysArr = this.days;
//日期相同，订过餐
for(var i=0;i<signs.length;i++){
for (var j=0; j<daysArr.length;j++) {
if (daysArr[j].date == signs[i]) {
daysArr[j].isSign = 2;
}
}
}
this.days = daysArr;
},
// 切换控制年月，上一个月，下一个月
handleCalendar(type) {
console.log('000')
const cur_year = parseInt(this.cur_year);
const cur_month = parseInt(this.cur_month);
var newMonth;
var newYear = cur_year;
if (type === 0) { //上个月
newMonth = cur_month - 1;
if (newMonth < 1) {
newYear = cur_year - 1;
newMonth = 12;
}
} else {
newMonth = cur_month + 1;
if (newMonth > 12) {
newYear = cur_year + 1;
newMonth = 1;
}
}
this.calculateEmptyGrids(newYear, newMonth);
this.calculateDays(newYear, newMonth);
//网络请求
this.SignUp = [3,12];
this.onJudgeSign(this.SignUp);
this.cur_year = newYear;
this.cur_month = newMonth;
// this.SignUp = []; //清空
this.$emit('dateChange',this.cur_year+"-"+this.cur_month); //传给调用模板页面去拿新数据
},
//点击日期
clickSignUp(t){
console.log(this.cur_year)//年
console.log(this.cur_month)//月
var t = t;//点击的天
var signs = this.SignUp;
var daysArr = this.days;
//日期相同，订过餐,点击的日期
for(var i=0;i<signs.length;i++){
for (var j=0; j<daysArr.length;j++) {
if (daysArr[j].date == signs[i]) {
daysArr[j].isSign = 2;
}
if(t == daysArr[j].date){
daysArr[j].isSign = 3
}
if(daysArr[j].isSign !=2 && t!=daysArr[j].date){
daysArr[j].isSign = 1;
}
}
}
this.days = daysArr;
}
}
}
</script>
<style>
.all .bar {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10rpx;
}
.bar .barbtn {
height: 30px;
line-height: 30px;
font-size: 12px;
}
/* 星期 */
.all .week {
display: flex;
/* flex-direction: row; */
/* justify-content: space-between; */
padding: 20rpx;
border-radius: 10px;
background-color: #fff;
width: 90%;
margin-left: 2%;
}
.week_ri{
margin-left: 19rpx;
padding: 0 48rpx 0 0;
}
.myDateTable {
margin: 2.5vw;
border-radius: 10px;
background: #fff;
}
.myDateTable .dateCell {
/* width: 11vw; */
width: 13vw;
height: 104rpx;
/* padding: 1vw; */
display: inline-block;
text-align: center;
font-size: 16px;
}
.dateCell .cell {
display: flex;
border-radius: 50%;
/* height: 9vw; */
height: 13vw;
justify-content: center;
align-items: center;
}
.greenColor {
color: #01b90b;
font-weight: bold;
}
.bgWhite {
background-color: #fff;
}
.bgGray {
background-color: rgba(255, 255, 255, 0.42);
}
.bgBlue {
font-size: 14px;
background-color: #4b95e6;
}
.redColor {
color: #ff0000;
}
.TipArea{
word-break:break-all;
word-wrap:break-word;
font-size: 14px;
padding: 10px;
}
.impTip{
display: inline-block;
color: #ff0000;
}
</style>
案例二
<template>
<!-- 打卡日历页面 -->
<view class='all'>
<view class="bar">
<!-- 上一个月 -->
<view class="previous" @click="handleCalendar(0)">
<button class="barbtn">上一月</button>
</view>
<!-- 显示年月 -->
<view class="date">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>
<!-- 下一个月 -->
<view class="next" @click="handleCalendar(1)">
<button class="barbtn">下一月</button>
</view>
</view>
<!-- 显示星期 -->
<view class="week">
<view class="week_ri" v-for="(item,index) in weeks_ch" :key="index">{{item}}</view>
</view>
<view class="myDateTable">
<view v-for="(item,j) in days" :key="j" class='dateCell'>
<view v-if="item.date==undefined || item.date == null" class='cellno'>
<text :decode="true"> </text>
</view>
<view v-else @click="clickSignUp(item.date)" class="day cell">
<!-- 已订餐到日期 -->
<view v-if="item.isSign == 2" class='cell yellow' style="">
<view class="">
{{item.date}}
</view>
<view v-for="(itemx,i) in item.list" class="box" v-if="item.isSign == 2">
{{itemx}}
</view>
</view>
<!-- 今日日期-->
<view class="cell white bg-red" v-else-if="cur_year==toYear && cur_month==toMonth && item.date==today ">
<text>{{item.date}}</text>
</view>
<!-- 点击的日期 -->
<view class="cell white bg-red" style="background: #ffaa7f;color: #ffffff;" v-else-if="item.isSign == 3">
<view>{{item.date}}</view>
<view v-if="item.isSign && item.isSign==3" class="box">{{item.list}}</view>
</view>
<!-- 当前日期之后 -->
<view class="whiteColor cell" v-else>
<view>{{item.date}}</view>
<view v-for="(itemx,i) in item.list" class="box" v-if="item.isSign == 2">
{{itemx}}
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
days: [],//日历
SignUp: [1,10],//已经订餐
cur_year: 0, //当前选的年
cur_month: 0, //当前选的月
today: parseInt(new Date().getDate()), //今天
toMonth: parseInt(new Date().getMonth() + 1), //本月
toYear: parseInt(new Date().getFullYear()), //本年
weeks_ch: ['日', '一', '二', '三', '四', '五', '六'],
}
},
props: {
//年
sendYear: {
type: Number,
default: new Date().getFullYear()
},
//月
sendMonth: {
type: Number,
default: new Date().getMonth() + 1
},
},
created() {
this.cur_year = this.sendYear;//年
this.cur_month = this.sendMonth;//月
this.calculateEmptyGrids(this.cur_year, this.cur_month);
this.calculateDays(this.cur_year, this.cur_month);
//网络请求
this.onJudgeSign(this.SignUp);
},
methods: {
// 获取当月共多少天
getThisMonthDays(year, month) {
return new Date(year, month, 0).getDate()
},
// 获取当月第一天星期几
getFirstDayOfWeek(year, month) {
return new Date(Date.UTC(year, month - 1, 1)).getDay();
},
// 计算当月1号前空了几个格子，把它填充在days数组的前面
calculateEmptyGrids(year, month) {
//计算每个月时要清零
this.days = [];
const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
if (firstDayOfWeek > 0) {
for (let i = 0; i < firstDayOfWeek; i++) {
var obj = {
date: null,
isSign: false,
// list:[1,2,3]
}
this.days.push(obj);
}
}
console.log(this.days)
},
// 绘制当月天数占的格子，并把它放到days数组中
calculateDays(year, month) {
const thisMonthDays = this.getThisMonthDays(year, month);
for (let i = 1; i <= thisMonthDays; i++) {
var obj = {
date: i,
isSign: false,
// list:[1,2,3]
}
if(this.SignUp.indexOf(i)===-1){
}else{
// console.log('11')
obj.list = [1,2,3]
}
this.days.push(obj);
}
//console.log(this.days);
},
//匹配判断当月与当月哪些日子订餐
onJudgeSign(date) {
var signs = date;
var daysArr = this.days;
//日期相同，订过餐
for(var i=0;i<signs.length;i++){
for (var j=0; j<daysArr.length;j++) {
if (daysArr[j].date == signs[i]) {
daysArr[j].isSign = 2;
}
}
}
this.days = daysArr;
},
// 切换控制年月，上一个月，下一个月
handleCalendar(type) {
console.log('000')
const cur_year = parseInt(this.cur_year);
const cur_month = parseInt(this.cur_month);
var newMonth;
var newYear = cur_year;
if (type === 0) { //上个月
newMonth = cur_month - 1;
if (newMonth < 1) {
newYear = cur_year - 1;
newMonth = 12;
}
} else {
newMonth = cur_month + 1;
if (newMonth > 12) {
newYear = cur_year + 1;
newMonth = 1;
}
}
this.calculateEmptyGrids(newYear, newMonth);
this.calculateDays(newYear, newMonth);
//网络请求
this.SignUp = [3,12];
this.onJudgeSign(this.SignUp);
this.cur_year = newYear;
this.cur_month = newMonth;
// this.SignUp = []; //清空
this.$emit('dateChange',this.cur_year+"-"+this.cur_month); //传给调用模板页面去拿新数据
},
//点击日期
clickSignUp(t){
console.log(this.cur_year)//年
console.log(this.cur_month)//月
var t = t;//点击的天
var signs = this.SignUp;
var daysArr = this.days;
//日期相同，订过餐,点击的日期
for(var i=0;i<signs.length;i++){
for (var j=0; j<daysArr.length;j++) {
if (daysArr[j].date == signs[i]) {
daysArr[j].isSign = 2;
}
if(t == daysArr[j].date){
daysArr[j].isSign = 3
}
if(daysArr[j].isSign !=2 && t!=daysArr[j].date){
daysArr[j].isSign = 1;
}
}
}
console.log(this.days)
this.days = daysArr;
}
}
}
</script>
<style>
.all .bar {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10rpx;
}
.bar .barbtn {
height: 30px;
line-height: 30px;
font-size: 12px;
}
/* 星期 */
.all .week {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20rpx;
border-radius: 10px;
background-color: #fff;
width: 90%;
margin-left: 2%;
}
.week_ri{
margin-left: 19rpx;
padding: 0 48rpx 0 0;
}
.myDateTable {
margin: 2.5vw;
border-radius: 10px;
background: #fff;
}
.myDateTable .dateCell {
width: calc(13vw - 4rpx);
display: inline-block;
text-align: center;
font-size: 16px;
margin-right: 8rpx;
}
.myDateTable .dateCell{
line-height: 1.2;
font-size: 32rpx;
margin-bottom: 10rpx;
}
.day{
background: #f9f9f9;
/* min-height: 10vw; */
padding: 5rpx 0 5rpx 0;
}
.cell{
display: flex;
flex-wrap: wrap;
flex-direction: column;
color: #999;
min-height: 10vw;
padding: 5rpx 0 5rpx 0;
}
.box{
color: #2497f9;
margin: 0;
padding: 0;
font-size: 18rpx;
}
.white{ color: #fff; }
.bg-red{ background: #ffaa7f; }
</style>
发布时间：2023/08/22
发表评论