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. Unlike a strict column-based layout where each overlapping event gets an equal-width column, this fluid approach allows non-overlapping portions of events to expand to full width, only indenting where actual time overlaps occur.

This is the default layout used by DayView. It can be configured through the DayView's eventLayout config:

const calendar = new Calendar({
    modes : {
        day : {
            eventLayout : {
                type             : 'fluid',
                clearanceMinutes : 30,
                gutterWidth      : 20
            }
        }
    }
});

No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class

clearanceMinutes : Number45

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.

complexityLimit : Number2000

internal

The maximum number of possible solutions to evaluate when calculating an event's width.
escapeMinutes : Number

internal
The number of minutes of an overlapping event that must be (vertically) cleared by another event before it is allowed to be fully overlapped by it (horizontally). THis value is a number of minutes beyondclearanceMinutes. In other words, if clearanceMinutes is 45 and this config is set to 75, the start time of an event must be two hours (45+75 = 120 minutes) after the prior event to fully overlap it.

For example:
```
      >= escapeMinutes                    < escapeMinutes
     +----------------+                 +----------------+
     | Event 1        |                 | Event 5        |
     | 9am-11am +-------------+         | 9am-11am +-------------+
     |          | Event 2     |         |          | Event 6     |
     |          | 9:30am-12pm |         |          | 9:30am-12pm |
     |          |             |         |          |  +-------------+
     |  + --------------------+         |          |  | Event 7     |
     +--| Event 3             |         +----------|  | 10:15am     |
        | 10:30am             |                    |  |             |
        |                     |                    +--|             |
        +---------------------+                       +-------------+
```
In the example above, the start time of Event 3 is more than escapeMinutes after the start time of Event 2, therefore it is allowed to fully overlap the bottom of Event 2. As can be seen above, this does not allow Event 3 to overlap the top-most overlapping event (Event 1). In the case of Event 7, the event starts less than escapeMinutes after Event 6 and so the left edge of Event 6 remains exposed. The positioning of Event 7 is determined by clearanceMinutes.
indentWidth : Number10

internal

The number of pixels or proportion of the overall width to indent overlapping events that overlap by at least clearanceMinutes. Events that overlap by less than clearanceMinutes will split the available space.

Values less than 1 are the fractional proportion of the width (for example, 0.04 is 4% of the width), while values greater than or equal to 1 are a number of pixels.
staggerMaximum : Number

internal

The maximum amount of width reduction due to overlapping items. If gutterWidth is a number of pixels, this value must also be in pixels (i.e., >= 1). Otherwise, this value is a proportional value between 0 and 1.

Even though this value limits the width reduction from overlapping items, it is possible that this value exceeds the event width due to its nesting level (the number of prior events this event overlaps). In this case, the staggerMinimum value will prevent the width from becoming too small.
staggerMinimum : Number0.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/Numbertrue

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 : Booleanfalse

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

Properties

Properties are getters/setters or publicly accessible variables on this class

isFluidDayLayout : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of FluidDayLayout class, or subclass thereof.

isFluidDayLayout : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of FluidDayLayout class, or subclass thereof.

Source path

Calendar/layout/day/FluidDayLayout.js

FluidDayLayout

Configs

Properties

Source path

Inheritance tree3

Contents