Our powerful JS Calendar component


Post by licjapodaca »

When the resource name comes too large the sidebar expands too much...

How can I add an ellipsis to the resources name and reduce the width of the sidebar?

sidebar-too-large.png
sidebar-too-large.png (105.02 KiB) Viewed 551 times

Specs:

  • Calendar v4.3.3

Regards


Post by Animal »

I think I remember putting a maxWidth on it in a recent version.

But if I’m mistaken, you can reconfigure any part of the UI:

https://www.bryntum.com/docs/calendar/api/Calendar/view/Calendar#config-sidebar


Post by licjapodaca »

Excellent @Animal, I already add a maxWidth to the Sidebar and it works!!!

But, just one last thing, how can I put some ellipsis characters at the end of a large name resource by CSS ? ... because I already add to the class b-list-item like so:

ellipsis-resource-calendar.png
ellipsis-resource-calendar.png (506.76 KiB) Viewed 521 times

And, how can I add a tooltip with the large complete name when the user do a mouse hover to this resource in the Sidebar?

Regards


Post by alex.l »

Hi licjapodaca,
You need to wrap the text into another span by defining custom https://bryntum.com/docs/calendar/api/Scheduler/widget/ResourceFilter#config-itemTpl and apply your styles to it.

All the best,
Alex


Post by licjapodaca »

Excellent @Alex, it works 👍🏻


Post Reply