A very simple scheduler for vue.js
Business-day Support
Business-hours Support
Drag and Drop Support
Resize Schedule Support
Touch Device Support(Require DragDropTouch.js)
Example Sample Demo
Download and include vue-scheduler-lite.jsandstyle.css from here
<script src="vue-scheduler-lite.js" type="text/javascript" language="javascript"></script>
<link rel="stylesheet" href="style.css" />push to your vue components object
components: { 'vue-scheduler-lite': vueSchedulerLite }enjoy it!
<vue-scheduler-lite :schedule-data="data" :setting="settingData" />npm install vue-scheduler-lite --saveadd to your project
import VueSchedulerLite from 'vue-scheduler-lite'enjoy it!
<vue-scheduler-lite :schedule-data="data" :setting="settingData" />| name | Type | description | |
|---|---|---|---|
| startDate | String | schedule start date(YYYY/MM/DD) | |
| endDate | String | schedule end date(YYYY/MM/DD) | |
| weekdayText | Array | Date weekday | |
| unit | Integer | minuite time line cell | |
| borderW | Integer | cell border width(px) | |
| dateDivH | Integer | Date cell height(px) | |
| timeDivH | Integer | Time cell height(px) | |
| unitDivW | Integer | Select cell width(px) | |
| titleDivW | Integer | title cell width(%) | |
| rowH | Integer | Row height(px) | |
| name | Type | description | |
|---|---|---|---|
| row-click-event | Function | Title div click event | |
| date-click-event | Function | Date div click event | |
| click-event | Function | Schedule bar click event | |
| add-event | Function | New schedule add event | |
| move-event | Function | Schedule move event | |
| edit-event | Function | Schedule edit event | |
| delete-event | Function | Schedule delete event | |
| name | Type | description | |
|---|---|---|---|
| title | String | Visible Text Schedule Bar | |
| noBusinessDate | Array | Not business-day list(All day) | |
| businessHours | Array | Business-hours(One day) | |
| start | String | Business start hours(HH:ii) | |
| end | String | Business end hours(HH:ii) | |
| schedule | Array | add schedule data | |
| start | String | time String(HH:ii) | |
| end | String | time String(HH:ii) | |
| text | String | Show Text | |
| data | Object,Array | callback data Object | |