更新记录

1.2.1（2024-10-24） 下载此版本

fix：修复日程显示bug及增加过期日程显示控制

1.2.0（2024-10-15） 下载此版本

1. 增加当前时间线
2. 增加新增日程功能

1.1.0（2024-10-09） 下载此版本

兼容小程序

平台兼容性

nl-schedule

日历日程显示组件，用于显示每日行程/会议的组件

• 支持多日程
• 可配置日程颜色
• 多端兼容

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

基本使用

通过list参数传入日程列表值，该值为一个数组，

• title 日程标题
• startHour 日程开始时间（必填）
• endHour 日程结束时间（必填）
• color 日程卡片颜色，16进制色号
• isShowOverlay 当该日程已过期，配置改属性为true使日程有一层遮罩，暗一点显示

  <template>
  <view class="schedule-container">
      <nl-schedule :list="scheduleList" @detail="handleDetail" @add="handleAdd"></nl-schedule>
  </view>
  </template>
  <script>
  export default {
      data() {
          return {
              scheduleList: [
                  { id: 0, title: '日程1', startHour: '0:00', endHour: '2:00', color: '#ff0000', isShowOverlay:true },
                  { id: 1, title: '日程2', startHour: '0:00', endHour: '2:10', color: '#ff0000' , isShowOverlay:true},
                  { id: 2, title: '日程3', startHour: '4:00', endHour: '5:30' },
                  { id: 3, title: '日程4', startHour: '0:00', endHour: '5:30' },
                  { id: 4, title: '日程5', startHour: '4:00', endHour: '5:30' },
                  { id: 5, title: '日程6', startHour: '1:10', endHour: '5:50' },
                  { id: 6, title: '日程7', startHour: '9:00', endHour: '10:00' },
                  { id: 7, title: '日程8', startHour: '9:00', endHour: '10:00' },
                  { id: 8, title: '日程9', startHour: '10:00', endHour: '11:00' },
              ],
          }
      },
      methods: {
          handleDetail(item) {
              console.log('点击的历史日程：', item)
          },
          handleAdd(item) {
              console.log('新建日程：', item) // {startHour: '07:15', endHour: '07:45'}
          },
      },
  }
  </script>

API