Our powerful JS Calendar component


Post by ducminh1511 »

Hello friends,

I have an issue, how can I show all tasks like the design below, without showing + more

Attachments
task_2.png
task_2.png (25.61 KiB) Viewed 1063 times
task_1.png
task_1.png (11.76 KiB) Viewed 1063 times

Post by alex.l »

Hi ducminh1511,

Please check: https://bryntum.com/docs/calendar/#Core/widget/CalendarPanel#config-minRowHeight

To change it at runtime:

calendarInstance.activeView.minRowHeight = 300;

All the best,
Alex

All the best,
Alex


Post by alex.l »

With 4.1.0 release we will have a special method for that
shrinkwrapWeekRow(date)

Causes the week row referenced by the parameter (Either a Date, or the zero based row index) to size itself to exactly wrap the maximum number of events for any day of that week.

If there are a lot of events, the row may grow in height. If few, or none, the row will shrink in height. The day name header along the top will always be visible by default.

The row has the CSS class 'b-shrinkwrapped' added when it is in the shrinkwrapped state to allow querying, and custom styling.

All the best,
Alex


Post by ducminh1511 »

Can I customize the tasks as shown below, the tasks will be so different. Make sure all tasks can be displayed


Post by ducminh1511 »

I can customize the tasks as shown below, the tasks will overlap like that. Make sure all tasks can be displayed

Attachments
task_1.png
task_1.png (11.76 KiB) Viewed 1047 times

Post by Animal »

To make a layout like this which renders all events for the day, but offsetting each one only a small amount would be a Feature Request.

It would of course, make the user interface extremely difficult to use, so I'm not sure how many other Calendar customers would benefit from implementing a Feature Request like this. It seems more like a one-off requirement for our services department.

If there were 100 events for one day, and the cell was only 150 px tall, then each event bar would have 1.5 pixels of its element showing.

That would make it practically impossible to click on with a mouse, and completely impossible to interact with using touch.

Even the picture example you posted above would be a very difficult user interface. The clickable parts of the events are maybe 10 pixels which is difficult to click on (and impossible to touch-tap), and there's no information visible about which event you are clicking on (Except for the last one). I have never seen any Calendar implementations which do that.


Post by ducminh1511 »

Thank you very much, I will discuss this with our client


Post Reply