https://github.com/mikaeljorhult/segel

Vue component for creating Gantt-like timeline charts for bookings.
https://github.com/mikaeljorhult/segel

gantt timeline vue

Last synced: 12 days ago
JSON representation

Vue component for creating Gantt-like timeline charts for bookings.

• Host: GitHub
• URL: https://github.com/mikaeljorhult/segel
• Owner: mikaeljorhult
• License: mit
• Created: 2017-06-08T21:00:56.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T17:19:41.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T23:13:58.586Z (7 months ago)
• Topics: gantt, timeline, vue
• Language: Vue
• Homepage:
• Size: 2.34 MB
• Stars: 13
• Watchers: 2
• Forks: 4
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-starred - mikaeljorhult/segel - Vue component for creating Gantt-like timeline charts for bookings. (vue)

README

        
# Segel

Vue component for creating Gantt-like timeline charts for bookings.

[![Downloads](https://img.shields.io/npm/dt/segel.svg)](https://www.npmjs.com/package/segel)

[![Version](https://img.shields.io/npm/v/segel.svg)](https://www.npmjs.com/package/segel)

[![License](https://img.shields.io/npm/l/segel.svg)](http://mikaeljorhult.mit-license.org)

## Installation

Install using NPM:

```

npm install segel

```

Install using Yarn:

```

yarn add segel

```

Also available for use in browser through [unpkg](https://unpkg.com):

## Usage

Basic usage:

```html

  


    

  


  

  

  

  

    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);

        }

      }

    });

  

```

## License

Segel is released under the [MIT license](http://mikaeljorhult.mit-license.org).