DayAgendaView
This is normally used as a mode of a Calendar (as seen in the live demo below), but may be used standalone as a regular Widget.
As a standalone widget, it will lack the capabilities of the Calendar class, such as keyboard-based event to event navigation and drag/drop features.
A Panel which displays one or more columns of days with events for each day arranged in ascending time order in each column.
Unlike the regular DayView, events are rendered as full width, auto heighted blocks, flowing down each day column in ascending order, causing the hour row to expand to accommodate them.
Events are placed into the hour row in which they begin
Events may be dragged between hours. The drop granularity is in one hour increments, so you can move events to start on an hour boundary. Edit the event to set the minutes.
This view is not limited to showing a single day. The date and range or startDate and endDate may be configured to cover any range.
When using range, setting the date snaps the view to the start of a range (for example '1 week') which encapsulates the requested date.
When the startDate is changed dynamically, the duration remains the same.
This view can be configured to scroll to the specific time on first render, which defaults to 7 AM. This behavior is controlled by the visibleStartTime config.
Event rendering can be customized using the eventRenderer method.
Useful configs
| Config | Description |
|---|---|
| hourHeight | Pixel height of an empty hour row |
| hideEmptyHours | Hide hour rows with no events |
| eventFlowDirection | Flow events vertically or horizontally |
| syncHourHeights | Sync hour row heights across day columns |
| hideTimeAxis | Hide the time axis column |
See also
- Calendar — The main Calendar that hosts this view
- DayView — Parent class providing day column infrastructure
- MonthAgendaView — Compact month view with agenda listing below
Configs
Configs are options you supply in a configuration object when creating an instance of this class-
The color of the borders (if any) between hour rows and day rows.
Has a corresponding runtime borderColor property.
-
Which direction to flow events in an hour row, vertically (the default), or horizontally.
Has a corresponding runtime eventFlowDirection property.
-
How much vertical space to leave between event bars in a cell.
Has a corresponding runtime eventSpacing property.
-
How much space to leave empty at the right side of day columns to allow interaction such as double click or drag.
Has a corresponding runtime gutterWidth property.
-
Set this to true to hide the borders between cells.
Has a corresponding runtime hideBorders property.
-
Set this to true to hide the time cells in the day columns.
Has a corresponding runtime hideTimeAxis property.
-
How much vertical whitespace between the hour cells.
Has a corresponding runtime hourSpacing property.
-
The minimum event width when eventFlowDirection is
'row'.Has a corresponding runtime minEventWidth property.
Properties
Properties are getters/setters or publicly accessible variables on this class-
Identifies an object as an instance of DayAgendaView class, or subclass thereof.
-
The color of the borders (if any) between hour rows and day rows.
Has a corresponding borderColor config.
-
This is invalid for this view
-
Which direction to flow events in an hour row, vertically (the default), or horizontally.
Has a corresponding eventFlowDirection config.
-
How much vertical space to leave between event bars in a cell.
Has a corresponding eventSpacing config.
-
How much space to leave empty at the right side of day columns to allow interaction such as double click or drag.
Has a corresponding gutterWidth config.
-
Set this to true to hide the borders between cells.
Has a corresponding hideBorders config.
-
Set this to true to hide the time cells in the day columns.
Has a corresponding hideTimeAxis config.
-
How much vertical whitespace between the hour cells.
Has a corresponding hourSpacing config.
-
The minimum event width when eventFlowDirection is
'row'.Has a corresponding minEventWidth config.
-
Identifies an object as an instance of DayAgendaView class, or subclass thereof.
Functions
Functions are methods available for calling on the classCSS variables
CSS variables that can be set to adjust appearance| Name | Description |
|---|---|
| --b-day-agenda-view-hour-hover-background | Hour hover background |