Customize scheduler cells height - Smart UI Components

Tagged: Reactjs, Scheduler

This topic has 7 replies, 5 voices, and was last updated 1 year, 8 months ago by svetoslav_borislavov.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
May 24, 2022 at 2:40 pm #103253

Javi Navarrete
Participant

Hi,

We need to change the height of the cells when is in “Week” view, to show more events and scroll less.

Is there any parameter we could change for it?.

Thanks

May 25, 2022 at 11:31 am #103258
admin
Keymaster
Hi Javi,

You can use the –smart-scheduler-timeline-cell-height CSS variable to customize the cells height in Scheduler.
```
.smart-scheduler {
    --smart-scheduler-timeline-cell-height:30px;
}
```
Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/
March 6, 2023 at 5:01 am #104470
Anh Hoang
Participant
ohh thank you, one more question, i want adjust height event

.smart-scheduler .smart-scheduler-event .pending {
height: 120px;
}

try with that but not working, could you give some advise?
- This reply was modified 1 year, 8 months ago by Anh Hoang.
March 6, 2023 at 5:33 am #104474

svetoslav_borislavov
Participant

Hi,

The event’s height depends on the duration of the event. You can change the height of the cells, this will impact the height of the event

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

March 6, 2023 at 5:59 am #104475
Anh Hoang
Participant
Hi,

in month view, i’m create an event from 12:00 AM to 11:00 PM but it’s too small, 1/4 of cell, how to make it more larger?
- This reply was modified 1 year, 8 months ago by Anh Hoang.
March 7, 2023 at 6:22 am #104489

Steven Peterson
Participant

Hi,

To change the size of the event, you can use the –smart-scheduler-event-size CSS variable.
Here is an example: https://codepen.io/Steevee222/pen/dyqzQXL

Best Regards,
Steven Peterson

Smart UI Team
https://www.htmlelements.com/

March 20, 2023 at 7:48 am #104573
Anh Hoang
Participant
Hello, i add classname to scheduler and adjust it like this:

‘& .calendar-scheduler .smart-scheduler-event’: {
height: ’50px!important’,</div>
},
it’s look so ugly, how can i make it dynamic( ex 1 or 2 will expand, and remain in ” (number) more” ). Thanks for your help
- This reply was modified 1 year, 8 months ago by Anh Hoang.
- This reply was modified 1 year, 8 months ago by Anh Hoang.
March 20, 2023 at 8:44 am #104581

svetoslav_borislavov
Participant

Hi,

As shown in my previous reply, the proper way of changing the scheduler event size is with the CSS variable.
If you want to change it, you may have a class that changes this variable and applies it when needed.

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/
Author

Posts