Dl-schedule NPM

dl-schedule 日程控件

用清晰的层级模块结构展示日程信息。

快速上手

1. 安装

    npm install dl-schedule -S

2. 在页面中引入 `dl-schedule`

<script>
    import DlSchedule from 'dl-schedule'
    export default {
      components: {
        DlSchedule
      },
      ...
    }
</script>

3. demo

    <dl-schedule
      ref="dlSchedule"
      :date="'2020-07-21'" 
      :distance="30"
      :data-list="data">
      <template slot-scope="scope">
        <div>
          <div class="header">
            {{scope.col.startTime}}-{{scope.col.endTime}}
          </div>
          <p>
            {{scope.col.message}}
          </p>
        </div>
      </template>
    </dl-schedule>

属性参数

序号	参数	说明	类型	可选值	默认值
1	data-list	日程展示的数据。数据基本字段格式请看下表data参数	Array	--	--
2	date	当天日期，默认展示当天的日期	String	--	当天的日期
3	start-time	日程的开始时间点。格式为 HH-mm，例如：08：00	String	--	08:00
4	end-time	日程的结束时间点。格式为 HH-mm，例如：21：00	String	--	21:00
5	distance	日程时间段的间隔刻度，单位为分钟	String, Number	--	60
6	sideWidth	侧边栏时间列表的宽度	String, Number	--	80
7	maxHeight	日程控件的最大高度	Number	--	--
8	minWidth	控件表格td的最小宽度	Number, String	--	200
9	scrollToEarliest	控件表格滚动到第一个日程	Boolean	--	false
10	showHeader	展示日程的头部栏	Boolean	--	true

data 参数

序号	参数	说明	类型	可选值	默认值
1	allDay	指定该项日程是否为全天日程。0为非全天，1表示全天	Number	---	---
2	startTime	指定该项日程的开始时间。格式为 HH-mm，例如：08：00	string	---	---
3	endTime	指定该项日程的结束时间。格式为 HH-mm，例如：21：00	string	---	---
4	message	指定该项日程展示的备注信息	string	---	---