JavaScript Calendar

The latest release of ShieldUI widgets included the Calendar control. This was a component, requested by many of our customers, and it was not long before our data visualization team started working on it. We set out to build the component with three main goals in mind - performance, flexibility and consistent API. Below you can find an outline of the main characteristics of the component, and see how it meets the requirements of your project.

Customizable appearance

The JavaScript Calendar widget comes with a rich preset of 16 themes. These aim to cover the base color variations of schemes such as Dark, Light, Bootstrap, as well as different gradients.
While developing the component, our software engineers worked with the understanding the presets do not always meet customers needs. So, if the Calendar widget does not fit your visual requirements precisely, you can easily customize it.
The architecture allows you to do so with just a few css classes, which allow you to remodel the appearance of the component completely. One such setup is demonstrated in the following example.

Excellent Performance

As with any JavaScript Widget, you can enjoy very lightweight control footprint, and excellent responsiveness. Regardless of the look you have chosen, the component will remain responsive, and will not hurt the overall performance of your application. This is especially important when targeting mobile and slower-connection devices and because of this we focused on optimizing the Calendar architecture.


As with each ShieldUI component, the Calendar widget offers out-of-the-box localization mechanism. Regardless of the complexity of the localization logic in your web application, you can localize and update the widget with jest a few lines of JavaScript. All other logic, such as week start/end, localization strings, layout and navigation are handled automatically. You can see an example of the control's localization mechanism in action here.

Intuitive API

The JavaScript Calendar widget is built following our core architectural guidelines, and provides uniform API and initialization options. This ensures that you can reliably leverage your programming experience across products. Above all, this helps developers tackle any programming requirement and project guideline with a minimal amount of code. To see more information on how to get started with our JavaScript Calendar, please visit the following