innerHeight to the bottom

[francofgp]

Is there a way to put this property in something like "auto", without having to put the height in pixels? That way it will be helpful for different screen sizes

[neuronetio]

I will add this feature to the upcoming versions

[supportdesk-si]

This will help a lot for dynamic screen sizes and for users who change their browser window.

[neuronetio]

landed in 3.8.0
autoInnerHeight property

[francofgp]

Thanks for the quick update, but when I set that property, I am getting the following error:

and my config is the following:

const config = {
	licenseKey:"mykey",
	//innerHeight: window.screen.height / 1.8, //previous way
	autoInnerHeight: true,
	list: {
		columns: {
			data: columnsAccount.data,
		},
		rows: rowsAccount,
	},
	chart: {
		items,
		item: {
			//height: 60,
		},
		calendarLevels: [hours, minutes],
		time: {
			zoom: 13.58,
			from: GSTC.api.date(searchMinDate()).valueOf(),
			to: GSTC.api.date(searchMaxDate()).valueOf(),
		},
		grid: {
			cell: {
				onCreate: [onCellCreate],
			},
		},
	},
	scroll: {
		bodyClassName: "gstc-scrolling",
		horizontal: {
			precise: true, //Not supported by the library yet
		},
		vertical: {
			precise: true,
		},
	},
	slots: {
		//'chart-timeline-items-row-item': [ItemClickAction],
		"chart-timeline-items-row-item": { inner: [itemSlot] },
	},
};

[neuronetio]

show me onCellCreate and itemSlot and calendarLevels also
one item and one row also may be useful

[neuronetio]

BTW if you are using searchMaxDate and searchMinDate for searching last and first dates from items it is not neccessary because gstc will find those dates automatically if from and to properties are not specified. You can set only zoom level.

[francofgp]

function onCellCreate({ row, time, vido }) {
	let className = "gray";

	if (
		time.rightGlobal <
		time.rightGlobalDate.startOf("day").add(8, "hour").valueOf()
	) {
		// before 8:00 AM
		className = "green";
	}
	if (
		time.leftGlobal.valueOf() >=
		time.leftGlobalDate.startOf("day").add(17, "hour").valueOf()
	) {
		// after 12:00 AM
		className = "green";
	}
	return vido.html`<div class="${className}"></div>`;
}

function itemSlot(vido, props) {
	const { onChange, update, html, api, getElement } = vido;

	// Get element and initialize tippy instance
	let element, tippyInstance;

	function initialize(el) {
		element = el;
		// @ts-ignore
		if (!tippyInstance)
			tippyInstance = tippy(element, {
				trigger: "mouseenter click",
				interactive: true,
				animation: true,
				allowHTML: true,
				placement: "top",
				appendTo: document.body,
				popperOptions: {
					modifiers: {
						flip: {
							boundariesElement: "scrollParent",
						},
					},
				} 
			});
	}
	let itemData, startDate, endDate, tooltipContent;

	const formatDate = (date) => {
		var d = new Date(date);
		var hour = d.getHours();
		var minute = d.getMinutes();
		var second = d.getSeconds();

		hour = hour < 10 ? "0" + hour : hour;
		minute = minute < 10 ? "0" + minute : minute;
		second = second < 10 ? "0" + second : second;

		return (
			// In case you want the day too, just uncomment this
			/* d.getUTCFullYear() +
			"/" +
			(d.getUTCMonth() + 1) +
			"/" +
			d.getUTCDate() +
			" " +*/
			hour + ":" + minute + ":" + second
		);
	};

	onChange((newProps) => {
		startDate = props = newProps;
		if (!props || !props.item) return;
		itemData = api.getItemData(props.item.id);
		if (!itemData) return;
		startDate = itemData.time.startDate;
		endDate = itemData.time.endDate;
		tooltipContent = `From ${formatDate(
			props.item.time.start
		)} to ${formatDate(props.item.time.end)}`;

		// render the view and after that set tippy content
		update(() => {
			tippyInstance.setContent(tooltipContent);
		});
	});

	return (content) =>
		html`<div
			directive=${getElement(initialize)}
			class="my-item"
			style="width:100%;display:flex;"
		>
			${content}
		</div>`;
}

