Calendar

Brickrouge provides highly customizable and functional calendars, which are automatically accessible to screen reader and keyboard only users.

Calendars are localized using the MooTools Locale interface.

First, there's a month…

The Brickrouge.Calendar.Month class is used to handle and render months. Give it a TABLE or TBODY element and it will happily render the month of a given date.

The update event is fired when the date is updated, which only happens when the keyboard is used to browse dates. The change event is fired when the date is validated, either by clicking on a day cell or by pressing enter or space.

No event yet… Click any day, don't be afraid!
Javascript must be activated.
<table id="standalone-calendar-month" class="calendar" role="grid" aria-labelledby="month">
    <tbody class="calendar-month" tabindex="0">
        <tr><td>Javascript must be activated.</td></tr>
    </tbody>
</table>

Navigation shortcuts

The element can be controlled using the keyboard. The following combination are recognized:

Next dayright Next monthshift+right
page-down
m
Next yearalt+right
shift+page-down
y
Previous dayleft Previous monthshift+left
page-up
shift+m
Previous yearalt+left
shift+page-up
shift+y
Next weekdown Next 10 yearsalt+y Todayt
Previous weekup Previous 10 yearsalt+shift+y Select dateenter|space
Opens the date editor, which lets you enter the year, month and day using text inputs. Note: This shortcut is only available with the calendar element. e

… then a calendar

The Brickrouge.Calendar class is used to create calendars. A TABLE element is required to setup the calendar. The CAPTION element of the table contains the controls and the THEAD element contains the day names.

The data-decrement and data-increment attributes are used to decrement and increment the date. data-increment="month" increments the month and data-increment="year" increments the month. The data-increment-amount and data-decrement-amount attributes can be used to specify the amount of increment/decrement, which defaults to 1.

   
W Mo Tu We Th Fr Sa Su
Javascript must be activated.
<table id="calendar-edit-date" class="calendar" role="grid" aria-labelledby="month">
    <caption>
        <span class="date">
            <span class="browse prev" data-decrement="month">←</span>
            <span class="name" data-edit="date">
            <span class="month"><span class="name">&nbsp;</span></span>
            <span class="year"><span class="name">&nbsp;</span></span>
            </span>
            <span class="browse next" data-increment="month">→</span>
        </span>
    </caption>

    <thead>
        <tr class="calendar-weekdays">
            <th class="calendar-weekcount">W</th>
            <th class="calendar-weekday">Mo</th>
            <th class="calendar-weekday">Tu</th>
            <th class="calendar-weekday">We</th>
            <th class="calendar-weekday">Th</th>
            <th class="calendar-weekday">Fr</th>
            <th class="calendar-weekday">Sa</th>
            <th class="calendar-weekday">Su</th>
        </tr>
    </thead>

    <tbody class="calendar-month" tabindex="0">
        <tr><td colspan="8">Javascript must be activated.</td></tr>
    </tbody>
</table>
var calendar = new Brickrouge.Calendar('calendar-edit-date')

Markup is optional

The Brickrouge.Calendar.from() method is used to create calendars from options, without requiring an existing markup.

<div id="calendar-placeholder"></div>

<script>
var calendar = Brickrouge.Calendar.from({ noWeekNumber: true, noDayNames: true })

calendar.element.inject('calendar-placeholder')
</script>

Date layouts and editors

Date editors are used to enter dates manually, which can be quite handy when you need to enter the birthday of Paul Atreides (10175 AG).

The data-edit attribute is used to specify the editor to use. The following values are supported: date, year, month and day.

Calendars usually use the date editor, but the calendar here against is using two separate editors for its month and year.

Remember: The shortcut e always brings up the date editor.
   
W Mo Tu We Th Fr Sa Su
Javascript must be activated.
<caption>
    <span class="month">
        <span class="browse prev" data-decrement="month">←</span>
        <span class="name" data-edit="month">&nbsp;</span>
        <span class="browse next" data-increment="month">→</span>
    </span>

    <span class="year">
        <span class="browse prev" data-decrement="year">←</span>
        <span class="name" data-edit="year">&nbsp;</span>
        <span class="browse next" data-increment="year">→</span>
    </span>
</caption>

A calendar, in a popover

When the input element is focused the datepicker is opened and keyboard events are delegated to it so that you can navigate dates using keys and shortcuts.

Remember: The shortcut t sets the date to today. The shortcut esc closes the datepicker and the shortcut enter opens it again.
<input id="calendar-anchor" type="text" />

<script>
new Brickrouge.Datepicker({ anchor: 'calendar-anchor' })
</script>

Automatically attachable

Datepickers are automatically attached to elements matching the [data-editor="datepicker"] selector when they are first focused.

Remember: Because keyboard events are delegated to the calendar only when the datepicker is opened, you can use the esc key to close it and edit the date freely.
<input type="text" data-editor="datepicker" />
<input type="text" data-editor="datepicker" data-no-week-number="true" />
Fork me on GitHub