Segel
Vue component for creating Gantt-like timeline charts for bookings.
Installation
Install using NPM:
npm install segel
Install using Yarn:
yarn add segel
Also available for use in browser through unpkg:
Usage
Basic usage:
<body> <div id="app"> <Segel v-bind:resources="resources" v-bind:bookings="bookings" v-on:bookings-create="handleCreate" v-on:bookings-update="handleUpdate" v-on:bookings-delete="handleDelete" ></Segel> </div> <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/interactjs"></script> <script src="https://unpkg.com/segel"></script> <script> let today = new Date(); let app = new Vue({ el: "#app", data: { resources: [{ id: 1, name: "Conference Room A" }], bookings: [ { id: 1, resource: 1, start: today.setHours(8, 0, 0, 0) / 1000, end: today.setHours(10, 0, 0, 0) / 1000 }, { id: 2, resource: 1, start: today.setHours(11, 0, 0, 0) / 1000, end: today.setHours(12, 0, 0, 0) / 1000 }, { id: 3, resource: 1, start: today.setHours(13, 0, 0, 0) / 1000, end: today.setHours(17, 0, 0, 0) / 1000 } ], bookingID: 10 }, methods: { handleCreate: function(booking) { // Give booking a unique ID and append to array. booking.id = ++this.bookingID; this.bookings.push(booking); }, handleUpdate: function(booking) { // Find index of updated booking. let index = this.bookings.findIndex(function(stored) { return stored.id == booking.id; }); this.bookings.splice(index, 1, booking); }, handleDelete: function(booking) { // Find index of deleted booking. let index = this.bookings.findIndex(function(stored) { return stored.id == booking.id; }); // Remove booking from array. this.bookings.splice(index, 1); } } }); </script> </body>
License
Segel is released under the MIT license.