MonthView

Widget

By default, weeks rows all flex to share the available height equally.

To make them shrinkwrap their events to show all events in every row, configure this as true

Has a corresponding runtime autoRowHeight property.

The height of event bars in this view. This can be a numeric value in pixels or a CSS unit measure such as '2em'.

Note that the default event bar height is slightly larger when the user has configured their system for increased contrast to adhere to WCAG guidelines for increased target size in that mode.

Has a corresponding runtime eventHeight property.

By default, week rows flex to share available Panel height equally.

This may be configured as a number, in which case it means pixels, or a CSS length.

The non-standard unit ev may also be specified to mean "events". For example '3ev' means rows will always be three events bars (plus the day header) tall.

This is a useful config when using autoRowHeight, or using overflowClickAction when rows may be switched to shrinkwrapping their event content and may shrink in height.

Setting this config causes the month grid to become scrollable in the Y axis.

How the view responds to clicking on a +n more button in an overflowing day cell.

The default value, 'popup', means that a small dialog box showing the full complement of events for that cell is shown aligned to the cell.

When set to 'expand', then clicking the +n more button causes the encapsulating row to expand to accommodate all events in that row with no overflow.

Navigating to a new month resets the row to its default, flexed height.

By default, rows which have been modified by the WeekExpander feature, not by the autoRowHeight setting, to shinkwrap large content are reset to flexed height on month change.

To have rows persist their shrinkwrapped status across month changes, confgure this as true.

If autoRowHeight is set, then the new month always has auto heighted rows.

Has a corresponding runtime persistShrinkWrappedRows property.

An object which describes how the event bar height in month cells should respond to changes in available vertical space.

The object keys may be

• threshold : The minimum number of event bars which should be visible in a cell before the event bar height starts to be reduced.
• minHeight : The minimum event bar height to use when the threshold is reached.

When the number of event bars visible in a cell (based on the current row height) hits the threshold, from then on, further reductions in row height will cause the event bar height to be reduced, but never less than the configured minHeight.

new Calendar({
   ...,
   modes : {
       month : {
           // When the visible event bar count gets down to 3, then when the row height
           // shrinks, start reducing the event height, stop at a minimum of 14px
           responsiveEventHeight : {
               threshold : 3,
               minHeight : 14
           }
       }
   }
});

This may also be configured as an object whose keys are breakpoint heights (in pixels) and whose values are the corresponding event heights to use when the height of the event container in a cell is less than the breakpoint.

This allows events to use a larger height when more vertical space is available, and a smaller height when space is constrained:

new Calendar({
   ...,
   modes : {
       month : {
           // When the event container height is less than 58px, use 16px event height
           // When the event container height is less than 75px, use 18px event height
           // Otherwise, use the configured eventHeight (the default is 20px)
           responsiveEventHeight : {
               58 : 16,
               75 : 18
           }
       }
   }
});