search

ANovokmet / svelte-gantt

:calendar: Interactive JavaScript Gantt chart/resource booking component
https://anovokmet.github.io/svelte-gantt/
MIT License
512 stars 106 forks source link

vertical thick line #153

Closed kesyous closed 11 months ago

kesyous commented 1 year ago

I want to show vertical thick line on some clocks. As seen in the picture. How can i do it?

gantt_alinti

BlueFoxPrime commented 1 year ago

Hey! It would be easiest to use Timeranges and modify the css in TimeRange.svelte according to your needs. I don't see much use to generally impelement such a feature.

kesyous commented 1 year ago

alinti2

which class can I add to show it?

BlueFoxPrime commented 1 year ago

Hey, if you havent found out by now... I meant the "timeranges" module. You can define timeranges objects and assign them to svelte gantt (see the docs).

kesyous commented 1 year ago

gantt_timerange

Style tag in TimeRange.svelte file. Which attribute can I set to get the vertical thick line?

ANovokmet commented 11 months ago

We've improved this in v4.1:

  1. Add a timerange with from==to, resizable: false and some class eg. time-range-lunch:
gantt.$set({
  timeRanges: [
        {
            id: 0,
            from: time('10:00'),
            to: time('10:00'),
            classes: 'time-range-lunch',
            label: 'Lunch',
            resizable: false,
        }
  ]
});
  1. In your CSS file add a style for this class:
.time-range-lunch {
    border-left: 1px solid black;
}

This will render just a straight black line in the timeline.