Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Calendar widget

The calendar widget is a plugin for Aria Templates.

When using the demo, simply hold down Ctrl + click to drag out a new event.


To use it, there is a set a scripts that are available after the usual npm install:

  • npm run-script lint : runs JShint, verifies lowercase and checks file indentation
  • npm run-script build : packages the plugin with atpackager putting the results in the build/output folder
  • npm run-script test : runs all unit tests in PhantomJS with attester
  • npm run-script start : starts attester and waits for real browsers to connect
  • npm run-script sample : starts a webserver to run the samples (at http://localhost:8080/ or http://localhost:8080/index.html?devMode=true )


The calendar widget displays time events from a data store. There are two views, which are column based, containing a backdrop for plotting the events against a day or a week. The calendar is a template based widget which can be loaded as a widget library by any template using the following syntax:

{Template {
    $classpath : 'app.SampleTemplate',
    $wlibs : {
        'sample' : 'atplugins.calendarwidget.CalendarWidgetLib',

To pass data into the calendar when it is first initialized, you will first need to create a module controller which extends the calendars module controller. Here is an example of what your module controller may contain:

 * Custom module controller, created by the user 
 * and passed into the Calendar widget 
 * through the module controller property.
    $classpath : "app.SampleModuleController",
    $extends : "atplugins.calendarwidget.controllers.CalendarController",
    $prototype : {
        init : function (data) {
           var event1 = new Date();
           this._data = data;
               events : [{
                   start : new Date(event1.setDate(event1.getDate() + 7)),
                   end : new Date(event1.setDate(event1.getDate() + 2)),
                   title : "3 day event",
                   all_day : true                        
           }, data);
           this.$CalendarController.init.apply(this, arguments);

And finally, from your template, an instance of the calendar can then be created with a data model injected into it (using your module controller reference):

    moduleCtrl : {
        classpath : "app.SampleModuleController",
        initArgs :

And that's it, feel free to look through the source code of app.SampleModuleController to understand more about how to interact with the calendar properties and events, you can also find more documentation in the Calendar Widget Plugin blog article.



A highly configurable widget to create a web-based calendar to display and manage events with several view modes (day, week)




No releases published

Contributors 4

You can’t perform that action at this time.