Our powerful JS Calendar component


Post by bhaskarndt »

Hi,

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

Screenshot-calendar.png
Screenshot-calendar.png (75.26 KiB) Viewed 1762 times

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

24hr_in_one_wind.png
24hr_in_one_wind.png (14.23 KiB) Viewed 1762 times

Is this possible? If yes then please guide.


Post by Animal »

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.


Post by Animal »

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

Screenshot 2020-12-24 at 09.12.37.png
Screenshot 2020-12-24 at 09.12.37.png (23.76 KiB) Viewed 1760 times

Post by bhaskarndt »

Thanks, Animal

It's works


Post by Srindt »

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?


Post by alex.l »

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

All the best,
Alex


Post by Srindt »

Thanks for the clarification alex :)


Post by Srindt »

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.


Post by Animal »

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:

Screenshot 2021-03-24 at 16.29.01.png
Screenshot 2021-03-24 at 16.29.01.png (31.02 KiB) Viewed 1605 times

Post by mats »

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.


Post Reply