v7.3.0

What's new in Calendar v6.0.0+

Calendar v6.0.0

New recurring event options

When creating a new recurring event, an augmented set of recurrence types are offered in the dropdown, contextualized for the current date of the event. For example if the event was on a Wednesday, the list will be augmented with options such as "Monthly on the first Wednesday".

The currently offered set of options is still available, the text for these now describes the offered recurrence pattern more fully.

eventCount property in all Calendar modes.

All Calendar modes now expose an eventCount property which yields the number of visible events which intersect the view's date range. This is a convenience property for creating view description.

Calendar v6.1.0

New MonthAgenda view type

A mobile-specific month view in which the top half of the Calendar is a CalendarDatePicker with event load shown as 'dots' or 'count'. The bottom half is a captive AgendaView which shows the events for the selected date.

New DayAgenda view type

This view shows a simple, serial view of events for a day, ordered by startDate ascending. The event block size is determined purely by the content and the available width. No sizing is applied.

New ScheduleTooltip feature

When enabled, the scheduleTooltip feature shows a tooltip containing the hovered time in DayViews (WeekView is a DayView fixed to a range of one week))

New EventBuffer feature

When enabled, the eventBuffer feature shows preamble and postamble times as a line with an optional label above and below events in DayViews (WeekView is a DayView fixed to a range of one week))

Calendar v6.1.0

New eventDots config in CalendarDatePicker, MonthAgendaView and YearView

The eventDots config may now be used to control exactly how the set of event dots below a date cell is layed out. It is an object which may contain the following options:

  • 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.

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.

See the Month Agenda example for usage.

Calendar v6.1.4

Introducing thin trial NPM packages

Starting with the 6.1.4 release, there are now trial versions of thin NPM packages available on our NPM server. These can be used to evaluate combining multiple products before purchasing a license.

Please check the combining multiple products guides for the trial packages list and installation tips:

Calendar v6.1.8

rtl config of Widget

The rtl config property of Widgets is now public. By default Widgets conform to the writing direction of the element they are rendered to. But with the now public rtl property, you can force a widget, and all descendant widgets to lay out from right to left.

Calendar v6.2.0

Accessibility

The Calendar is fully operable solely using the keyboard, and all focusable elements are labelled to tell assistive technologies contextual details. See the Calendar class's API docs for details.

tickRenderer property of DayView

The tickRenderer of DayView (WeekView and DayResourceView are DayViews) allows content to be placed in the hour/half hour etc. ticks of the DayView. Try it out in the new resource-time-capacity demo.

Calendar v6.3.0

New MonthGrid view type

A new year view which displays a grid of twelve month-event blocks. Each block, representing a month of the year, contains a list of events for that month ordered according to the eventSorter configuration

New Chart module

Bryntum products now ship with a new Chart module, which makes it easier to integrate Chart.js-based charts (see www.chartjs.org) with our products. The new module can be combined with all our products, by using the thin bundles / packages.

Try the new feature out in the new calendar-chart demo.

Using charts with your applications:

If you are using a vanilla JavaScript application, you need to import the chart thin bundle to enable support for using charts:

import 'PATH_TO_DISTRIBUTION_FOLDER/build/thin/chart.module.thin.js';

For framework-based applications, the Bryntum npm repository provides the @bryntum/chart-thin package, along with chart component wrapper packages for major frameworks:

Angular:

import '@bryntum/chart-thin'
import { BryntumChart } from '@bryntum/chart-angular-thin'

React:

import '@bryntum/chart-thin'
import { BryntumChart } from '@bryntum/chart-react-thin'

Vue 3:

import '@bryntum/chart-thin'
import { BryntumChart } from '@bryntum/chart-vue-3-thin'

Contents