MonthAgendaView

A Calendar view class which displays a compact month calendar suitable for display on a phone sized screen.

By default, its next and previous methods as called by the Calendar's "forward" and "backward" buttons move by a single day. This can be reconfigured using the shiftIncrement property.

The date cells display their event load in different ways, depending on the showEvents setting:

false - Do not show events in cells.
true - Show a themeable bullet to indicate the presence of events for a date.
'count' - Show a themeable badge containing the event count for a date.
'dots' - Show small event-coloured bullets (configurable using the eventDots config).
'heatmap' - Show warmer background colors the more events are present for a date.

By default a single day AgendaView is displayed below it containing the events for the selected date:

Month agenda view

//<code-header>
fiddle.title = 'Month agenda view';
//</code-header>
const calendar = new Calendar({
    appendTo : targetElement,
    width    : 300,
    height   : 550,
    date     : '2024-05-06',
    modes    : {
        day   : null,
        week  : null,
        month : {
            type : 'monthagenda'
        },
        year   : null,
        agenda : null
    },
    events : [
        {
            name       : 'Project Kickoff Meeting',
            startDate  : '2024-05-06T09:00:00',
            endDate    : '2024-05-06T09:45:00',
            resourceId : 1
        },
        {
            name       : 'Design Review',
            startDate  : '2024-05-06T10:00:00',
            endDate    : '2024-05-06T10:30:00',
            resourceId : 2
        },
        {
            name       : 'Client A Check-in',
            startDate  : '2024-05-06T11:00:00',
            endDate    : '2024-05-06T11:30:00',
            resourceId : 3
        },
        {
            name       : 'Lunch with Team',
            startDate  : '2024-05-06T12:00:00',
            endDate    : '2024-05-06T13:00:00',
            resourceId : 4
        },
        {
            name       : 'User Feedback Session',
            startDate  : '2024-05-07T09:00:00',
            endDate    : '2024-05-07T09:45:00',
            resourceId : 1
        },
        {
            name       : 'Financial Review',
            startDate  : '2024-05-07T10:00:00',
            endDate    : '2024-05-07T10:30:00',
            resourceId : 2
        },
        {
            name       : 'Client B Meeting',
            startDate  : '2024-05-07T11:00:00',
            endDate    : '2024-05-07T11:30:00',
            resourceId : 3
        },
        {
            name       : 'Product Brainstorm',
            startDate  : '2024-05-07T12:00:00',
            endDate    : '2024-05-07T12:45:00',
            resourceId : 4
        },
        {
            name       : 'Client C Presentation',
            startDate  : '2024-05-08T09:00:00',
            endDate    : '2024-05-08T09:45:00',
            resourceId : 5
        },
        {
            name       : 'Operations Review',
            startDate  : '2024-05-08T10:00:00',
            endDate    : '2024-05-08T10:45:00',
            resourceId : 6
        },
        {
            name       : 'Development Update',
            startDate  : '2024-05-08T11:00:00',
            endDate    : '2024-05-08T11:30:00',
            resourceId : 1
        },
        {
            name       : 'Lunch with Client D',
            startDate  : '2024-05-08T12:00:00',
            endDate    : '2024-05-08T13:00:00',
            resourceId : 2
        },
        {
            name       : 'Technical Demo',
            startDate  : '2024-05-09T09:00:00',
            endDate    : '2024-05-09T09:45:00',
            resourceId : 3
        },
        {
            name       : 'Customer Support Review',
            startDate  : '2024-05-09T10:00:00',
            endDate    : '2024-05-09T10:45:00',
            resourceId : 4
        },
        {
            name       : 'Client E Discussion',
            startDate  : '2024-05-09T11:00:00',
            endDate    : '2024-05-09T11:30:00',
            resourceId : 5
        },
        {
            name       : 'Team Lunch',
            startDate  : '2024-05-09T12:00:00',
            endDate    : '2024-05-09T13:00:00',
            resourceId : 6
        },
        {
            name       : 'Product Launch Meeting',
            startDate  : '2024-05-10T09:00:00',
            endDate    : '2024-05-10T09:45:00',
            resourceId : 1
        },
        {
            name       : 'Marketing Review',
            startDate  : '2024-05-10T10:00:00',
            endDate    : '2024-05-10T10:30:00',
            resourceId : 2
        },
        {
            name       : 'Client F Call',
            startDate  : '2024-05-10T11:00:00',
            endDate    : '2024-05-10T11:30:00',
            resourceId : 3
        },
        {
            name       : 'Team Brainstorming',
            startDate  : '2024-05-10T12:00:00',
            endDate    : '2024-05-10T12:45:00',
            resourceId : 4
        },
        {
            name       : 'Client G Follow-up',
            startDate  : '2024-05-11T09:00:00',
            endDate    : '2024-05-11T09:45:00',
            resourceId : 5
        },
        {
            name       : 'Performance Review',
            startDate  : '2024-05-11T10:00:00',
            endDate    : '2024-05-11T10:45:00',
            resourceId : 6
        },
        {
            name       : 'End-of-Week Wrap-up',
            startDate  : '2024-05-11T11:00:00',
            endDate    : '2024-05-11T11:30:00',
            resourceId : 1
        },
        {
            name       : 'Happy Hour',
            startDate  : '2024-05-11T12:00:00',
            endDate    : '2024-05-11T13:00:00',
            resourceId : 2
        },
        {
            name       : 'Sprint Planning',
            startDate  : '2024-05-12T09:00:00',
            endDate    : '2024-05-12T09:45:00',
            resourceId : 3
        },
        {
            name       : 'Retrospective Meeting',
            startDate  : '2024-05-12T10:00:00',
            endDate    : '2024-05-12T10:45:00',
            resourceId : 4
        },
        {
            name       : 'Client H Presentation',
            startDate  : '2024-05-12T11:00:00',
            endDate    : '2024-05-12T11:30:00',
            resourceId : 5
        },
        {
            name       : 'Weekly Summary',
            startDate  : '2024-05-12T12:00:00',
            endDate    : '2024-05-12T12:45:00',
            resourceId : 6
        }
    ],
    resources : [
        {
            id   : 1,
            name : 'Alice Johnson'
        },
        {
            id   : 2,
            name : 'Bob Smith'
        },
        {
            id   : 3,
            name : 'Charlie Brown'
        },
        {
            id   : 4,
            name : 'Dana White'
        },
        {
            id   : 5,
            name : 'Eli Green'
        },
        {
            id   : 6,
            name : 'Fiona Black'
        }
    ]
});

