YearView
Widget

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. As seen in this demo:

A Panel which displays a year's worth of months with days which have events highlighted.

Useful configs

Config	Description
year	The year to display
dayCellRenderer	Custom renderer for day cells
showEvents	How to indicate event presence (heatmap, dots, count)
sixWeeks	Show six week rows per month or fit to content

Configs

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

date : Date

A date which specifies the year to display. All types of calendar view have a date config which they use to set their visible date range according to their configuration and type.
eventCountTip : Boolean/Object<String, Boolean | String>
When overflowPopupTrigger is not a mouseover gesture, setting this to a truthy value means that a tooltip containing the event count will be shown on hover of a day cell.

It may be specified as an Object which contains Tooltip config options, and also the following option:
- showNoEvents - When set to true, a tooltip containing "No events" is shown when hovering empty day cells.
For example:
```
{
    modes : {
        year : {
            // We want it to show if there are no visible events for that date.
            // And we want the tip showing to the right of the cell
            eventCountTip : {
                showNoEvents : true,
                align        : 'l-r
            }
        }
    }
}
```
Has a corresponding runtime eventCountTip property.
eventDots : Object
When showEvents is 'dots', this controls the layout of the dots below the day number.

If the max property is 1, the dots will be coloured using the default event colour, not the colour of the event. This is to create a consistent appearance.
- marginTop : Number
  
  The margin above the dots. Default is 4.
- max : Number
  
  The maximum number of dots to show. Default is 4.
- gap : Number
  
  The gap between dots. Default is 3.
- size : Number
  
  The size of the dots. Default is 5.
- stripe : Boolean
  
  If true, the dots will be striped, meaning they will be joined together with no gap between them and rounded at each end. Default is false.
Has a corresponding runtime eventDots property.
otherMonthCls : String

private

The class name to add to calendar cells which are in the previous or next month.
showEvents : Boolean/'heatmap'/'dots'heatmap
How to indicate the presence of events for a date. The default is heatmap which adds classes depending on how many events intersect the date.Values may be:
- false - Do not show events in cells.
- true - Show a heatmap of colours the intensity of which indicates event load.
- 'heatmap' - Show a heatmap of colours the intensity of which indicates event load.
- 'count' - Show a themeable badge containing the event count for a date.
- 'dots' - Show small event-coloured bullets up to a maximum of eventDots.max to indicate event presence. to indicate event presence.
Has a corresponding runtime showEvents property.
sixWeeks : Boolean

By default, all months show six week rows. Pass false to only render as many rows as needed.
year : Number

The year to display
dayCellRenderer : Function
An empty function by default, but provided so that you can override it.

This function is called for each cell rendered to allow developers to mutate the cell metadata, or the CSS classes to be applied to the cell.

The cellConfig (a DomConfig) definition passed as part of the single parameter may be mutated to add style and className.
```
dayCellRenderer : function(cellData) {
    // I don't like Mondays!
    if (cellData.date === 1) {
        cellData.cls['dayoff'] = true;
    }
}
```
A non-null return value from the renderer is used as the content of the day cell element.
Parameters
- cellData : YearCell
  
  A DayCell object that contains data about the cell.
Returns

DomConfig/String/null

Properties

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

isYearView : Booleantrue

READONLY

static

ADVANCED

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

eventCountTip : Boolean/Object<String, Boolean | String>
When overflowPopupTrigger is not a mouseover gesture, setting this to a truthy value means that a tooltip containing the event count will be shown on hover of a day cell.

It may be specified as an Object which contains Tooltip config options, and also the following option:
- showNoEvents - When set to true, a tooltip containing "No events" is shown when hovering empty day cells.
For example:
```
{
    modes : {
        year : {
            // We want it to show if there are no visible events for that date.
            // And we want the tip showing to the right of the cell
            eventCountTip : {
                showNoEvents : true,
                align        : 'l-r
            }
        }
    }
}
```
Has a corresponding eventCountTip config.
eventDots : Object
When showEvents is 'dots', this controls the layout of the dots below the day number.

If the max property is 1, the dots will be coloured using the default event colour, not the colour of the event. This is to create a consistent appearance.
- marginTop : Number
  
  The margin above the dots. Default is 4.
- max : Number
  
  The maximum number of dots to show. Default is 4.
- gap : Number
  
  The gap between dots. Default is 3.
- size : Number
  
  The size of the dots. Default is 5.
- stripe : Boolean
  
  If true, the dots will be striped, meaning they will be joined together with no gap between them and rounded at each end. Default is false.
Has a corresponding eventDots config.
resource : ResourceModel

