手把手教你写一个微信小程序日历组件

最新推荐文章于 2025-06-24 09:29:05 发布

原创

最新推荐文章于 2025-06-24 09:29:05 发布 · 3.6k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #日历 #组件 #开发案例

今天我们一起写一个微信小程序日历组件

微信小程序日历组件
https://github.com/749264345/wx-calendar

好，我们先看一下要实现的模样，如下图

52魔都

由以上截图我们可以看到

1.日历可以通过按钮【切换展示效果】改变日历的呈现效果，上图是平铺模式，下图是收起滚动模式。
2.通过点击具体的日期可以在页面上显示当前选中的具体日期。
3.点击【今天】快速回到当日视图。
4.点击【◀】和【▶】切换月份。
上面的四点也是基本的交互需求，我们马上开始。
首先，我们先结构后样式，做出最基本的界面结构
这边我们把整体结构分成上中下，操作显示区，星期显示区，日期显示区。

<view class='calendar'>
    <!--显示当前年月日-->
    <view class='calendar-title'>
        <view class='item ctrl' bindtap='lastMonth'>{
  
  {lastMonth}}</view>
        <view class='item title'>{
  
  {title}}</view>
        <view class='item ctrl' bindtap='nextMonth'>{
  
  {nextMonth}}</view>
        <view class='item ctrl today' bindtap='today'>今天</view>
    </view>

    <!--星期-->
    <view class='calendar-week'>
        <view class='item'>{
  
  {item}}</view>
    </view>

    <!--日期-->
    <view class='calendar-container'>
        <!--上个月占位格子-->
        <view class='grid gray'>{
  
  {item}}</view>

        <!--当月格子-->
        <view class='grid'>
            <view class="wrap">{
  
  {item.date}}</view>
        </view>

        <!--下个月占位格子-->
        <view class='grid gray'>{
  
  {item}}</view>
    </view>
</view>

这是我们基本的日历结构，机智的小伙伴已经从布局中知道我们实现的大致逻辑了，是的，我们先获取当月有多少天，上月和下月有多少天，这样我们的日历就出来了。好，慢慢来，下面我们详细说，我们先写上基本的样式。

.calendar {
   
   
    width: 100%;
    text-align: center;
    font-size: 30rpx;
    box-sizing: border-box;
}

/* 标题 */
.calendar-title {
   
   
    line-height: 70rpx;
    font-size: 30rpx;
    text-align: left;
    padding: 0 20rpx;
    box-sizing: border-box;
}

.calendar-title .ctrl {
   
   
    display: inline-block;
    padding: 0 20rpx;
    background: #f5f5f5;
    border-radius: 10rpx;
}

.calendar-title .item {
   
   
    display: inline-block;
    vertical-align: middle;
    line-height: 50rpx