You may use the type property of the agenda config property to request that the view below the month may be a DayView or a DayAgendaView

Configs

183

Common

listenersEvents

Other

agenda: AgendaView | DayView | DayAgendaView | EventList= {"type":"agendaview"}Also a property

A config object to reconfigure the default child view which displays the selected date's events.

By default, an AgendaView with a range of '1 day' is used. You may specify other types such as 'dayview' or 'dayagenda':

modes : {
    month : {
        // Our month view shows a MonthAgenda view on phones
        // And when it does, the child "agenda" is a full DayView
        type   : matchMedia('(max-width : 600)').matches ? 'monthagenda' : 'monthview',
        agenda : {
            type         : 'dayview',
            dayStartTime : 8
        }
    }
}

Parameter	Type	Description
`type`	agendaview \| dayview \| dayagenda \| eventlist	The type of view to display the day's events below the month.

agendaDateFormat: String | function

A date formatting string/function which produces a title for the agenda part of the view.

Parameter	Type	Description
`date`	Date	The date to format.

Returns: String -

The formatted date.

agendHeaderRenderer: function | String

A function or the name of a function in the ownership hierarchy which, when passed the active date produces a title for the agenda part of the view. Defaults to having no header.

Parameter	Type	Description
`date`	Date	The date which the Agenda part of the view is displaying.

Returns: String -

The content of the agenda header below the month view.

shiftIncrement: DurationConfig= '1 day'Also a property

The time range to move by when next or previous is called.

Valid values are:

day
week
month
year
decade

This may also be specified as a duration with a magnitude part and a unit part. For example '1m' would mean one month.

In this view, probably the choices should be:

'1 day'
'1 month'

activationKeyCalendarMixin

activeDateDatePicker

allowDragCreateCalendarMixin

allowDragMoveCalendarMixin

allowDragResizeCalendarMixin

animateTimeShiftCalendarPanel

autoCreateCalendarMixin

callOnFunctionsWidget

catchEventHandlerExceptionsEvents

cellRendererDatePicker

columnWidget

dateDatePicker

dayNameFormatDatePicker

defaultFocusContainer

defaultScrollOptionsCalendarMixin

descriptionRendererCalendarMixin

detectCSSCompatibilityIssuesWidget

disabledClsCalendarPanel

disabledDatesCalendarPanel

disableNonWorkingDaysCalendarPanel

disableOtherMonthCellsCalendarPanel

disableWeekendsCalendarPanel

dragSelectDatePicker

dragUnitCalendarMixin

drawerPanel

editMonthDatePicker

eventCountTipCalendarDatePicker

eventDotsCalendarDatePicker

eventFilterSchedulerDatePicker

eventHeaderRendererEventRenderer

eventHeightCalendarMixin

eventRendererEventRenderer

eventSorterCalendarMixin

eventStoreSchedulerDatePicker

extendAllDayEndDayCalendarMixin

filterEventResourcesEventRenderer

focusDisabledDatesDatePicker

