Bryntum Support Forums

Hi,

We are exploring the Bryntum calendar and trying to configure visibly hours, Please find the following screenshot,

In this, I want to show all 24 hours at one go on the page without a vertical scrollbar similar to the following screenshot,

Is this possible? If yes then please guide.

Sorry, we dropped the ball on documentation here.

It is totally possible. There is a config called hourHeight which you can set on your day and week modes:

modes : {
    day : {
        hourHeight : 30
    },
    week : {
        hourHeight : 30
    }
}

I will update the docs in time for the next release

Obviously the height of the calendar which is has to scroll in is entirely up to you in the normal way.

This is what I have added and what you should have been seeing!

Thanks, Animal

It's works

Just want to know if this solution is resolution independent?

The height value is being set in pixels.So I believe this value which I'm setting is not going to be apt for all screens.

Is there any resolution independent solution available?

Hi Srndt,

Unfortunately, hourHeight now may be defined in pixels only. I've opened a feature request to support "em" too. Here is the link to track the status: https://github.com/bryntum/support/issues/2563

Thank you,
Alex

Thanks for the clarification alex

Hey alex, just curious to ask you one more question regarding reducing the size of the calendar row (The header where we display all-day events, Sun,Mon).

Is there a way to make it look slim and sleak?

I tried the below style:

.b - calendarrow.b - cal - cell - header {
    padding - top: 0 em;
}
#b - calendarrow - 2 {
    min - height: 3.4 rem!important;
}

It did reduce the size of the header.

But if there is any all-day event, those events are not visible at all...

Is there a solution for this ?

The reason behind asking this question is to adjust the calendar and 24-hr view in small devices as you had conveyed
it is not resolution independent when we change hour height.

Srindt wrote: ↑Wed Mar 24, 2021 5:17 pm

Hey alex, just curious to ask you one more question regarding reducing the size of the calendar row (The header where we display all-day events, Sun,Mon).

Is there a way to make it look slim and sleak?

The all day row of a DayView (WeekView is a specialized, 7 day DayView) can be configured:

https://www.bryntum.com/docs/calendar/#Calendar/widget/DayView#config-allDayEvents

It is a CalendarRow

https://www.bryntum.com/docs/calendar/#Calendar/widget/CalendarRow

So you may use configs available on that. Maybe you want the eventHeight there to be smaller?

You could also use CSS to change the appearance of the row. I just changed some font-size and padding here:

To show all the 24 hours without a scrollbar, try overriding this bit of CSS:

.b-dayview-day-content {
    flex : none !important;
}

This obviously means the calendar day header won't stick as you scroll down in your outer containers.