要求的ui样式
实现后
日期年月可以选择。
实现:
wxml
<view class="calendarOut">
<view class="fullDate titleText">
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view class="picker">
{{multiArray[0][multiIndex[0]]}}年{{multiArray[1][multiIndex[1]]}}月
</view>
</picker>
</view>
<view class="nowrap allFlexBet lineCalendar" wx:for="{{list}}" wx:for-index="indexs" wx:for-item='items' wx:key='indexs'>
<view wx:for="{{items}}" bindtap="seeOneDay" data-indexs='{{item.indexOn}}' class="singleDay {{item.day?'':'contentText_xl dayTitle'}} {{item.lastWeek?'loatDay':''}} {{item.indexOn == activeDay?'activeDay':''}}">
{{item.name}}
<view class="calendarDot" wx:if="{{item.schedule}}"></view>
</view>
</view>
</view>
wxcss
/*@import "/static/css/common.wxss";*/
.nowrap{
display:flex;
flex-wrap:nowrap;
}
.allFlexBet{
display: flex;
justify-content: space-between;
}
.calendarOut{
background: #fff;
border-radius: 0 0 60rpx 60rpx;
padding:20rpx 29rpx 70rpx 29rpx;
}
.fullDate{
color: #000;
font-weight: bold;
margin-bottom: 32rpx;
}
.lineCalendar{
margin-bottom: 40rpx;
}
.singleDay{
width: 64rpx;
height: 64rpx;
text-align: center;
line-height: 64rpx;
position: relative;
transition: all .3s linear;
border-radius: 50%;
}
.calendarDot{
position: absolute;
bottom: -20rpx;
left: 0;
right: 0;
margin: auto;
background: #FF9502;
width: 12rpx;
height: 12rpx;
border-radius: 50%;
}
.dayTitle{
color: #666;
}
.thisMonth{
color: #000;
}
.loatDay{
color: rgba(0,0,0,0.3);
}
.activeDay{
background: linear-gradient(0deg, #3693F1, #152CD8);
box-shadow: 0px 10rpx 10rpx 0px rgba(38, 98, 229, 0.3);
border-radius: 50%;
color: #fff;
}
.thisDay{
color:#3693F1;
}
js部分
// colorui/common/calendar/calendar.js
const app = getApp()
Component({
lifetimes:{
attached: function() {
this.createOptions().then(()=>{
this.createCaleData(new Date())
})
},
},
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
list:[],
fullDate:'',
thisDay:'',
activeDay:'',
dateArr:[],
multiArray: [],
multiIndex: [0, 0],
},
/**
* 组件的方法列表
*/
methods: {
getWeek(dateString) {
var dateArray = dateString.split("-");
date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2]);
return "日一二三四五六".charAt(date.getDay());
},
pushData(list,dayNum){
for(let i=0;i<dayNum;i++){
list.push({name:i+1,lastWeek:false,day:true})
}
return list
},
haveDay(dateString){
let str = '日一二三四五六'
return str.indexOf(dateString)
},
seeOneDay(e){
let index = e.currentTarget.dataset.indexs
if(index>6){
this.setData({
activeDay:e.currentTarget.dataset.indexs
})
}
},
createCaleData(myDate){
if(myDate.getFullYear() == new Date().getFullYear() && myDate.getMonth() == new Date().getMonth()){
myDate = new Date()
}
var year = myDate.getFullYear(); //年
var month = myDate.getMonth()+1; //月
var day = myDate.getDate(); //日
var fristDay = this.getWeek(year + '-' + month + '-' + '01');
var fullDate = year + '年' + month + '月'
var list = [
{name:"日",lastWeek:false,day:false,schedule:false},
{name:"一",lastWeek:false,day:false,schedule:false},
{name:"二",lastWeek:false,day:false,schedule:false},
{name:"三",lastWeek:false,day:false,schedule:false},
{name:"四",lastWeek:false,day:false,schedule:false},
{name:"五",lastWeek:false,day:false,schedule:false},
{name:"六",lastWeek:false,day:false,schedule:false}
]
var dayNum = new Date(year,month,0).getDate()
var lastDay = 6-this.haveDay(this.getWeek(year + '-' + month + '-' + dayNum))
var preMonthDay = new Date(year,month-1,0).getDate()
var residueDay = this.haveDay(fristDay)
for(let i = 0; i<residueDay;i++){
list.push({name:preMonthDay-(residueDay-i)+1,lastWeek:true,day:true,schedule:false})
}
list = this.pushData(list,dayNum)
for(let i = 0; i<lastDay;i++){
list.push({name:i+1,lastWeek:true,day:true,schedule:false})
}
list.map((item,index)=>{
item.indexOn = index
if(item.name == day && !item.lastWeek){
this.setData({
activeDay:index
})
}
})
this.getThisMonth(year,month)
this.setData({
list:app.splieLine(list,7),
fullDate:fullDate,
thisDay:day
})
},
bindMultiPickerChange(e){
this.setData({
multiIndex:e.detail.value
})
this.createCaleData(new Date(this.data.multiArray[0][this.data.multiIndex[0]],this.data.multiArray[1][this.data.multiIndex[1]]-1,01))
},
getThisMonth(year,month){
let arr = []
this.data.multiArray[0].map((item,index)=>{
if(item == year){
arr[0] = index
}
})
this.data.multiArray[1].map((item,index)=>{
if(item == month){
arr[1] = index
}
})
this.setData({
multiIndex:arr
})
},
createOptions(){
return new Promise(resolve=>{
let thisYear = new Date().getFullYear()
let arr = [[thisYear-1,thisYear,thisYear+1],['01', '02', '03', '04', '05','06', '09', '08', '09', '10','11', '12']]
this.setData({
multiArray:arr
},()=>{
resolve()
})
})
}
}
})
app.js中的拆分方法
splieLine(list,line){
let num = Math.ceil(list.length/line),nlist =[]
for(let i=0;i<num;i++){
nlist.push(list.splice(0,line))
}
return nlist
}
该功能我是以全局组件的形式注册在app.json中的,注意是创建的时候需要 新建component
然后再app.json中注册全局。
-=-=-=-=-=-=-=-=-更新
加入了日程内容(传入时间数组,在时间下方显示圆点)
// colorui/common/calendar/calendar.js
const app = getApp()
Component({
lifetimes:{
attached: function() {
let self = this;
self.createOptions().then(()=>{
let date = new Date(),month = date.getMonth()+1
self.disposeDate(date.getFullYear() + (month<=9?'0'+month:month)).then(()=>{
self.createCaleData(new Date())
})
})
},
},
/**
* 组件的属性列表
*/
properties: {
scheduleList:{
type:Array,
value:[]
}
},
/**
* 组件的初始数据
*/
data: {
list:[],
fullDate:'',
thisDay:'',
activeDay:'',
dateArr:[],
multiArray: [],
multiIndex: [0, 0],
monthCale:[]
},
/**
* 组件的方法列表
*/
methods: {
getWeek(dateString) {
var dateArray = dateString.split("-");
date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2]);
return "日一二三四五六".charAt(date.getDay());
},
pushData(list,dayNum){
for(let i=0;i<dayNum;i++){
list.push({name:i+1,lastWeek:false,day:true})
}
return list
},
haveDay(dateString){
let str = '日一二三四五六'
return str.indexOf(dateString)
},
seeOneDay(e){
let index = e.currentTarget.dataset.indexs
if(index>6){
this.setData({
activeDay:e.currentTarget.dataset.indexs
})
}
},
createCaleData(myDate){
if(myDate.getFullYear() == new Date().getFullYear() && myDate.getMonth() == new Date().getMonth()){
myDate = new Date()
}
var year = myDate.getFullYear(); //年
var month = myDate.getMonth()+1; //月
var day = myDate.getDate(); //日
var fristDay = this.getWeek(year + '-' + month + '-' + '01');
var fullDate = year + '年' + month + '月'
var list = [
{name:"日",lastWeek:false,day:false,schedule:false},
{name:"一",lastWeek:false,day:false,schedule:false},
{name:"二",lastWeek:false,day:false,schedule:false},
{name:"三",lastWeek:false,day:false,schedule:false},
{name:"四",lastWeek:false,day:false,schedule:false},
{name:"五",lastWeek:false,day:false,schedule:false},
{name:"六",lastWeek:false,day:false,schedule:false}
]
var dayNum = new Date(year,month,0).getDate()
var lastDay = 6-this.haveDay(this.getWeek(year + '-' + month + '-' + dayNum))
var preMonthDay = new Date(year,month-1,0).getDate()
var residueDay = this.haveDay(fristDay)
for(let i = 0; i<residueDay;i++){
list.push({name:preMonthDay-(residueDay-i)+1,lastWeek:true,day:true,schedule:false})
}
list = this.pushData(list,dayNum)
for(let i = 0; i<lastDay;i++){
list.push({name:i+1,lastWeek:true,day:true,schedule:false})
}
list.map((item,index)=>{
item.indexOn = index
if(item.name == day && !item.lastWeek){
this.setData({
activeDay:index
})
}
})
this.getThisMonth(year,month)
this.disposeList(list)
this.setData({
list:app.splieLine(list,7),
fullDate:fullDate,
thisDay:day
})
},
bindMultiPickerChange(e){
this.setData({
multiIndex:e.detail.value
})
this.disposeDate(this.data.multiArray[0][this.data.multiIndex[0]]+this.data.multiArray[1][this.data.multiIndex[1]]).then(()=>{
this.createCaleData(new Date(this.data.multiArray[0][this.data.multiIndex[0]],this.data.multiArray[1][this.data.multiIndex[1]]-1,01))
})
},
getThisMonth(year,month){
let arr = []
this.data.multiArray[0].map((item,index)=>{
if(item == year){
arr[0] = index
}
})
this.data.multiArray[1].map((item,index)=>{
if(item == month){
arr[1] = index
}
})
this.setData({
multiIndex:arr
})
},
createOptions(){
return new Promise(resolve=>{
let thisYear = new Date().getFullYear()
let arr = [[thisYear-1,thisYear,thisYear+1],['01', '02', '03', '04', '05','06', '09', '08', '09', '10','11', '12']]
this.setData({
multiArray:arr
},()=>{
resolve()
})
})
},
disposeDate(thisMonth){
return new Promise(resolve=>{
let arr = []
this.data.scheduleList.map(item=>{
let str = String(item.date)
let year = str.slice(0,6)
if(year == thisMonth){
arr.push(str.substring(str.length-2))
}
})
this.setData({
monthCale:arr
},()=>{
resolve()
})
})
},
disposeList(list){
list.map(item=>{
let str = item.name<=9?'0'+item.name:String(item.name)
this.data.monthCale.map(it=>{
if(it== str){
item.schedule = true
}
})
})
}
}
})
使用
list:[{date:20220222},{date:20220223}]
<cu-calendar scheduleList='{{list}}'></cu-calendar>