v7.3.0

What's new in Calendar v4.0.0+

Calendar v4.2.0

Shifting day start

Calendar has a new dayStartShift config for the day/week views that allow day columns to start their 24-hour period at a specified time other than midnight. Useful for example for shift work, when a work day spans midnight. With this config, the work shift can be visualized as a single day instead of two days. Check it out in the new shifted demo.

Extract from the demo above, showing how to configure day and week views:

const calendar = new Calendar({
    modes : {
        // The "midnight shift" (24-hours starts at 6PM instead of 12AM):
        day : {
            dayStartShift : 18
        },
        week : {
            dayStartShift : 18
        }
    }
});

NOTE: This differs from dayStartTime which only controls the first time to render.

Calendar v4.2.4

Improvements when using Scheduler as a Calendar mode

This release introduces two new configs on Scheduler specifically added for when using it as a mode in Calendar (as can be seen in the calendar-scheduler demo):

  • range - That lets you easily control how much time the time axis spans. It accepts a unit name such as month, week or day.
  • stepUnit - Also accepts a unit name, which is used to determine how large steps in time to take when clicking the previous and next buttons on the Calendar's toolbar.
const calendar = new Calendar({
    modes : {
        timeline : {
            type : 'scheduler',

            // Show one month at the time 
            range : 'month',

            // Step a single day when clicking previous / next
            stepUnit : 'day'
        }
    }
});

Calendar v4.3.0

Multi resource view

Calendar has a new mode, or new view type in 4.3.0. This is a view that shows multiple calendars side by side, one for each resource (calendar). A similar view to that available in Microsoft Outlook.

Check it out in the new resourceview demo.

new calendar {
    modes : {
        // By default, views will be seven day week views side by side
        resource : true
    }
}

or

new calendar {
    modes : {
        // Mode name can be anything if it contains a "type" property.
        monthResources : {
            type  : 'resource',
            title : 'Month resources',

            // This is a config object for the subviews
            view  : {
                type               : 'monthview',
                minWidth           : '20em',

                // Omit weekends to save horizontal space
                hideNonWorkingDays : true
            }
        }
    }
}

Calendar v4.3.6

coreHours config for DayView and WeekView

DayView and WeekView have a new config, coreHours which specifies the core working hours to show. Hours outside that range are represented by a translucent mask covering the time axis for those hours. If the overlayDay property is set in the config, the mask extends to overlay the day part of the view:

Sample config:

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

Contents