Right Calendar

Right Calendar is the standard calendar/datepicker feature for RightJS

Get the latest version right here

All the source code of the project is available under terms of the MIT license

http://github.com/rightjs/rightjs-ui/tree/master/src/calendar/

For some standard usage examples see the demo page

Index

top ↑Features List

Right Calendar has the following features:

  • Allows to pick dates and times
  • Supports multiple months in a grid
  • Supports date/time limits
  • Can be used as an inline widget
  • Can automatically initialize on input fields as a helper
  • Tiny (just 6k gzipped) file, no image or css dependencies
  • Everything is included in a single file
  • i18n support

top ↑Usage Basics

The usage of Right Calendar is really simple. Just grab the file above, include it on your page and you are good to go. Right Calendar does not require any images and all the styles are inlined inside the javascript file

<script src="/javascripts/right-calendar.js" type="text/javascript"></script>

After that you will have the Calendar unit available

new Calendar({format: 'US'}).insertTo('that-element');

new Calendar({showTime: true}).assignTo('that-input');

top ↑Inputs Auto-Initialization

Calendars can automatically initialize on input fields as popup helpers. For that simply use the standard HTML5 attribute data-calendar, like that:

<input type="text" data-calendar="" />

<input type="text" data-calendar="{format: 'US'}" />

You also can specify the external trigger element, like an icon.

<input type="text" id="my-input" />
<img src="calendar.png" data-calendar="{update: 'my-input'}" />

All the initialization happens on demand when the user starts to interact with the fields

top ↑Options List

There are several options you can pass into the Calendar constructor or use with the auto-initialization feature

NameDefaultDescription
format‘ISO’one of the predefined formats name or a format string
showTimenulla marker if the time picker should be displayed
showButtonsfalsea marker if the bottom buttons should be displayed
minDatenullthe minimum date you can select
maxDatenullthe maximum date you can select
fxName‘fade’the visual effect name, use null if you don’t want any fx
fxDuration‘short’the visual effects duration
firstDay11 for Monday, 0 for Sunday
numberOfMonths1a number of month to display, or a [x,y] grid size
timePeriod1the time picker min time quantity in minutes
twentyFourHournulla marker if the 24 or 12 hours time picker should be used
listYearsfalseshow the year switching buttons
hideOnPickfalsea marker if the popup should get hidden when user picks a date
updatenullan input field that should be updated when the user picks a date
triggernulla trigger element reference for calendar helpers
highlightnulla list of dates to highlight
cssRule’*[data-calendar]’the auto-initializable calendar elements css-rule

You also can alter the Calendar.Options object to make the changes global.

The showTime and twentyFourHour options have null value by default, which means that those options will be automatically determined depending on the specified time format option. You also might specify a boolean value to enforce those options.

top ↑Dates Formatting

Right Calendar uses the GNU strftime formatting system and there are the following placeholders available:

KeyDescription
%aThe abbreviated weekday name (‘Sun’)
%AThe full weekday name (‘Sunday’)
%bThe abbreviated month name (‘Jan’)
%BThe full month name (‘January’)
%dDay of the month (01..31)
%eDay of the month without leading zero (1..31)
%mMonth of the year (01..12)
%yYear without a century (00..99)
%YYear with century
%HHour of the day, 24-hour clock (00..23)
%kHour of the day, 24-hour clock without leading zero (0..23)
%IHour of the day, 12-hour clock (01..12)
%lHour of the day, 12-hour clock without leading zero (0..12)
%pMeridian indicator (‘AM’ or ‘PM’)
%PMeridian indicator (‘pm’ or ‘pm’)
%MMinute of the hour (00..59)
%SSecond of the minute (00..59)
%%Literal ’%’ character

There are also few predefined date formats are available:

NameFormatExample
ISO‘%Y-%m-%d’2009-08-18
POSIX‘%Y/%m/%d’2009/08/18
EUR‘%d-%m-%Y’18-08-2009
US‘%m/%d/%Y’08/18/2009

top ↑Events List

Right calendar supports the following list of events

NameDescription
showthe calendar element was shown
hidethe calendar element was hidden
changeuser selects a date or time
doneuser hits the ‘done’ button

You can use any standard Observer methods to process those events. Shortcuts like onChange, onDone are also available.

top ↑API Reference

Right Calendar has all the same API as Element plus the following methods:

MethodDescription
setDate(date)sets the date, the date might be a Date instance or a String
getDate()returns the current date
setValue(String date)sets the date by a string value
getValue()returns the date as a formatted string
format([String format])returns a string representation of the current date
assignTo(element[,trigger])assigns the calendar to auto appear at the element; if the trigger is specified a calendar will appear only by clicking on the trigger element

top ↑Style Alterations

If you need to alter the calendar view to make it fit your design, please use the following elements structure description as a guidance.

<div class="rui-calendar rui-panel">
<div class="swaps">
<div class="rui-button next-month">&lsaquo;</div>
<div class="rui-button prev-month">&rsaquo:</div>
</div>

<table class="grid">
<tr><td>

<table class="month">
<caption>January</caption>
<thead><tr>
<th>Mo<th>Tu<th>...
</tr></thead>
<tbody>
<tr>
<td class="blank">
<td class="selected">
<td class="disabled">
<td class="highlighted">
<td><td><td><td>...
.....
</tbody>
</table>

</td></tr>
</table>

<div class="timepicker">
<select></select> : <select></select>
</div>

<div class="buttons">
<div class="rui-button">Now</div>
<div class="rui-button">Done</div>
</div>
</div>