Perspective Calendar Component

We are happy to announce the release of the new version of our Perspective Calendar Component module. You can download the demo here.

This now implements the newest version of FullCalendar library which brings some additional properties and features listed below.

Calendar Height

The height property of the calendar has now been removed. The calendar should fill the entire size of the component now regardless of the type of container it is in. At smaller sizes depending on configuration the calendar may not display as expected.

The expandRows property has been added under dateAndTimeDisplay. When set to true, if the rows of a given view don’t take up the entire height, they will expand to fit.

Event Display

The default way events are displayed has changed and can be set by the eventDisplayType property under eventDisplay. This property can be overriden at the event level. The property can take the following values:

  • 'auto' (default) – When in daygrid, renders the event as a solid rectangle if it is all-day or multi-day. If a timed event, will render it with a dot. When in other views, will render normally.
  • 'block' – When in daygrid, renders the event as a solid rectangle. When in other views, will render normally.
  • 'list-item' – When in daygrid, renders the event with a dot. When in other views, will render normally.
  • 'background' – Will appear as a background highlight on the slots the event covers.
  • 'inverse-background' – Like 'background' , but fills the reverse space.
  • 'none' – Won’t render the event at all.
Popover

The property named eventLimit has been renamed to dayMaxEvents. This is the maximum number of events that will be displayed before the “+ more” link in a slot on a dayGrid view.

A new property called moreLinkClick has been added to govern what happens when the “+ more” link is clicked. It has the following options:

  • "popover" – (the default) Displays a rectangular panel over the cell with a full list of events for that day.
  • "week" - Goes to a week view, as determined by the views in the headerToolbar.
  • "day" Goes to a day view, as determined by the views in the headerToolbar.
  • “dayGridMonth”, “dayGridWeek”, “dayGridDay”, “timeGridWeek”, “timeGridDay”, “listMonth”, “listWeek”, “listDay” – Goes to the specified view selected.

The eventLimitText property has been renamed to moreLinkContent. This property can also accept html wrapped as an object like { html: '<i>some html</i>' }

View properties

Some of the properties in the viewProperties have been renamed. Some of these properties appear across multiple sections of the view properties.

  • columnHeader is now dayHeaders
  • columnHeaderFormat is now dayHeaderFormat
  • listDayAltFormat is now listDaySideFormat

The noEventsMessage for list views has been renamed to noEventsContent and can also accept html wrapped as an object like { html: '<i>some html</i>' }

The weekNumbersWithinDays property has been removed as this is now the default behaviour of the fullcalendar library.

RRule Property

The rrule property on events currently will not accept a string value. Any rrule property must be set as an object. The documentation on that object can be found here

External Event Box Component

The button colour and text colour of the create event button can now be controled from the properties for default and hover states.

The flex-box that holds the events has a number of its properties exposed as properties in the designer.

Screenshots

7 Likes

I have a quick question about the Calendar component... Is there a property I need to set to be able to select a start date(time) and end date(time)?

Here is what the Create Event popup looks like by default (very nice, just not what I need for this implementation):

I know I can always just create my own popup view, but I wanted to first make sure I'm not missing some functionality that's already there.