@fabnumdef/frise

Frise

Another gantt timeline

---

🚧 This library is still on heavy work in progress 🚧

Features

• ⌛ Custom timeline duration and unit
• 🧭 Custom timeline navigation
• 📖 Custom UI with transparent slot API and exposed events
• 💥 Event collision management
• ✨ Vertical drag and drop

Installation

NPM:

npm install --save @fabnumdef/frise

Yarn:

yarn add @fabnumdef/frise

Pnpm:

pnpm add @fabnumdef/frise

Usage

Vue2 SFC:

<template>
    <Frise :data="data" @drop-item="updateRows" @update-date-interval="updateDateInterval" />
</template>

<script>
import Frise from '@fabnumdef/frise';

export default {
    components: {
        Frise
    },
    
    data: () => ({
        data: [
            { id: 1, header: { label: 'My First Row' }, blocks: [{ id: 1, start: Date, end: Date }] },
            { id: 2, header: { label: 'My Second Row' }, blocks: [{ id: 2, start: Date, end: Date }] }
        ],
    }),
    
    methods: {
        updateRows({ blockId, initialRowId, newRowId }) {
            /** Your logic to update rows on bar drop **/
        },
    }
}    
</script>

Documentation

@todo add link

Roadmap

• 🍚 Default basic components
• 🚀 Fully featured drag and drop