Announcing Bryntum Calendar 1.0

Today we are proud to announce the 1.0 version of the Bryntum Calendar – our new modern javascript calendar component. It is built without third party libraries using ES6+ and SASS. The calendar component can be used in any web applications and includes wrappers for React, Vue and Angular. Under the hood it also uses the same data model as the other Bryntum products such as the Scheduler and Gantt meaning you can easily share a single data set across multiple views. Let’s dive in and have a closer look!

Main features

The calendar has plenty of features out of the box letting you adapt it to suit your requirements and we also include examples showing the features in action.

If you are missing an important feature, please don’t hesitate to add a comment and let us know so we can improve the calendar.

Customizable rendering of events

The event rendering can be overridden to output any markup, as you can see in this demo. In week view mode of the demo, the rendering will show an icon if invitees are added and optionally an image.

Customized rendering

Below is the code defining the contents of a rendered event bar.

modes : {
    week : {
        // Render icon showing number of invitees (editable in the event editor)
        eventRenderer : ({ eventRecord, renderData }) => {
            if (eventRecord.invitees.length > 0) {
                renderData.iconCls['b-fa b-fa-user-friends'] = 1;
            }

            return ´
                ${eventRecord.name}
                ${eventRecord.image ? ${eventRecord.name} : ''}
            ´;
        }
    }
}

Configurable and collapsible sidebar

To navigate dates and to be able to find important events quickly, a good sidebar is needed. The default sidebar includes a date picker, a list of resources and a text field for filtering events. You can of course extend the sidebar to show any additional widgets such as a button for creating a new event.

Custom sidebar

The extra button is added by the following configuration:

sidebar : {
    // Extra UI Widgets can be easily added to the sidebar
    items : {
        addNew : {
            // Top position
            weight : 0,
            type   : 'button',
            text   : 'Create',
            icon   : 'b-fa b-fa-plus',
            onClick() {
                const
                    startDate = calendar.date = DateHelper.ceil(new Date(), '1 hour'),
                    newEvent  = calendar.eventStore.add({
                        name      : 'New event',
                        startDate : startDate,
                        endDate   : DateHelper.add(startDate, 1, 'hour')
                    })[0];

                calendar.editEvent(newEvent);
            }
        },

Recurring tasks

Calendar 1.0 comes with full support for recurring tasks. You can repeat events with any pattern using the recurrence dialog:

Recurrence dialogue

The recurrence pattern is using the RFC-5545 format and if an event had the above pattern applied, it would be serialized as:

{
    "id"             : 1,
    "startDate"      : "2020-01-01T10:00",
    "endDate"        : "2020-01-01T11:00",
    "name"           : "Scrum (twice / week) ",
    "recurrenceRule" : "FREQ=WEEKLY;BYDAY=TU,TH",
    "resourceId"     : "bryntum"
},

Live demo

It really doesn’t take much to provide your users a very powerful calendar experience:

The above example is achieved by the minimal code snippet below where we tell the calendar what date to show initially, and to which parent element it should append itself to (an empty div in this case).

import Calendar from './lib/Calendar/view/Calendar.js';

const calendar = new Calendar({
    date     : new Date(2020, 9, 11),
    appendTo : 'container',

    crudManager : {
        autoLoad : true,
        transport : {
            load : {
                url : 'data/data.json'
            }
        }
    }
});

More examples

Browser support

Bryntum Calendar is supported by all modern browsers. In the licensed version you get both readable documented source files and module / UMD bundles.

ChromeFirefoxSafariEdge

Ready to try it out?

To get acquainted with the calendar, we recommend starting by reading the documentation. You can also learn a lot by studying the code of the various included examples (please note that you can modify any example live using the code editor, expand it using the button at the top right corner).

If you are new to Bryntum, we also recommend learning the Store, CrudManager and Model classes.

You can download a free fully functional 45-day trial using the button below. We hope you will enjoy the calendar and we would be very grateful to hear your feedback if there you find there is any important features missing. Happy hacking!

Resources

Download Free Trial

Leave a Reply

avatar
  Subscribe  
Notify of