DayView

Widget

An object or an array of button specifications which add clickable icon buttons to the rendered event blocks which contain the following properties.

For example, the calendar may be configured like this:

modes : {
    day : {
        actionButtons : {
            delete : {
                tooltip : 'Delete event',
                cls     : 'b-icon-trash',
                handler : 'up.onDeleteAction'
            }
        }
    }
},

onDeleteAction({ eventRecord }) {
    this.removeEvents([eventRecord]);
}

A CalendarRow widget containing the horizontal series of calendar cells with the day headers and any all-day, or day-spanning events which fall inside this view's time range.

Note that this component calculates its height depending on its eventHeight, defaultEventRowCount and autoHeight settings, therefore any configured height and flex values will be ignored.

    modes : {
        day : {
            // Do not show the whole week in the header for the one day view
            allDayEvents : {
                fullWeek : false
            }
        }
    }

Has a corresponding runtime allDayEvents property.

By default, when mousewheel zooming out from overflowing the client height, it is not permitted to zoom further out so that the hours underflow the client height.

When zooming out, the view normally stops when the hours exactly fit the client height.

Configure this as true to allow mousewheel zooming out to cause the hours to underflow the client height.

Has a corresponding runtime allowZoomUnderflow property.

A function, or name of a function which is passed the DayCellWithEvents object which describes the events and details of the day.

This function must return either an HTML string, or a DomConfig object to create a column header for the passed date.

columnHeaderRenderer({ events }) {
    return `${events.length ? events.length : 'No'} Events`;
}

Configure this property as true to show the day name and date headers in a more compact style.

When this is set, the day name and date are displayed side by side instead of on separate lines and with a smaller font size.

This applies the b-compact-header CSS class to this widget which may be styled as required.

Has a corresponding runtime compactHeader property.

An object containing two properties, start and end representing the start and end of core working hours.

This causes the non core hours to be covered by a themeable translucent grey mask in the time axis.

This may be configured to also mask the non core hours in the day part of the view by setting the overlayDay property.

{
    coreHours : {
        start      : 9,
        end        : 17,
        overlayDay : true
    }
}

If this is configured as an array of less than seven elements, it is taken to be describing multiple core hours blocks within one day, so it could be

