更新记录

1.0.0（2026-03-31） 下载此版本

多日程展示组件 layne-schedule，日期接收，多日程，可配置展示主题和日程颜色 配置简单，支持H5、vue2、vue3、android、ios。

平台兼容性

uni-app(5.05)

uni-app x(5.05)

多日程展示组件 layne-schedule

多日程展示组件 layne-schedule，日期接收，多日程，可配置展示主题和日程颜色 配置简单，支持vue2、vue3、android10及以上、ios15.2及以上、鸿蒙。 多日程展示组件 layne-schedule，日期接收，多日程，可配置展示主题和日程颜色

API

Props

Event

字段说明

• schedule 日程数据

  [
        { id: 1, title: '产品评审', start: '10:00', end: '11:30', color: '#f58c2f', bgColor: 'rgb(255 243 229)' },
        { id: 2, title: '午餐', start: '12:00', end: '13:00', color: '#4657ff', bgColor: 'rgb(218 221 255)' },
        { id: 3, title: '前端会议', start: '11:40', end: '14:30', color: '#52c41a', bgColor: 'rgb(222 249 208)' },
        { id: 4, title: '与小王沟通', start: '13:30', end: '15:00', color: '#c700c4', bgColor: 'rgb(255 228 255)' },
        { id: 5, title: '准备叫车', start: '16:30', end: '18:00', color: '#3da6ee', bgColor: 'rgb(229 245 255)' },
        { id: 6, title: '收拾出差物品', start: '18:30', end: '20:00', color: '#6a9fc0', bgColor: 'rgb(241 250 255)' },
  ]

  • 必要数据： title：日程 start：日程开始时间。 end：日程结束时间。 color：日程文字颜色。如果主题不是 default ，则为日程边框颜色 bgColor：日程背景颜色。

• currentDate 年月日字符串：2026-03-25

• topStyle 顶部日期展示区域样式，支持格式：

  {background: '#485189', color: '#fff'} 
  或
  "background: #485189; color: #fff;" 
  或 
  "{background: '#485189', color: '#fff'}"

• containerStyle 日程展示部分样式，支持格式同 topStyle。

• currentYMStyle 顶部当前年月样式，支持格式同topStyle。

• dayStyle 当前日期样式，应与 currentDayStyle 同时使用，支持格式同topStyle。

• currentDayStyle 当前日期样式，应与 dayStyle 同时使用，支持格式同topStyle。

• themes 日程展示主题。可选值：default、flat、flatLeft、flatTop、flatRight、flatBottom。（flat与 flatLeft 为同一主题）

使用说明

    <layne-schedule 
    :currentDate="currentDate"
    :topStyle="topStyle"
    :containerStyle="containerStyle"
    :currentYMStyle="currentYMStyle"
    :dayStyle="dayStyle"
    :currentDayStyle="currentDayStyle"
    :schedule="schedule"
    themes="flatTop"
    @dayClick="dayClick" 
    @scheduleClick="scheduleClick"
    ></layne-schedule>

dayClick(item) {
    console.log(item)
}

scheduleClick(item) {
    console.log(item)
}