更新记录

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

兼容小程序

1.0.0（2024-10-08） 下载此版本

首次发布日程显示组件，支持多日程重叠，日程颜色配置

平台兼容性

nl-schedule

日程显示组件，用于显示每日行程的组件

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

基本使用

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

• title 日程标题
• startHour 日程开始时间（必填）
• endHour 日程结束时间（必填）
• color 日程卡片颜色，16进制色号

<template>
    <view class="schedule-container">
        <nl-schedule :list="scheduleList" @click="handleDetail"></nl-schedule>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                scheduleList: [
                    { id: 0, title: '日程1', startHour: '0:00', endHour: '2:00', color: '#ff0000' },
                    { id: 1, title: '日程2', startHour: '0:00', endHour: '2:10', color: '#ff0000' },
                    { 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)
            },
        },
    }
</script>

API