All Day Event - View More

Scheduler
#1

I’m trying to update how all day events work in the Day and Week views. If there are 5 or more events in a single day then I want to show “X more” in place of the 5th event. Then when the user clicks the “X more” button it will display a dialog where they could scroll through all of the all day events. What is the best place to start to get this done?

#2

Hi,

By default the ‘View more’ link can be added only to the Month view.
There is the max_month_events configuration to set the maximum number of events in a cell.
https://docs.dhtmlx.com/scheduler/month_view.html#limitingthenumberofeventsinacell

In case, when you have too many multi-day events that render on the top in Day and Week views, you can use multi_day_height_limit config as an alternative way to set the height of this area with these events.

Please check the demo that demonstrates how it works:
http://snippet.dhtmlx.com/e2332a1bc

#3

I was trying to use multi_day_height_limit but since the position is set to “fixed” the multi day icon and border move when the browser window is scrolled.

#4

I don’t fully understand what you mean. The position of the container with multi-day events .dhx_multi_day is absolute

Does the issue occur in the snippet link from my previous message? Please attach video and show steps that I should follow to reproduce it.

#5

If you look in your screeenshot the “dhx_multi_day_icon” div has a position of “fixed”. This is fine when the calendar is full screened. However, if you have a scroll bar on your browser, the icon div is scrolled with the browser and moves out of place from the rest of the scheduler.

#6

As a workaround, you can apply the css rule

.dhx_multi_day_icon{ position:relative!important }

http://snippet.dhtmlx.com/3e3acfdd6

But in this case, the icon will be scrolled together with multi-day tasks. Unfortunately currently I can’t provide with another solution of the issue.

#7

I did come across a solution but it required overriding some source code. I basically had to put the icon div in a seperate div and wrap the data and icon div with another parent div. Similar to this structure:
<div>
<div class="dhx_multi_day_icon"/>
<div class="dhx_multi_day"/>
</div>

This allowed me to apply some css rules to the divs so that the icon div is always visible and the multi day div could still scroll.

#8

Thank you for sharing the solution. Hope it will be fixed soon.