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

Setting time range within a column

Edward-Ta opened this issue · comments

I have a week of work pictured below, and I have these settings in my options for a week:

currentStart = moment(start, 'HH:mm:ss').isoWeekday(1)
currentEnd = moment(end, 'HH:mm:ss').isoWeekday(5)
gantt.$set({
	...options,
	from: currentStart,
	to: currentEnd,
	columnOffset: 1,
	columnStrokeWidth: 5,
	columnUnit: "day",
	headers: [
		{ unit: "month", format: "MMMM Do", sticky: true },
		{ unit: "day", format: "dddd Do", sticky: true },
	],

It is possible to set the time range of these days, for instance, that Tuesday would only run from 9am to 6pm instead of 00:01 to 23:59?

Img:
image

commented

Your question is about changing the timespan of the days so it's not 24h anymore but only 9h in your example ?
So your day of work would take visually the whole day instead of just a part of it ?

But what about any events set with a start before or an end after the custom timespan ?

Might be possible, but I don't really see the point of it, outside of a visual standpoint.

Yes just like there is a from and to in the entire row, there is a from and to in the column too.

Good question about events that start before and end after, I know that in the fullcalendar js package it would still take all of the events, but only renders the time period that is set from two variables "slotMinTime" and "slotMaxTime".
So it would either cut half way into a task or cut off the end of a task.
So if my user only wants to see tasks during their working hours they can and they wont see ones set outside the working hours.

It really is only a visual enhancement, it will just allow the user to see the tasks easier and makes the text inside a task more readable due to its length increasing.