vue3-scheduler-lite
Version:
A support drag and drop scheduler on vue3.0
4 lines • 5.55 kB
HTML
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>vue3-scheduler-lite</title><script src="https://linmasahiro.github.io/vue-scheduler-lite/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="./css/app.f6e69497.css" rel="preload" as="style"><link href="./js/app.a48f9fef.js" rel="preload" as="script"><link href="./js/chunk-vendors.3a0b91db.js" rel="preload" as="script"><link href="./css/app.f6e69497.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="#">vue3-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">vue3-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/vue3-scheduler-lite">Github</a></p><p><iframe src="https://ghbtns.com/github-btn.html?user=linmasahiro&repo=vue3-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 NPM<ol><li><pre><code>npm install vue3-scheduler-lite --save</code></pre></li><li><p>add to your project</p><pre><code>import VueSchedulerLite from 'vue3-scheduler-lite'</code></pre></li><li><p>enjoy it!</p><pre><code><vue3-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 src="./js/chunk-vendors.3a0b91db.js"></script><script src="./js/app.a48f9fef.js"></script></body></html>