tui.calendar Opportunity to set min events height to 5 min.

I saw previous discussion about that issue, but maybe something new approach to resolve was founded ? Currently I found cheat to calculate events height manually(just use createEvents method for it) but it stop works as soon as event should be "cut"(cause it take small part of two days but we can't control calculating of second part height) Updates?)

Sep 12 '22 07:09 skillforce

Related(and Duplicate) of #563.

@skillforce

I don't get the idea of setting the minimum height of the event to 5 minutes. Isn't it too small? I wonder how you set the height manually though.

And yeah, we need to think again about how to set the minimum height of the event from the bottom line. Right now it's not on our priority list but some clever PR would always be welcome.

Sep 14 '22 00:09 adhrinae

@adhrinae if event totally in one day - just calculate height of event and set it in height property : const duration= (moment(ToDateTime) - moment(FromDateTime)) / 60000 const height = (minLong / 14.4).toFixed(3) in my case above I found that solution: calendarRef.current.getInstance().setOptions({ template: { time(event) {...*} };

        ...* -  1)create empty array (will contain Id's of events);
                 2) on each iteration(rendering of new event) - write event Id's in that array and check if it duplicated;
                 3) if duplicated(it's mean that TUI cut the event) - check how many minutes left from start of end event day to event end date;
                 4) if it <30 min  than calculate certain amount of minutes and write it like data-attribute on event title;
                 5) via useEffect check all elements which contain that data-attribute and via js set height style of parent element :
                 const durationFromDataAttribute= elem.getAttribute('data-duration')
                 const height = (durationFromDataAttribute/ 14.4).toFixed(3)
                 elem.parentElement.parentElement.parentElement.style.height=`${height}%`

Sep 28 '22 07:09 skillforce

Sounds awesome but it would be great for others if you could use the code block syntax for the example code 😄

https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks

Sep 28 '22 22:09 adhrinae

@adhrinae @skillforce idea works for me. I'm working with a daily calendar.

first of all I had to increase the height of the calendar otherwise the 5 min slot is too small and makes it impossible to see the label.

file toastui-calendar.css

before .toastui-calendar-timegrid { height:200%;..

after .toastui-calendar-timegrid { height:300%;..

Then I worked in the html source code. I also had to decrease the line height for the same reason in the html file:

<body style="line-height:1;">

I have declared an array of events

var MOARR_EVENTS = [];

You need to calculate the percentage_for_minutes factor like this:

// [minutes displayed] : 100[%] = 1min : X      
// so..
// x = (100 * 1) / [minutes displayed] 
//
// in my case, 
// HOURSTART=8; 
// HOUREND=20; 
// so..
// x = 100 / ((HOUREND - HOURSTART) * 60)
var percentage_for_minutes = 100.0 / ((HOUREND - HOURSTART) * 60.0)

then I added the event function in the calendar options:

calendar.setOptions({
	template: {
		time(event) {
			const duration = (event.end.d.d - event.start.d.d) / 60000;
			MOARR_EVENTS.push({
				evid: event.id,
				calid: event.calendarId,
				dur: duration,
			});
			return `<span style="color: cyan; white-space: normal;"><b>${FormatTimeFromDate(event.start.d.d)} - ${FormatTimeFromDate(event.end.d.d)}</b> ${event.title}</span>`;
		},
	},
});

In the return event I also added style="white-space: normal;" to ensure that the label text can wrap

Therefore, before adding events to the calendar, the MOARR_EVENTS array must be reset.

MOARR_EVENTS = [];

so right after adding the events, you have to force render the calendar to trigger the event function stored in the calendar's options.

calendar.render();

and then the last part: after the render call, you have to check all events stored in the list to set the real height of those that last less than 30 minutes.:

for (iloop = 0; iloop < MOARR_EVENTS.length; iloop++) { 
	if (MOARR_EVENTS[iloop].dur < 30)	{
		let oitem = calendar.getElement(MOARR_EVENTS[iloop].evid, MOARR_EVENTS[iloop].calid);
		if (oitem != null) {
			const height = (MOARR_EVENTS[iloop].dur * percentage_for_minutes); 
			oitem.style.height = "calc(" + height.toString() + "% - 2px)"
		}
	}
}

here you are ;) I think I have not forgotten anything

May 16 '23 11:05 robykart

tui.calendar tui.calendar copied to clipboard

Opportunity to set min events height to 5 min.

tui.calendar
tui.calendar copied to clipboard