{
    coreHours : [{
        start      : 8,
        end        : 12,
    }, {
        start      : 14,
        end        : 18
    }
}

This may also be a seven element array so as to have different core hours for each JavaScript day of the week (Meaning 0 for Sunday to 6 for Saturday). This causes only the hours in the day columns to be masked:

{
    coreHours : [{
        start : 10,
        end   : 15
    },{
        start : 9,
        end   : 17
    },{
        start : 9,
        end   : 17
    },{
        start : 9,
        end   : 17
    },{
        start : 9,
        end   : 17
    },{
        start : 9,
        end   : 17
    },{
        start : 10,
        end   : 15
    }]
}

This may also be a function to return calculated core hours for every date. This causes only the hours in the day columns to be masked:

{
    coreHours : function(date) {
        // Shorter core hours at weekends
        if (date.getDay() === 0 || date.getDay() === 6) {
            return {
                start : '10:00',
                end   : '15:00'
            };
        }
        // Pre-lunch and post-lunch working blocks in the week
        return [{
            start : '08:00',
            end   : '12:00'
        }, {
            start : '14:00',
            end   : '18:00'
        };
    }
}

This may also be a seven element array which contains separate core hours specification for each day of the week as returned from the Date class.

This may also be a function, which, when passed a Date, returns a core hours specification for that date.

In the simplest case an object containing two properties, start and end:

• coreHours.start - The start hour or start time string HH:MM of the core working hours. Date or String value allowed.
• coreHours.end - The end hour or start time string HH:MM of the core working hours. Date or String value allowed
• coreHours.overlayDay - Set to true to have the greyed zone cover the day part of the view.

Only valid when this config is specified as a simple Object.

Has a corresponding runtime coreHours property.

A function, or name of a function which produces a DomConfig block to create the current time indicator which is displayed in a day column which represents the current date. It is the developer's responsibility to add CSS classes and the appropriate CSS rules to produce the desire appearance.

currentTimeIndicatorRenderer : function() {
    return {
        className : 'my-current-time',
        text      : 'NOW'
    };
}

The result is used to sync the DOM of the day column.

By default, half hour, fifteen minute tick lines are rendered in a lower contrast colour than hour lines.

Configure this as true to instead render the minor tick lines as dashed lines at the same contrast level as the hour lines.

Has a corresponding runtime dashedSubticks property.

A callback function, or the name of a function in the ownership hierarchy which an application may provide to filter out day columns for individual dates.

Has a corresponding runtime dateFilter property.

A function, or name of a function which is passed the DomConfig object which will be used to sync with a day column.

dayCellRenderer : function(domConfig, cellData) {
    if (this.isSpecialDate(cellData.date)) {
        domConfig.className['fa'] =
        domConfig.className['fa-birthday-cake'] = 1;
    }
    return domConfig;
}

The result is used to sync the DOM of the day column.

Either the end hour of the day, or a 24 hour HH:MM string denoting the end date of the last rendered time block. You can also set this value to a ms timestamp representing time from midnight.

This config, along with dayStartTime determines which hours are displayed in a day column.

Note that this is only granular to the hour level. The value will be rounded up to the ending hour of the configured time.

Has a corresponding runtime dayEndTime property.

A function, or name of a function which is passed the DomConfig object which will be used to sync with a day cell header in the all day row.

dayHeaderRenderer : function(headerDomConfig, cellData) {
    if (this.isSpecialDate(cellData.date)) {
        headerDomConfig.className['b-is-special-date'] = 1;

        // Add to the content element's children
        headerDomConfig.children.push({
            text : 'Special day',
            className : 'b-special-day
        });
    }
}

The result is used to sync the DOM of the day column in the all day row.

The DateHelper format string/function for day names in the header row (e.g., "ddd" for "Mon", "Tue", ...)

Either the start hour of the day, or a 24 hour HH:MM string denoting the start time for days. This is midnight by default.

Setting this value to 12, for example, indicates that the 24 hour "day" runs from noon on one day, to noon on the following day. This causes events in this span of time to layout in the same day column. In this example, a two hour event that spanned midnight would be rendered in the same way a normal, 2 hour event spanning noon would be rendered without this option.

When this config is non-zero, the headings that display the day name and number are adjusted to indicate the range of days for the column. For example, the "Wed" column for the 12th of the month will now show "Wed-Thu" for the day name and "12-13" for the day number.

Either the start hour of the day, or a 24 hour HH:MM string denoting the start of the first rendered daily time block. You can also set this value to a ms timestamp representing time from midnight.

This config, along with dayEndTime determines which hours are displayed in a day column.

Note that this is only granular to the hour level. The value will be rounded down to the starting hour of the configured time.

Has a corresponding runtime dayStartTime property.

Configuration to manage event layout class. See FluidDayLayout class docs to see all possible configurations.

Defaults to { type : 'fluid' }.

When set to true, the hours in the day will be sized so that they fit in the available height.

In the Object form, the value may contain minHeight as the minimum hour height to which the hour cells may shrink:

fitHours : {
    minHeight : 31
}

Note that if the all day events row at the top changes size, the space available for the hours will change too, and the hour cell height will change.

Has a corresponding runtime fitHours property.

By default, reconfiguring the startDate maintains the current duration of the view and moves the endDate.

But for flexibility, reconfiguring the endDate changes the duration.

Setting fixedDuration to true locks this down to changing either end just moves the view.

This flag also signals that when using multiSelect in the date picker, the selected range does not get applied to this view.

Has a corresponding runtime fixedDuration property.

The height in pixels of one hour cell in a day column.

Hour cells are bounded by lines, and there are fainter subtick lines between hour lines. These subtick change as zooming passes the hourHeightBreakpoints.

Has a corresponding runtime hourHeight property.

An array which encapsulates a set of hourHeight breakpoints which dictate when subticks - intervening time indicators - are introduced into the DayView's time axis.

Entries are in ascending granularity order, so the values must ascend.

Subtick visibility is updated dynamically during zooming.

When an hourHeight change causes a change of sub tick granularity, a tickChange event is fired.

Has a corresponding runtime hourHeightBreakpoints property.

A millisecond value to which to snap pointer times when clicking or dragging within a day column and when calculating the hovered time for the ScheduleTooltip tooltip.

May be specified in string form eg: '15 minutes'

By default, the pointer position is rounded to the nearest increment, but this can be configured using the timeSnapType option.

Has a corresponding runtime increment property.

By default, drag-moving an event allows the drag gesture to move the event into other day columns.

To limit drag-moving an event to only operating within the same day column, set this to false.

Note that this setting is only valid for multi-day DayView instances. For other view types, all drag gestures are inter day, so use allowDragMove for other views.

Has a corresponding runtime interDayDrag property.

By default, drag-resizing an event (including creating a new event) allows the drag gesture to span multiple day columns to make the event an inter day event.

To limit drag-resizing an event to only operating within the same day column, set this to false.

Note that this setting is only valid for multi-day DayView instances. For other view types, all drag gestures are inter day, so use allowDragResize and allowDragCreate for other views.

Has a corresponding runtime interDayResize property.

The maximum height the all day event row is allowed to grow within this view when it is expanded to show all its "all day" events.

This defaults to 50%, but can also be set to any CSS size value. A numeric value will be taken as pixels.

The minimum width of a day column.

If this is set, and the day columns overflow the horizontal space available, the columns will be scrollable horizontally in the normal way.

There is a horizontalScroller property which handles scrolling in this dimension.

Has a corresponding runtime minDayWidth property.

A config object used to create the OverflowPopup that the allDayEvents may show when events for one day overflow the available space.

For example

    modes : {
        week : {
            overflowPopup : {
                closable   : false,
                dateFormat : 'dddd, MMM M',
                eventRenderer({ eventRecord, renderData }) {
                    if (calendarUtils.isImportantEvent(eventRecord)) {
                        // Add CSS class to important events
                        renderData.cls['b-important'] = 1;
                    }
                }
            }
        }
    }

Has a corresponding runtime overflowPopup property.

By default today's date shows a current time line to indicate the current time. This line is confined to the day cell for today.

Configure this property as false to disable this.

This also may have more granular options when specified as an Object:

Has a corresponding runtime showCurrentTime property.

Configure as false to hide the start time normally shown at the top of the events.

Configuring as true (The default) means only show the start time.

Both start and end time may be selected separately:

{
    startTime : true,
    endTime   : true
}

Or start time and duration resulting in the duration being shown in the form (HH:mm) after the start time:

{
   startTime : true,
   duration  : true
}

The duration option may also be a function or the name of a function in the ownership hierarchy which is passed the event's duration in milliseconds, and must return a string to display.

Has a corresponding runtime showTime property.

By default, the most granular time tick level in the DayView's time axis is five minutes.

Set this property to true to have the hour split into six minute ticks.

Has a corresponding runtime sixMinuteTicks property.

Affects drag drop and moving of events with regard to the increment

If set to true, startDate will be snapped relative to event's original start. e.g. if the increment is 15 minutes, an event that starts at 10:03 and is dragged forwards would snap its start date to 10:18, 10:33 etc.

When set to false (the default), startDate will be snapped relative to the day start, eg

• 10:03 -> 10:15, 10:20 etc.

Has a corresponding runtime snapRelativeToEventStartDate property.

A function, or name of a function which yields a DomConfig object to use as a tick background element for the tick context passed.

tickRenderer({ startTime, tickIndex, subtickIndex, resourceRecord }) {
    // Skip subticks in the 13:00 hour
    if (!(startTime.getHours() === 13 && startTime.getMinutes())) {
        const result = {
            className : {
                'afternoon-shift' : startTime.getHours() >= 12
            },
            text : DateHelper.format(startTime, 'hh:mm a');
        };
        // And make the 13:00 cell span the whole hour
        if (startTime.getHours() === 13 && !startTime.getMinutes()) {
            result.rowspan = subTickCount;
        }
        return result;
    }
}

With some application styling:

.b-day-view-subtick {
    padding   : 0.5em;
    font-size : 0.7em;
    color     : #999;
}

.b-day-view-subtick:hover {
   background-color : rgba(0, 0, 0, 0.1);
   cursor           : pointer;
}

This is called for every visible subtick. So if the view is not tall, and only hour cells are visible, this will be called for every hour.

If half hour ticks are visible too, this will be called for every half hour, if fifteen minutes ticks are visible this will be called for every fifteen minutes etc.

By default, these ticks are sized and positioned to exactly fit the subtick cell. You may use inline style in the DomConfig return value, or a className property in the DomConfig return value to style the ticks.

Returning null will cause no tick to be rendered for that time.

The rendered element will have the class b-day-view-subtick added to it.

If the rendered element is the last subtick in an hour, the class b-last-in-hour will be added.

The rendered element's dataset will have the following properties:

• hour - The date of the tick.
• minute - The minute of the tick.
• index - The index of the subtick within the hour.

A DateHelper format string/function used to format the time displayed in the time axis at the left side of the view.

The type of rounding to apply when calculating a date from a pointer position in a day column.

This defaults to 'round', but may also be 'floor' or 'ceil'. A pointer position will be snapped to the appropriate increment.

Configure this as null to disable snapping so that drag and drop operations and tooltips show exact times.

Has a corresponding runtime timeSnapType property.

Either the start hour of the day, or a 24 hour HH:MM string denoting the initially visible start time of the day. Defaults to 7am.

Configure this as null to not have the view scroll to an initial position.

This may also be configured as an object to control how the view scrolls to the target time, with the target time specified as the time option. For example:

{
    visibleStartTime : {
        time       : '7:30',
        block      : 'closest',
        edgeOffset : 10,
        animate    : true
    }
}

The default is to scroll the time to block : 'start' with no animation.

You can zoom in and out on the time axis using CTRL-key + mouse wheel on mouse-based devices or pinch-zoom on touch devices. See also the hourHeightBreakpoints config option.

You cannot zoom so far out that the day height falls below the available height.

The rate at which zoom proceeeds can be changed by configuring this value as a number which will be used as a multiplier.

Note that zooming necessarily sets fitHours to false.

Configure this as false to disable this behaviour.