@fabnumdef/frise NPM

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>