schedules with time range less then 20 minutes render height as 20 minutes

[ZhaoYuLing]

Describe the bug

when i have a schedule with 15 minutes ,it rendered height just as 20 minutes,like show in picture i have set week.timegridOneHour.height:120px, when my schedule duration is more then 20mins ,the calendar show perfect, but when my schedule duration is 15mins , the rendered schedule height is 40px, which should be 30px, then i tried other duration and i found if my schedule duration is less then 20mins it just render as 20mins height (40px)

To Reproduce

Steps to reproduce the behavior:

1. Go to 'https://ui.toast.com/tui-calendar/'
2. create a schedule with duration less than 20mins
3. the schedule will render height as 20mins

Expected behavior

schedule rendered height should be percent of week.timegridOneHour.height, as schedule duration percent of an hour

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

Add any other context about the problem here.

[auto-comment[bot]]

Thank you for raising an issue. We will try and get back to you as soon as possible.

Please make sure you have filled out issue respecting our form in English and given us as much context as possible. If not, the issue will be closed or not replied.

[jungeun-cho]

I confirmed the problem.

The minimum height time in the source code is set to 20 minutes.

It seems to be correct to calculate based on the height value input from the user (eg. week.timegridOneHour.height: 120px).

However, We must set a minimum height to display the title text.

[lnvglr]

Same issue here. Any news on the mattter?

[adhrinae]

@lnvglr Sorry, there's no improvement yet.

[droppy2014]

Same problem, would very like to control this view

[Jonas-Lieske]

I'm having the same problem. Is there an easy workaround for this?

[adhrinae]

We made a decision that the minimum height of events should be the height of 30 minutes. I suggest you check out other projects like fullcalendar for a more customizable calendar.

[Jonas-Lieske]

I suggest you check out other projects like fullcalendar for a more customizable calendar.

Sadly FullCalendar is highly expensive and has an intransparent pricing system, which is why I would like to stay with an Opensource solution.

We made a decision that the minimum height of events should be the height of 30 minutes.

I understand that you decided to keep the minimum height to 30 for this project, but could you point me to the part where it can be changed since this decision leads to a few problems on my side?

[adhrinae]

@Jonas-Lieske

(Disclaimer: I'm explaining the codes of the newer version(v2). I can't help you with the v1)

First, a createTimeGrid function calculates each row's height in the time grid. every row takes space in the amount of 30 minutes.

https://github.com/nhn/tui.calendar/blob/main/apps/calendar/src/helpers/grid.ts#L419

And starting from the components/view/week|day.tsx, the generated data is passed down to the TimeGrid, then to the Column.

https://github.com/nhn/tui.calendar/blob/main/apps/calendar/src/components/view/week.tsx#L158 https://github.com/nhn/tui.calendar/blob/main/apps/calendar/src/components/timeGrid/timeGrid.tsx#L178-L187 https://github.com/nhn/tui.calendar/blob/main/apps/calendar/src/components/timeGrid/column.tsx#L164

In the last link above, you can see where the minHeight is assigned. I'm not sure it works but you can divide this variable in half to set the minimum height to be the size of 15 minutes.

const minEventHeight = timeGridRows[0].height / 2;

[joancostacosta]

const minEventHeight = Math.round(timeGridRows[0].height * 0.5); // WORKED FOR ME!!