Features requested

[coda1024]

Hi, I dont know if you are taking feature requests but heres a few:

• show the day of week on the top of the chart when zoomed to day level (eg, M T W)
• vertical bands support - eg for the end date of a project, a red line down the chart would make that date obvious
• support handler for single click. double click is supported currently and thats great. single would be good too (eg to show a side panel detail for a clicked task etc)

thanks

[safwansamsudeen]

Thanks for the list!

These sound good - though I don't fully get point 3. You want a different popup for a single click?

[coda1024]

I was thinking it would be very nice to have more of a single click handler,

eg this on_click below actually triggers on double-click (unless I am doing it wrong),

    ganttChart = new Gantt('#gantt', tasks, {
        header_height: 50,
        view_modes: ['Quarter Day', 'Half Day', 'Day', 'Week', 'Month'],
        view_mode: 'Day',

        on_date_change: (task, start, end) => {
            debouncedSave(task.id, 'start', start);
            debouncedSave(task.id, 'end', end);
        },
        on_progress_change: function(task, progress) {
            debouncedSave(task.id, 'progress', progress);
        },
        on_click: function(task) {
            if (task.id.startsWith('task-')) {
                const taskId = task.id.replace('task-', ''); // Extract the integer part
                edit_task(taskId);

            } else if (task.id.startsWith('group-')) {
                const groupId = task.id.replace('group-', ''); // Extract the integer part
                edit_group(groupId);
            }
        },
        language: 'en'
    });

[sky8ez]

@coda1024 for single click event trigger, you can put the code in the custom_popup_html{} function

this.gantt = new Gantt(this.$refs.gantt, this.tasks, {
        header_height: 50,
        column_width: 30,
        step: 10,
        view_modes: ["Quarter Day", "Half Day", "Day", "Week", "Month"],
        bar_height: 30,
        bar_corner_radius: 10,
        arrow_curve: 5,
        padding: 18,
        view_mode: this.view,
        date_format: "YYYY-MM-DD",
        custom_popup_html: (task) => {
          // put single click code here

          `;
        }
      });