FluidDayLayout

This class positions events for a DayView by maximizing the visible area of each event. When events overlap, this class determines the minimum amount of horizontal indent required for the overlapping events so that as much of their content as possible is unobstructed.

Configs

clearanceMinutes: Number= 45

The number of minutes of an event that must be (vertically) cleared by another event before it is allowed to be significantly overlapped by it (horizontally).

For example:

      >= clearanceMinutes          < clearanceMinutes
     +--------------+            +----------------+
     | Event 1      |            | Event 3        |
     | 9am-11am     |            | 9am-11am +-------------+
     |  +----------------+       |          | Event 4     |
     |  | Event 2        |       |          | 9:30am-12pm |
     |  | 10am-12pm      |       |          |             |
     |  |                |       |          |             |
     +--|                |       +----------|             |
        |                |                  |             |
        +----------------+                  +-------------+

In the example above, the start time of Event 2 is more than clearanceMinutes after the start time of Event 1, therefore it is displayed with a minimal indent from the left of Event 1. The start time of Event 4, however, is less than clearanceMinutes after Event 3 and so they both share the space evenly.

staggerMinimum: Number= 0.4

This is the minimum width to which staggerWidth will size an event. For example, if an event has many overlapping events, its width may be reduced a number of steps due to staggerWidth. This value limits how much the event's width will be reduced.

This value is expressed as a decimal proportion of the width of 1. For example, the value 0.4 is 40% of the actual width. With this setting, the staggerWidth calculation will not reduce an event's width below 40%.

staggerWidth: Boolean | Number= true

When enabled, the width of an event is reduced in steps based on the number of events that overlap it. Set this config to false or 0 to disable this effect.

If this value is a boolean, the gutterWidth is used for the size of the reduction. If this value is a number, it is the size of the reduction. For example, a value of 0.05 would cause an event to reduce in steps of 5% width based on the number of events that overlap it. A number >= 1 is a number of pixels, however, this is only valid if gutterWidth is also a number of pixels.

By default, events are reduced by the gutterWidth based on the number of events that overlap them.

stretch: Boolean= false

Set this to true to use the full day width for events. By default, overlapping events equally split the width.

gutterDayLayout

gutterWidthDayLayout

insetDayLayout