vue-scheduler-lite
Version:
A support drag and drop scheduler on vue.js
5 lines • 6.24 kB
HTML
<html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>vue-scheduler-lite</title><script type=text/javascript src=https://linmasahiro.github.io/vue-scheduler-lite/cdn_ver/src/polyfill.js></script><link href=https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css rel=stylesheet media=screen><style>body {
padding-top: 60px;
/* 60px to make the container go all the way to the bottom of the topbar */
}</style><link href=/vue-scheduler-lite/dist/static/css/app.b6e7b88382c0c3bbca3542d4cdcd5ba4.css rel=stylesheet></head><body><div class="navbar navbar-inverse navbar-fixed-top"><div class=navbar-inner><div class=container><button type=button class="btn btn-navbar" data-toggle=collapse data-target=.nav-collapse><span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span></button> <a class=brand href=#>Vue-scheduler-lite</a><div class="nav-collapse collapse"><ul class=nav><li class=active><a href=#home>Home</a></li><li><a href=#demo>Demo</a></li><li><a href=#info>Get Start</a></li><li><a href=#setting>SettingData</a></li><li><a href=#event>Event</a></li><li><a href=#data>Data</a></li></ul></div></div></div></div><div class=container><div class=hero-unit><h1 id=home>Vue-scheduler-lite</h1><p>A very simple scheduler for vue.js</p><hr><h3>Support</h3><p>Business-day Support</p><p>Business-hours Support</p><p>Drag and Drop Support</p><p>Resize Schedule Support</p><p>Touch Device Support(Require <a href=https://github.com/Bernardo-Castilho/dragdroptouch target=_blank>DragDropTouch.js</a>)</p><p><a href=https://github.com/linmasahiro/vue-scheduler-lite>Github</a></p><p><iframe src="https://ghbtns.com/github-btn.html?user=linmasahiro&repo=vue-scheduler-lite&type=watch&count=true" allowtransparency=true frameborder=0 scrolling=0 width=110 height=20></iframe></p></div><h2 id=demo>Demo</h2><p>Example Sample Demo</p><div id=app></div><h2 id=info>Get Start</h2><ol><li>Use CDN vue.js<ol><li><p>Download and include <code>vue-scheduler-lite.js</code>and<code>style.css</code> from <a href=https://github.com/linmasahiro/vue-scheduler-lite/tree/master/cdn_ver/ target=_blank>here</a></p><pre><code><script src="vue-scheduler-lite.js" type="text/javascript" language="javascript"></script>
<link rel="stylesheet" href="style.css" /></code></pre></li><li><p>push to your vue components object</p><pre><code>components: { 'vue-scheduler-lite': vueSchedulerLite }</code></pre></li><li><p>enjoy it!</p><pre><code><vue-scheduler-lite :schedule-data="data" :setting="settingData" /></code></pre></li></ol></li><li>Use NPM<ol><li><pre><code>npm install vue-scheduler-lite --save</code></pre></li><li><p>add to your project</p><pre><code>import VueSchedulerLite from 'vue-scheduler-lite'</code></pre></li><li><p>enjoy it!</p><pre><code><vue-scheduler-lite :schedule-data="data" :setting="settingData" /></code></pre></li></ol></li></ol><h2 id=setting>SettingData</h2><p><table class="table table-striped"><tr><th colspan=2>name</th><th width=80>Type</th><th>description</th></tr><tr><td colspan=2>startDate</td><td>String</td><td>schedule start date(YYYY/MM/DD)</td></tr><tr><td colspan=2>endDate</td><td>String</td><td>schedule end date(YYYY/MM/DD)</td></tr><tr><td colspan=2>weekdayText</td><td>Array</td><td>Date weekday</td></tr><tr><td colspan=2>unit</td><td>Integer</td><td>minuite time line cell</td></tr><tr><td colspan=2>borderW</td><td>Integer</td><td>cell border width(px)</td></tr><tr><td colspan=2>dateDivH</td><td>Integer</td><td>Date cell height(px)</td></tr><tr><td colspan=2>timeDivH</td><td>Integer</td><td>Time cell height(px)</td></tr><tr><td colspan=2>unitDivW</td><td>Integer</td><td>Select cell width(px)</td></tr><tr><td colspan=2>titleDivW</td><td>Integer</td><td>title cell width(%)</td></tr><tr><td colspan=2>rowH</td><td>Integer</td><td>Row height(px)</td></tr></table></p><h2 id=event>Event</h2><p><table class="table table-striped"><tr><th colspan=2>name</th><th width=80>Type</th><th>description</th></tr><tr><td colspan=2>row-click-event</td><td>Function</td><td>Title div click event</td></tr><tr><td colspan=2>date-click-event</td><td>Function</td><td>Date div click event</td></tr><tr><td colspan=2>click-event</td><td>Function</td><td>Schedule bar click event</td></tr><tr><td colspan=2>add-event</td><td>Function</td><td>New schedule add event</td></tr><tr><td colspan=2>move-event</td><td>Function</td><td>Schedule move event</td></tr><tr><td colspan=2>edit-event</td><td>Function</td><td>Schedule edit event</td></tr><tr><td colspan=2>delete-event</td><td>Function</td><td>Schedule delete event</td></tr></table></p><h2 id=data>Schedule Data</h2><p><table class="table table-striped"><tr><th colspan=2>name</th><th width=80>Type</th><th>description</th></tr><tr><td colspan=2>title</td><td>String</td><td>Visible Text Schedule Bar</td></tr><tr><td colspan=2>noBusinessDate</td><td>Array</td><td>Not business-day list(All day)</td></tr><tr><td rowspan=3>businessHours</td><td colspan=2>Array</td><td>Business-hours(One day)</td></tr><tr><td>start</td><td>String</td><td>Business start hours(HH:ii)</td></tr><tr><td>end</td><td>String</td><td>Business end hours(HH:ii)</td></tr><tr><td rowspan=5>schedule</td><td colspan=2>Array</td><td>add schedule data</td></tr><tr><td>start</td><td>String</td><td>time String(HH:ii)</td></tr><tr><td>end</td><td>String</td><td>time String(HH:ii)</td></tr><tr><td>text</td><td>String</td><td>Show Text</td></tr><tr><td>data</td><td>Object,Array</td><td>callback data Object</td></tr></table></p></div><div id=footer><div class=container><p class="muted credit">Copyright © 2020 <a href=https://github.com/linmasahiro target=_blank>Lin</a> All Rights Reserved.</p></div></div><script type=text/javascript src=/vue-scheduler-lite/dist/static/js/manifest.2ae2e69a05c33dfc65f8.js></script><script type=text/javascript src=/vue-scheduler-lite/dist/static/js/vendor.ac6d6553ef5dae56ccbe.js></script><script type=text/javascript src=/vue-scheduler-lite/dist/static/js/app.f4cbd6c85f6452e0455d.js></script></body></html>