Multiline event description

[eguibs]

Hello, i would like to do a multiline event in the calendar as suggested by sriramramaswami
in this topic #1078

Like illustrated with this picture :
https://user-images.githubusercontent.com/8266445/162788443-7fe214a3-4f56-40e4-87b5-83a942f43558.png

I'm looking to do multiline event description.

I know that its not planned to address this problem, but i would like to know if i can do myself a workaround.

do you know where this height is defined (hardcoded into the JS or on the CSS maybe ??
if i make something interesting i would propose it as a merge request :)

Thanks !!

[adhrinae]

Still, It's technically very hard to implement.

I'll explain a bit of code to you. You need to be familiar with Preact.

tui.calendar/apps/calendar/src/components/dayGridWeek/alldayGridRow.tsx

Lines 74 to 83 in 29a095d

	events
	.filter(isWithinHeight(height, EVENT_HEIGHT + WEEK_EVENT_MARGIN_TOP))
	.map((uiModel) => (
	<HorizontalEvent
	key={`allday-DayEvent-${uiModel.cid()}`}
	uiModel={uiModel}
	eventHeight={EVENT_HEIGHT}
	headerHeight={0}
	/>
	)),

It's rendering all-day events by calculating the absolute height of each event. and the height is fixed (22px, EVENT_HEIGHT).

HorizontalEvent receives its height by the eventHeight prop. and it will be the inline style of the dom directly.

tui.calendar/apps/calendar/src/components/events/horizontalEvent.tsx

Line 261 in 29a095d

className={classNames.eventBody}

tui.calendar/apps/calendar/src/css/events/grid.css

Lines 1 to 9 in 29a095d

	.weekday-event-title {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-left: 3px;
	font-weight: bold;
	font-size: 12px;
	}

The body of the event uses white-space: nowrap to handle overflowing text.

So you can change the CSS not to handle text overflow and remove fixed height. but removing fixed height will break the entire layout.