getPrimaryResourceEventRenderer

headerRendererCalendarPanel

hideNonWorkingDaysCalendarMixin

hideOtherMonthCellsCalendarPanel

highlightSelectedWeekDatePicker

includeYearDatePicker

inputFieldAlignContainer

labelPositionContainer

maxDateDatePicker

minColumnWidthCalendarPanel

minDateDatePicker

minRowHeightCalendarPanel

monthCalendarPanel

monthButtonFormatDatePicker

multiSelectDatePicker

nonWorkingDayClsCalendarPanel

nonWorkingDaysCalendarPanel

otherMonthClsCalendarPanel

pastEventClsCalendarMixin

renditionContainer

resourceImagePathCalendarMixin

rtlRTL

selectionDatePicker

selectorButtonCalendarMixin

selectorMenuItemCalendarMixin

shadePastDatesCalendarPanel

shortDateFormatCalendarMixin

shortDateTimeFormatCalendarMixin

shortEventClsCalendarMixin

shortEventDurationCalendarMixin

showBulletCalendarMixin

showEventsCalendarDatePicker

showResourceAvatarsCalendarMixin

showWeekColumnCalendarPanel

sixWeeksCalendarPanel

spanWidget

syncCalendarDateCalendarMixin

syncViewDateCalendarMixin

timeFormatCalendarMixin

tipCalendarPanel

todayClsCalendarPanel

weekColumnHeaderCalendarPanel

weekendClsCalendarPanel

weekRendererCalendarPanel

weekStartDayCalendarPanel

Accessibility

ariaDescriptionWidget

ariaLabelWidget

keyMapKeyMap

Content

bbarPanel

defaultsContainer

footerPanel

headerPanel

itemsContainer

lazyItemsContainer

namedItemsContainer

stripsPanel

tbarPanel

textContentContainer

toolsPanel

trapFocusPanel

CSS

bodyClsPanel

borderContainer

clsWidget

colorWidget

contentElementClsWidget

htmlClsWidget

itemClsContainer

styleWidget

uiPanel

DOM

adoptWidget

appendToWidget

contentWidget

datasetWidget

htmlWidget

idWidget

insertBeforeWidget

insertFirstWidget

tagWidget

Float & align

alignWidget

anchorWidget

centeredWidget

constrainToWidget

draggableWidget

floatingWidget

hideAnimationWidget

maximizeOnMobileWidget

positionedWidget

scrollActionWidget

showAnimationWidget

xWidget

yWidget

Layout

alignSelfWidget

collapsedPanel

collapsiblePanel

dockWidget

flexWidget

heightWidget

hiddenWidget

hideWhenEmptyContainer

layoutContainer

layoutStyleContainer

marginWidget

maxHeightWidget

maxWidthWidget

minHeightWidget

minWidthWidget

textAlignWidget

weightWidget

widthWidget

misc

tabBarItemsContainer

Misc

bubbleEventsEvents

dataFieldWidget

defaultBindPropertyWidget

disabledWidget

elementAttributesWidget

iconPanel

ignoreParentReadOnlyWidget

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

maskDefaultsWidget

maskedWidget

monitorResizeWidget

ownerWidget

preventTooltipOnTouchWidget

readOnlyWidget

refWidget

rippleWidget

rootElementWidget

showTooltipWhenDisabledWidget

tabWidget

titlePanel

tooltipWidget

Record

autoUpdateRecordContainer

recordContainer

strictRecordMappingContainer

Scrolling

scrollableWidget

State

statefulState

statefulEventsState

stateIdState

stateProviderState

Properties

144

Class hierarchy

isMonthAgendaView: Boolean= truereadonly

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

isMonthAgendaView: Boolean= truereadonlystatic

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

isCalendarDatePickerCalendarDatePicker

isCalendarMixinCalendarMixin

isCalendarPanelCalendarPanel

isContainerContainer

isDatePickerDatePicker

isDelayableDelayable

isEventRendererEventRenderer

isEventsEvents

isKeyMapKeyMap

isLocalizableLocalizable

isPanelPanel

isRTLRTL

isSchedulerDatePickerSchedulerDatePicker

isStateState

isToolableToolable

isWidgetWidget

Other

agenda: AgendaView | DayView | DayAgendaView | EventList= {"type":"agendaview"}Also a config

A config object to reconfigure the default child view which displays the selected date's events.

By default, an AgendaView with a range of '1 day' is used. You may specify other types such as 'dayview' or 'dayagenda':

modes : {
    month : {
        // Our month view shows a MonthAgenda view on phones
        // And when it does, the child "agenda" is a full DayView
        type   : matchMedia('(max-width : 600)').matches ? 'monthagenda' : 'monthview',
        agenda : {
            type         : 'dayview',
            dayStartTime : 8
        }
    }
}