Our powerful JS Calendar component


Post by luiscloud »

Hi,

on calendar month view
and on calendar week view (only on all day events)

Events appear with a fixed width and the text is cut off.

Screenshots:
Image

Image

Image

Image

Why fixed width is applied by styles?

A provisional workaround (only to month view) is add a nonworking days like:

    calendarRef.modeDefaults.hideNonWorkingDays = true
    calendarRef.modeDefaults.nonWorkingDays = {
      0: false,
      1: false,
      2: false,
      3: false,
      4: false,
      5: false,
      6: false,
    }

and with that, events are rendered fine.

Thanks


Post by Animal »

Seems like a CSS problem.

The bar width is done using %age of a week width

So for one day, it's 1/7 of a week as a percentage, so the CSS style has width : 14.29%

The offsetParent of an event bar should be the ancestor .b-calendarrow-cell-container, not its 2 immediate parent nodes, so that is what the %age is of.

If some other CSS has been added, this could break, and make it 14.29% of the cell's width. See if that has happened.


Post Reply