READONLY

Returns the resource associated with this year view when used inside a ResourceView
showEvents : Boolean/'heatmap'/'dots'heatmap
How to indicate the presence of events for a date. The default is heatmap which adds classes depending on how many events intersect the date.Values may be:
- false - Do not show events in cells.
- true - Show a heatmap of colours the intensity of which indicates event load.
- 'heatmap' - Show a heatmap of colours the intensity of which indicates event load.
- 'count' - Show a themeable badge containing the event count for a date.
- 'dots' - Show small event-coloured bullets up to a maximum of eventDots.max to indicate event presence. to indicate event presence.
Has a corresponding showEvents config.
startDate : Date

internal

READONLY

For a consistent API, allow startDate to set the year
isYearView : Booleantrue

READONLY

ADVANCED

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

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

refresh

Fires when this YearView refreshes.

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onRefresh

Called when this YearView refreshes.

Type definitions

YearCell : DayCell
A data block created by all DayCellCollecter Calendar views to encapsulate occupied year cells and the events which intersect with each date to be shown in the UI. All useful data about the date and the shape of the UI is included.
Properties
- cellConfig : DomConfig
  
  A DomConfig object that contains data about the cells element.
- style : String
  
  The style property is an object containing style properties for the cell header element.
- cls : String
  
  The cls property is an object whose property names will be added to the cell element if the property value is truthy.

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-year-view-background	Background color for the year view.
--b-year-view-cell-background	Background color for the day cells in the year view.
--b-year-view-cell-color	Color for the day cells in the year view.
--b-year-view-column-gap	Gap between month columns in the year view.
--b-year-view-content-padding	Padding for the content in the year view.
--b-year-view-day-cell-color	Color of the day cells in the year view.
--b-year-view-day-cell-size	Size of the day cells in the year view.
--b-year-view-dragproxy-background	Background for the drag proxy in the year view.
--b-year-view-font-size	Font size for the year view.
--b-year-view-font-size-big	Font size when the year view is in big mode (responsive).
--b-year-view-foreground-color	Foreground color for the year view.
--b-year-view-foreground-font-weight	Font weight for the foreground elements in the year view.
--b-year-view-heatmap-background	Heatmap background (a shade of the heatmaps color)
--b-year-view-month-max-width	Maximum width for a month view in the year view.
--b-year-view-month-min-width	Minimum width for a month view in the year view.
--b-year-view-month-name-cell-background	Background color for the month names in the year view.
--b-year-view-month-name-cell-color	Color for the month names in the year view.
--b-year-view-month-name-font-size	Font size for the month names in the year view.
--b-year-view-month-name-max-width	Maximum width for the month name in the year view.
--b-year-view-other-month-cell-color	Color for the day cells of other months in the year view.
--b-year-view-row-gap	Gap between month rows in the year view.
--b-year-view-tentative-event-color	Color for tentative events in the year view.
--b-year-view-tentative-event-color2	Secondary color for tentative events in the year view.
--b-year-view-today-cell-background	Background color for the "today" cell in the year view.
--b-year-view-today-cell-border	Border for the "today" cell in the year view.
--b-year-view-today-cell-color	Color for the "today" cell in the year view.
--b-year-view-today-cell-font-weight	Font weight for the "today" cell in the year view.
--b-year-view-week-cell-background	Background color for week numbers in the year view.
--b-year-view-week-cell-color	Color for week numbers in the year view.
Hovered
--b-year-view-cell-hover-background	Background color for the day cells on hover in the year view.
--b-year-view-cell-hover-color	Color for the day cells on hover in the year view.
--b-year-view-events-hover-blend-mode	Blend mode for events on hover in the year view.
--b-year-view-heatmap-hover-background	Heatmap hover background (a shade of the heatmaps color)
--b-year-view-month-name-cell-hover-background	Background color for the month names on hover in the year view.
--b-year-view-month-name-cell-hover-color	Color for the month name on hover in the year view.
--b-year-view-week-cell-hover-background	Background color for week numbers on hover in the year view.
--b-year-view-week-cell-hover-color	Color for week numbers on hover in the year view.

YearView
Widget

Useful configs

See also

Configs

Parameters

Returns

Properties

Events

Event handlers

Type definitions

Properties

CSS variables

Source path

Inheritance tree5

Mixins11

Contents

YearView Widget

Useful configs

See also

Configs

Parameters

Returns

Properties

Events

Event handlers

Type definitions

Properties

CSS variables

Source path

Inheritance tree5

Mixins11

Contents

YearView
Widget