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

Weekend highlight would be better if broken into {sun: true, sat: true}

labs20 opened this issue · comments

commented

Hi. I'm dealing with projects that sometimes need to mark only the sunday or the saturday as "weekend" because for some of this projects either day could be flagged as a working day.

There is a way to achieve this?

Thanks!

commented

Yes there is a way in ColumnHeaderRow.svelte,

$: {
        const headers = [];
        let headerTime = $from.clone().startOf(header.unit);
        let todayTime = moment().clone().startOf(header.unit);
        const offset = header.offset || 1;
        for(let i = 0; i < columnCount; i++){
            let isSaturday= (headerTime.format("E") == 6 ? true : false)
            let isSunday= (headerTime.format("E") == 7 ? true : false)

            headers.push({
                width: Math.min(columnWidth, $width), 
                label: headerTime.format(header.format),
                from: headerTime.clone(),
                to: headerTime.clone().add(offset, header.unit),
                unit: header.unit,
                time:headerTime.clone(),
                isSunday,
                isSaturday
            });
            headerTime.add(offset, header.unit);
        }
        _headers = headers;
    }

Then below

{#each _headers as header, index}
        <div class="column-header-cell {header.isSaturday? 'highlight-saturday' : ''} {header.isSunday ? 'highlight-sunday : ''}''>
        </div>
    {/each}

With your highlight classes in <style>

commented

@labs20 Did you manage to implement your functionality ? If you want to do a clean PR adding week-end highlighting to the Gantt, feel free to do so 😄

commented

Nope. I've end up creating timeranges for sundays, saturdays and hollydays as needed.