MonthAgendaView
Widget

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:

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

Useful configs

Config	Description
showEvents	How to show event presence (dots, count, heatmap)
agenda	Config for the agenda/day view below the month
shiftIncrement	Time range to move by on next/previous
eventRenderer	Custom renderer for event bars

Configs

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

agenda : AgendaViewConfig/DayViewConfig/DayAgendaViewConfig/EventListConfig/Object{"type":"agendaview"}
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
        }
    }
}
```
Parameters
- type : 'agendaview'/'dayview'/'dayagenda'/'eventlist'
  
  The type of view to display the day's events below the month.
Has a corresponding runtime agenda property.
agendaDateFormat : String/Function
A date formatting string/function which produces a title for the agenda part of the view.
Parameters
- date : Date
  
  The date to format.
Returns

String
:

The formatted date.
agendaHeaderRenderer : 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.
Parameters
- 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 : String/DurationConfig'1 day'
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'
Has a corresponding runtime shiftIncrement property.

Properties

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

isMonthAgendaView : Booleantrue

READONLY

static

ADVANCED

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

agenda : AgendaViewConfig/DayViewConfig/DayAgendaViewConfig/EventListConfig/Object{"type":"agendaview"}

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
        }
    }
}

Has a corresponding agenda config.

shiftIncrement : String/DurationConfig'1 day'
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'
Has a corresponding shiftIncrement config.
isMonthAgendaView : Booleantrue

READONLY

ADVANCED

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

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-agenda-view-cell-padding	Note that MonthAgenda is a view designed specifically for use on phones /

type: monthagenda

Source path

Calendar/widget/MonthAgendaView.js

Demo

examples/month-agenda

MonthAgendaView
Widget

Useful configs

See also

Configs

Parameters

Parameters

Returns

Parameters

Returns

Properties

CSS variables

Source path

Demo

Inheritance tree9

Mixins9

Contents

MonthAgendaView Widget

Useful configs

See also

Configs

Parameters

Parameters

Returns

Parameters

Returns

Properties

CSS variables

Source path

Demo

Inheritance tree9

Mixins9

Contents

MonthAgendaView
Widget