vue-scheduler-lite

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <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> </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> </body> </html>