Calendar levels has te following arrays

const hours = [
	{
		zoomTo: 100, // we want to display this format for all zoom levels until 100
		period: "day",
		periodIncrement: 1,
		format({ timeStart }) {
			var days = [
				"Sunday",
				"Monday",
				"Tuesday",
				"Wednesday",
				"Thursday",
				"Friday",
				"Saturday",
			];
			var d = new Date(timeStart);
			return days[d.getDay()] + " - " + timeStart.format("MMMM DD, YYYY"); // full list of formats: https://day.js.org/docs/en/display/format
		},
	},
];

const minutes = [
	{
		zoomTo: 12,
		period: "minute",
		periodIncrement: 5,
		main: true,
		format({ timeStart, vido }) {
			return vido.html`<div style="text-align:center;">${timeStart.format(
				"hh:mm A"
			)}</div>`;
		},
	},
	{
		zoomTo: 13,
		period: "minute",
		periodIncrement: 10,
		main: true,
		format({ timeStart, vido }) {
			return vido.html`<div style="text-align:center;">${timeStart.format(
				"hh:mm A"
			)}</div>`;
		},
	},
	{
		zoomTo: 13.9,
		period: "minute",
		periodIncrement: 15,
		main: true,
		format({ timeStart, vido }) {
			return vido.html`<div style="text-align:center;">${timeStart.format(
				"hh:mm A"
			)}</div>`;
		},
	},
	{
		zoomTo: 14,
		period: "minute",
		periodIncrement: 20,
		main: true,
		format({ timeStart, vido }) {
			return vido.html`<div style="text-align:center;">${timeStart.format(
				"hh:mm A"
			)}</div>`;
		},
	},
	{
		zoomTo: 14.5,
		period: "minute",
		periodIncrement: 30,
		main: true,
		format({ timeStart, vido }) {
			return vido.html`<div style="text-align:center;">${timeStart.format(
				"hh:mm A"
			)}</div>`;
		},
	},
	{
		zoomTo: 15.5,
		period: "hour",
		periodIncrement: 1,
		main: true,
		format({ timeStart, vido }) {
			return vido.html`<div style="text-align:center;">${timeStart.format(
				"hh:mm A"
			)}</div>`;
		},
	},
	{
		zoomTo: 16.5,
		period: "hour",
		periodIncrement: 2,
		main: true,
		format({ timeStart, vido }) {
			return vido.html`<div style="text-align:center;">${timeStart.format(
				"hh:mm A"
			)}</div>`;
		},
	},
	{
		zoomTo: 17.5,
		period: "hour",
		periodIncrement: 4,
		main: true,
		format({ timeStart, vido }) {
			return vido.html`<div style="text-align:center;">${timeStart.format(
				"hh:mm A"
			)}</div>`;
		},
	},

	{
		zoomTo: 100,
		period: "minute",
		periodIncrement: 60,
		main: true,
		format({ timeStart, vido }) {
			return vido.html`<div style="text-align:center;">${timeStart.format(
				"hh:mm A"
			)}</div>`;
		},
	},
]; ```

[francofgp]

BTW if you are using searchMaxDate and searchMinDate for searching last and first dates from items it is not neccessary because gstc will find those dates automatically if from and to properties are not specified. You can set only zoom level.

Ok thanks, I didn't know

[neuronetio]

fixed in 3.8.2

[francofgp]

Now I am not getting the error anymore, but honestly, I think it is still not working

Here I am showing first the autoInnerHeight: true, then with only innerHeight: window.screen.height and last without autoinnerHeight nor innerHeight.
And with autoInnerHeight: true or without it, the height is 428px,

[neuronetio]

autoInnerHeight will follow the height of the parent element, so you need to control the size of the parent element.
In different applications, the Gantt is placed in different nested places, so I cannot take the window size to calculate the height.
I think you can try to set 'height: 100%' for all parent elements up to the html element to take the entire screen height for your use case.
You can also use ResizeObserver to be notified and react when your elements size changes.

[francofgp]

Ah ok thank you very much