Pavel
4 October 2017

Bryntum Calendar 1.0 is available

We are excited to announce the release of Calendar 1.0. Since the first 0.9 version was released, we have added […]

We are excited to announce the release of Calendar 1.0. Since the first 0.9 version was released, we have added lots of functionality to create a flexible calendar suite which you can easily add to your web application. Let’s walk through the main changes in the 1.0 release.

New agenda and year views

Calendar now comes as a pre-configured Container with 5 different view modes: day, week, month, year and agenda. The month view is active by default and you can navigate through views by using the navigation bar at the top. In the navigation bar you also see a title showing the current date range.

Month view

The agenda view is new, and shows you all your tasks in a flat list grouped by date. To activate this mode, you can use the toolbar button or by setting the agenda programmatically:

var calendar = new Cal.panel.Calendar(...);

calendar.setMode('agenda');

Screen Shot 2017-12-11 at 13.12.50

In this release, we also added the new year view which shows you a heatmap style calendar for each month of the year. Activate it programmatically by setting the year mode on your calendar.

var calendar = new Cal.panel.Calendar(...);

calendar.setMode('year');

Screen Shot 2017-12-11 at 13.52.15

Minimal configuration

To create a Calendar it’s enough to specify a few different configuration properties. Set a height/width and provide the stores for your events and resources.

var myCalendar = new Cal.panel.Calendar({
    renderTo : document.body,
    height   : 500,
    width    : 800,
    mode     : 'day',
    date     : new Date(2017, 9, 14),
    eventStore    : {
        type : 'calendar_eventstore',
        data : [
            // events go here
            {
                Id         : 1,
                StartDate  : "2017-10-14T08:00:00",
                EndDate    : "2017-10-21T21:00:00",
                Name       : "Hackathon 2017 in Split, Croatia",
                ResourceId : "bryntum"
            }
        ]
    },
    resourceStore : {
        type : 'calendar_resourcestore',
        data : [
            // resources go here
            {
                Id    : 'bryntum',
                Name  : 'Bryntum team',
                Color : '#249fbc'
            }
        ]
    }
});

Configuring the available modes

With the new configuration options in 1.0, you can easily control which Calendar modes will be available. If you want to switch off a mode, it’s enough to set it to false using the modes config:

{
    xtype         : 'calendar_panel',
    eventStore    : {...},
    resourceStore : {...},
    mode          : 'agenda', // Agenda view will be activated after render (month by default)
    modes         : {
        agenda : true,  // Can be omitted since true by default
        year   : false, // Year view is off
        week   : false, // Week view is off
        day    : false, // Day view is off
        month : {
        	// Mode specific configuration goes here
                .....
        }
    },
}

SASS based theming

All styles are SASS-based which gives you the option to use all its variables for easy theming. The main color variables are placed together and color variables of subcomponents extend those. You can find out which variables to use by looking in the SCSS docs:

Screen Shot 2017-12-11 at 17.27.25

Summing up

With the addition of Calendar 1.0 to our component suite, we now offer a very powerful scheduling UI for working with your tasks. Try the examples below and see the many different views to visualize your data:

Feature wise, we’re not done yet. Plenty of features are already planned for 2018, so keep in touch and please let us know which features matter the most to you and your business!

Additional Resources

Pavel

Bryntum Calendar Calendar