Vue-scheduler-lite

Vue-scheduler-lite

A very simple scheduler for vue.js

Support

Business-day Support

Business-hours Support

Drag and Drop Support

Resize Schedule Support

Touch Device Support(Require DragDropTouch.js)

Github

Demo

Example Sample Demo

Get Start

  1. Use CDN vue.js

    1. 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" />

    2. push to your vue components object

      components: { 'vue-scheduler-lite': vueSchedulerLite }

    3. enjoy it!

      <vue-scheduler-lite :schedule-data="data" :setting="settingData" />
  2. Use NPM 
    1. npm install vue-scheduler-lite --save

    2. add to your project

      import VueSchedulerLite from 'vue-scheduler-lite'

    3. enjoy it!

      <vue-scheduler-lite :schedule-data="data" :setting="settingData" />

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)

Event

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

Schedule Data

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