DayLayout
Abstract

The base class for DayView layout algorithms. It determines how overlapping intra-day events are arranged horizontally within a day column by grouping them into clusters and calculating their position and size as LayoutDim values. Subclasses such as FluidDayLayout implement specific strategies for distributing available width among overlapping events.

The layout is configured through the DayView's eventLayout config:

const calendar = new Calendar({
    modes : {
        day : {
            eventLayout : {
                // Use the fluid layout (default)
                type        : 'fluid',
                // Enable a gutter for creating events in occupied time slots
                gutter      : true,
                gutterWidth : 15
            }
        }
    }
});

No results

Configs

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

gutter : Booleantrue

Set to false to disable the gap on the right-most edge of events. See gutterWidth to control the size of the gutter.

The gutter allows the user to select the times overlapped by events, for example, to create new events.
gutterWidth : Number5

The number of pixels or proportion of the overall width to allocate to the gutter.

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.
inset : Number40

The number of pixels or proportion of the overall width to allocate for rendering on outside the area where events are displayed. This space is used by TimeRanges to render arbitrary spans of time on either side of the day's events.

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.
overlapTolerance : Number0

internal

The minimum number of minutes an event must overlap another event before it is considered an overlap for layout purposes.

The default value of 0 treats any overlap in time as an overlap in the layout.

Properties

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

isDayLayout : Booleantrue

READONLY

static

ADVANCED

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

isDayLayout : Booleantrue

READONLY

ADVANCED

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

Functions

Functions are methods available for calling on the class

beforeLayoutEvents( context )
: DayLayoutContext

internal

This method is called prior to performing the layout in layoutEvents.
clusterize( clusters, items, item, context )

internal

This method packages items into clusters of overlapping items.
createLayoutContext( cellData, dayDomConfig )
: DayLayoutContext

internal

Populates and returns a layout context used for the layout process.
createLayoutItem( eventRecord, context )
: DayLayoutItem

internal

Returns the base of a DayLayoutItem for the passed event record.
layoutCluster( cluster )

internal

The derived class implements this abstract method to finalize the position of the specified cluster. This is done by storing position properties (left and width) on the items of the cluster.
layoutEvents( cellData, dayDomConfig )
: DayLayoutContext

internal

Calculate the placements for the given events within the specified time range.

Type definitions

DayLayoutItem

internal
The item returned by the layoutEvents method.
Properties
- eventRecord : EventModel
  
  The event being displayed.
- cluster : DayLayoutCluster
  
  The cluster of events with overlapping times.
- start : Number
  
  The start time (as the number seconds since midnight) of the item.
- end : Number
  
  The end time (as the number seconds since midnight) of the item.
- left : LayoutDim
  
  The left position of the item.
- top : LayoutDim
  
  The top position of the item.
- width : LayoutDim
  
  The width of the item.
- height : LayoutDim
  
  The height of the item.
- startsBefore : Boolean
  
  Set to true if the event started in a previous day.
- endsAfter : Boolean
  
  Set to true if the event end in a future day.
DayLayoutCluster

internal
A set of items that overlap. This object is passed to the layoutCluster method.
Properties
- context : DayLayoutContext
  
  The layout context
- items : DayLayoutItem[]
  
  The items in this event cluster.
- start : Number
  
  The start time (as the number seconds since midnight) of the item.
- end : Number
  
  The end time (as the number seconds since midnight) of the item.
DayLayoutContext

internal
The object returned by createLayoutContext.
Properties
- cellData : DayCell
  
  An object containing information about the day cell being created.
- clusters : DayLayoutCluster[]
  
  The item clusters produced by layoutEvents.
- items : DayLayoutItem[]
  
  The items created by the layoutEvents method.
- layout : DayLayout
  
  The owing layout instance.

Source path

Calendar/layout/day/DayLayout.js

DayLayout
Abstract

Configs

Properties

Functions

Type definitions

Properties

Properties

Properties

Source path

Inheritance tree2

Contents

DayLayout Abstract

Configs

Properties

Functions

Type definitions

Properties

Properties

Properties

Source path

Inheritance tree2

Contents

DayLayout
Abstract