ANovokmet / svelte-gantt

:calendar: Interactive JavaScript Gantt chart/resource booking component

Home Page:https://anovokmet.github.io/svelte-gantt/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to access and add methods when time/date headers are clicked.

Edward-Ta opened this issue · comments

I have a function that I run everytime the gantt chart updates that changes css within it, I trigger this updateCss function within my updating tasks functions but I'm not sure how to access the header column functions to trigger it when, lets say, a user clicks 'Tuesday 15th'.
Is there a hook or something similar for header selection?

e.g.:
image
Clicking on 'Wednesday 16th' I want to call my updateCss() function after its execution.

commented

There isn't an API endpoint per say, but you can implement it yourself, example below

ColumnHeaderRow.svelte
<div class="column-header-cell" on:click="{() => dispatch('dateSelected', { from: header.from, to: header.to, unit: header.unit })}"></div>

ColumnHeader.svelte
<ColumnHeaderRow {header} baseWidth={baseHeaderWidth} baseDuration={baseHeaderDuration} on:dateSelected/>

Gantt.svelte
<ColumnHeader {headers} {columnUnit} {columnOffset} on:dateSelected="{onDateSelected}"/>

function onDateSelected(event) { // YOUR CODE }

I cloned this repo then changed the onDateSelected function in Gantt.svelte like @V-Py said.

Found out how to get this newly rolledup cloned repo into my project by including this into the package.json file:
"svelte-gantt": "../components/svelte-gantt/dist"

And you actually fixed some other problems also by suggesting this, ahahha.
Thank you @V-Py.