Vue example not working

[Narthall]

Hello,

Thanks for your project, I think it is exactly what I need. Unfortunately, I tried to implement it with Vue 3, and tried to base my project on the link you provided as an example.

Unfortunately, it does not work, so it is very hard for me to find a way to make it work with Vue 3... Has anyone managed to make jsgantt-improved work with Vue 3 so far?

[Narthall]

Hello again,

In the end I did not manage to make the Vue example work. It seems to have something to do with StackBlitz errors. But for those of you who would be interested, here is a working component:

<template>
    <div id="GanttChartDIV"></div>
</template>

<script>
    import * as JSGantt from 'jsgantt-improved';

    export default {
        name: 'gantt-diagram',
        mounted() {

            let g = new JSGantt.GanttChart(
                document.getElementById('GanttChartDIV'),
                'day'
            );

            g.setOptions({
                vCaptionType: 'Complete', // Set to Show Caption : None,Caption,Resource,Duration,Complete,
                vQuarterColWidth: 36,
                vDateTaskDisplayFormat: 'day dd month yyyy', // Shown in tool tip box
                vDayMajorDateDisplayFormat: 'mon yyyy - Week ww', // Set format to dates in the "Major" header of the "Day" view
                vWeekMinorDateDisplayFormat: 'dd mon', // Set format to display dates in the "Minor" header of the "Week" view
                vLang: 'en',
                vShowTaskInfoLink: 1, // Show link in tool tip (0/1)
                vShowEndWeekDate: 0, // Show/Hide the date for the last day of the week in header for daily
                vAdditionalHeaders: {
                    // Add data columns to your table
                    category: {
                        title: 'Category'
                    },
                    sector: {
                        title: 'Sector'
                    }
                },
                vUseSingleCell: 10000, // Set the threshold cell per table row (Helps performance for large data.
                vFormatArr: ['Day', 'Week', 'Month', 'Quarter'] // Even with setUseSingleCell using Hour format on such a large chart can cause issues in some browsers,
            });

            fetch(`https://jsganttimproved.github.io/jsgantt-improved/docs/fixes/data.json`)
                .then(r => r.json())
                .then(data => {
                    console.log('data', data);
                    data.forEach(d => {
                    d.pGantt = g;
                    g.AddTaskItemObject(d);
                    });
                g.Draw();
            });
        }
    }
</script>

<style scoped>
    @import "../../node_modules/jsgantt-improved/src/jsgantt.css";
</style>

Indeed, it has to be mounted before calling Draw().