uni-app 手写日历组件

下面是一个简单的Uni-app手写日历组件的实现步骤：

1. 创建一个日历组件，可以使用uni-calendar或者自己手写一个日历组件。

2. 在data中定义一个calendarData对象，用于存储日历相关的数据，比如当前年月、当前月有多少天等。

data() {
  return {
    calendarData: {
      year: 2021,
      month: 9,
      days: []
    }
  }
}

3. 在created生命周期中，初始化日历数据。

created() {
  this.initCalendarData();
},

methods: {
  initCalendarData() {
    const date = new Date();
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const days = this.getDaysOfMonth(year, month);
    this.calendarData = { year, month, days };
  },

  getDaysOfMonth(year, month) {
    const days = [];
    const date = new Date(year, month - 1, 1);
    const weekDay = date.getDay();
    const lastMonthDays = this.getDaysOfLastMonth(year, month);
    const thisMonthDays = this.getDaysOfMonth(year, month);
    const nextMonthDays = 42 - thisMonthDays - weekDay;

    for (let i = weekDay - 1; i >= 0; i--) {
      days.push({
        day: lastMonthDays - i,
        type: 'lastMonth'
      });
    }

    for (let i = 1; i <= thisMonthDays; i++) {
      days.push({
        day: i,
        type: 'thisMonth'
      });
    }

    for (let i = 1; i <= nextMonthDays; i++) {
      days.push({
        day: i,
        type: 'nextMonth'
      });
    }

    return days;
  },

  getDaysOfMonth(year, month) {
    return new Date(year, month, 0).getDate();
  },

  getDaysOfLastMonth(year, month) {
    if (month === 1) {
      year--;
      month = 12;
    } else {
      month--;
    }
    return this.getDaysOfMonth(year, month);
  }
}

4. 在日历组件中，使用v-for循环渲染日历。

<template>
  <view class="calendar">
    <view class="calendar-header">{{ calendarData.year }}年{{ calendarData.month }}月</view>
    <view class="calendar-body">
      <view class="calendar-week">
        <view class="calendar-day">日</view>
        <view class="calendar-day">一</view>
        <view class="calendar-day">二</view>
        <view class="calendar-day">三</view>
        <view class="calendar-day">四</view>
        <view class="calendar-day">五</view>
        <view class="calendar-day">六</view>
      </view>
      <view class="calendar-days">
        <view class="calendar-day" v-for="(day, index) in calendarData.days" :key="index">
          <view class="day-text" :class="day.type">{{ day.day }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

5. 根据需要，可以为不同日期设置不同的样式。

.day-text {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.lastMonth {
  color: #999;
}

.thisMonth {
  color: #333;
}

.nextMonth {
  color: #999;
}

6. 最后，可以为日历组件添加一些交互事件，比如点击某个日期时，弹出该日期对应的课程安排等。

以上就是一个简单的Uni-app手写日历组件的实现步骤，具体实现可以根据需求进行优化和改进。