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
npm install vue3-scheduler-lite --saveadd to your project
import VueSchedulerLite from 'vue3-scheduler-lite'enjoy it!
<vue3-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 | |