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.
//<code-header>
fiddle.title = 'Day agenda view';
//</code-header>
const calendar = new Calendar({
appendTo : targetElement,
height : 500,
date : '2024-05-27',
modes : {
day : {
type : 'dayagenda',
dayStartTime : 8,
dayEndTime : 18,
visibleStartTime : 6,
showAllDayHeader : false
},
week : null,
month : null,
year : null,
agenda : null
},
events : [
{
name : 'Project Kickoff Meeting',
startDate : '2024-05-27T09:00:00',
endDate : '2024-05-27T09:30:00',
resourceId : 1
},
{
name : 'Design Review',
startDate : '2024-05-27T09:30:00',
endDate : '2024-05-27T10:00:00',
resourceId : 2
},
{
name : 'Client A Check-in',
startDate : '2024-05-27T10:00:00',
endDate : '2024-05-27T10:30:00',
resourceId : 3
},
{
name : 'Lunch with Team',
startDate : '2024-05-27T12:00:00',
endDate : '2024-05-27T13:00:00',
resourceId : 4
},
{
name : 'Marketing Strategy Session',
startDate : '2024-05-27T13:00:00',
endDate : '2024-05-27T13:30:00',
resourceId : 5
},
{
name : 'Development Sync-up',
startDate : '2024-05-27T13:30:00',
endDate : '2024-05-27T14:00:00',
resourceId : 6
},
{
name : 'Weekly Wrap-up',
startDate : '2024-05-27T16:00:00',
endDate : '2024-05-27T17:00:00',
resourceId : 1
}
],
resources : [
{
id : 1,
name : 'Alice Johnson',
eventColor : 'red'
},
{
id : 2,
name : 'Bob Smith',
eventColor : 'orange'
},
{
id : 3,
name : 'Charlie Brown',
eventColor : 'green'
},
{
id : 4,
name : 'Dana White',
eventColor : 'blue'
},
{
id : 5,
name : 'Eli Green',
eventColor : 'violet'
},
{
id : 6,
name : 'Fiona Black',
eventColor : 'deep-orange'
}
]
});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.
Configs
199
Configs
199Other
The color of the borders (if any) between hour rows and day rows.
Which direction to flow events in an hour row, vertically (the default), or horizontally.
How much vertical space to leave between event bars in a cell.
How much space to leave empty at the right side of day columns to allow interaction such as double click or drag.
Set this to true to hide the borders between cells.
Set this to true to hide empty hour rows in this day agenda.
Note that if syncHourHeights is set, then empy hours will show where any column has events for that hour because all row meights must match in this case.
Set this to true to hide the time cells in the day columns.
The height in pixels of an empty hour row.
Hour rows grow to accommodate events when they contain events.
How much vertical whitespace between the hour cells.
The minimum event width when eventFlowDirection is 'row'.
By default the hours across a multiple day view may have different heights because of different event loads.
Soecify this as true to sync hour heights so that each spans the event load for the hour.
Content
CSS
DOM
Float & align
Layout
misc
Misc
Scrolling
Properties
172
Properties
172Common
Class hierarchy
Other
The color of the borders (if any) between hour rows and day rows.
Which direction to flow events in an hour row, vertically (the default), or horizontally.
How much vertical space to leave between event bars in a cell.
How much space to leave empty at the right side of day columns to allow interaction such as double click or drag.
Set this to true to hide the borders between cells.
Set this to true to hide empty hour rows in this day agenda.
Note that if syncHourHeights is set, then empy hours will show where any column has events for that hour because all row meights must match in this case.
Set this to true to hide the time cells in the day columns.
The height in pixels of an empty hour row.
Hour rows grow to accommodate events when they contain events.
How much vertical whitespace between the hour cells.
The minimum event width when eventFlowDirection is 'row'.
By default the hours across a multiple day view may have different heights because of different event loads.
Soecify this as true to sync hour heights so that each spans the event load for the hour.
CSS
DOM
Layout
Misc
State
Widget hierarchy
Functions
91
Functions
91Configuration
Events
Misc
Other
Widget hierarchy
Events
35
Events
35Event handlers
35
Event handlers
35Typedefs
13
Typedefs
13CSS variables
83
CSS variables
83| Name | Description |
|---|---|
| Hovered | |
--b-day-agenda-view-hour-hover-background | Hour hover background |