微信小程序demo提供了一个简单的日历组件，vant也提供了一个日历组件，在github上也有一些日历组件，我试用了一番，都多少存在一些不符合之处。重点说一下vant，它有几个问题：一是加载数据太大，一运行就加载至少一年以上的数据；二是样式不好控制，大小相修改一下就会变形；三是在日期上下方加文字不方便。
因为没有找到太好的组件可以引用，就自己想设计一个能方便控制的，遂有下面的设计，
1、采用grid组件显示日期，分三行，中间一行为日期具体天的数字，上面一行显示大小周提示、下面一行显示排班名称
2、采用scroll-view动态包含grid数目
3、一行显示几天，可以动态设置
1、日历头部
2、日历内容
3、日历结构体
4、具体每个月的日历算法
获取某个月的第一天和最后一天，再获取每天的星期数，循环放到grid结构体中
优点：一是加载数据量少，可控制；二是显示内容丰富，可以控制；三是也是显示可以使用slot，更加丰富
缺点：一不是专业日历组件，样式简单了些；二是加载数据量有限，grid自身也是一个组件，加载多了额外的开销肯定大起来。
用VB做万年历，非常关键点就是农历写法，参考代码如下：#Region " 返回农历 "
'返回农历
'cCalendar.MaxSupportedDateTime 返回支持的最大日期，即2101-1-28
'cCalendar.MinSupportedDateTime 返回支持的最小日期，即190－2-19
Private cCalendar As New System.Globalization.ChineseLunisolarCalendar
Public Function PubFunGet_CNDate(ByVal sDateTime As Date) As String
cCalendar = New System.Globalization.ChineseLunisolarCalendar
Dim lyear As Integer = cCalendar.GetYear(sDateTime)
Dim lmonth As Integer = cCalendar.GetMonth(sDateTime)
Dim lday As Integer = cCalendar.GetDayOfMonth(sDateTime)
Dim lweek As Integer = cCalendar.GetDayOfWeek(sDateTime)
'获取闰月， 0 则表示没有闰月
Dim leapMonth As Integer = cCalendar.GetLeapMonth(lyear)
Dim isleap As Boolean = False
If (leapMonth >0) Then
If (leapMonth = lmonth) Then
'闰月
isleap = True
lmonth = lmonth - 1
ElseIf (lmonth >leapMonth) Then
lmonth = lmonth - 1
End If
End If
Return String.Concat(GetLunisolarYear(lyear), IIf(isleap = True, "闰年", "年"), GetLunisolarMonth(lmonth), "月", GetLunisolarDay(lday))
End Function
'十天干
Private tiangan As String() = {"甲", "乙", "丙", "丁", "戊", "己", "庚", "辛", "壬", "癸"}
'十二地支
Private dizhi As String() = {"子", "丑", "寅", "卯", "辰", "巳", "午", "未", "申", "酉", "戌", "亥"}
'十二生肖
Private shengxiao As String() = {"鼠", "牛", "虎", "免", "龙", "蛇", "马", "羊", "猴", "鸡", "狗", "猪"}
'农历月
Private months As String() = {"正", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二(腊)"}
'农历日
Private days1 As String() = {"初", "十", "廿", "三"}
Private days As String() = {"一", "二", "三", "四", "五", "六", "七", "八", "九", "十"}
'返回农历年（天干 地支 生肖）
Private Function GetLunisolarYear(ByVal year As Integer) As String
GetLunisolarYear = ""
If (year >3) Then
Dim tgIndex As Integer = (year - 4) Mod 10
Dim dzIndex As Integer = (year - 4) Mod 12
Return tiangan(tgIndex) &dizhi(dzIndex) &"[" &shengxiao(dzIndex) &"]"
End If
'无效的年份!
End Function
'返回生肖
Private Function GetShengXiao(ByVal sDateTime As Date) As String
Return shengxiao(cCalendar.GetTerrestrialBranch(cCalendar.GetSexagenaryYear(sDateTime)) - 1)
End Function
'返回农历月
Private Function GetLunisolarMonth(ByVal month As Integer) As String
GetLunisolarMonth = ""
If (month <13 AndAlso month >0) Then
Return months(month - 1)
End If
'无效的月份!
End Function
'返回农历日
Private Function GetLunisolarDay(ByVal day As Integer) As String
GetLunisolarDay = ""
If (day >0 AndAlso day <32) Then
If (day <>20 AndAlso day <>30) Then
Return String.Concat(days1((day - 1) \ 10), days((day - 1) Mod 10))
Else
Return String.Concat(days((day - 1) \ 10), days1(1))
End If
End If
'无效的日!
End Function
#End Region
微信小程序日历组件calendar详解及实例模版使用：
src="../cal/calendar.wxml">
is="calendar"
data="{{selected_value,days,month,years,lunar_years,lunar_month,lunar_days,selectDateType,l
unar_selected_value}}">
JS代码使用：
var
Calendar
=
require('../cal/calendar')
Page({
data:
{
selected_value:
[],
days:
[],
month:
[],
years:
[],
lunar_years:
[],
lunar_month:
[],
lunar_days:
[],
selectDateType:
1,
lunar_selected_value:
[]
},
....
//
指定选择器回调函数
new
Calendar('key',
this,
function(date){
that.setData({
date:
date
})
})
样式
.calendar{
position:
absolute
bottom:
0
width:
100%
z-index:
999
background-color:
#fff
}
.tab{
display:inline-block
width:50%
text-align:center
font-size:16px
color:
#ccc
}
.tab-bar{
background-color:
#eee
height:
40px
line-height:
40px
}
.tab-bar
.active{
color:
#000
}
.selected-item{
font-size:
28px
}
.event-type_parent{
font-size:
14px
}
.event-type_child{
text-align:
center
line-height:
30px
}
.event-type_txt{
display:
inline-block
}
以上用法看不懂的话，具体就参考代码里面index目录下。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）