Flexcal

jQuery UI datepicker

View the Project on GitHub dwachss/flexcal

Advanced Formatting

The date formatting in flexcal lets you do simple formatting and parsing, with numbers only. Including jquery.flexcal.format.js allows much more sophisticated formatting, and formatting the calendar itself. It replaces $.bililite.flexcal.format and $.bililite.flexcal.parse, which are used by the flexcal plugin itself.

In the format string, any word in braces (/{(\w+)}/) is replaced by the localized version (with $.bililite.flexcal.localize), then any text in single quotes is frozen from further replacement. Use two single quotes ('') for an actual single quote.

Then the following date-specific replacements are made:

Note the order of the replacement, and how the quoting works. Using d = new Date (2015, 3, 27) // April 27, 2015 and loc = $.bililite.flexcal.toL10n() // default localization, we have $.bililite.flexcal.format(d, "'{today}'", loc) === 'Today' // localize the text in braces but don't replace the date formatting codes since it is in single quotes. But $.bililite.flexcal.format(d, "{today}", loc) // no single quotes is 'To27ay', since the 'd' is interpreted as a date number.

Examples

dateFormat: 'DDDD, d MM yyyy'

Using formatted years (a years function that shows Roman numerals).

dateFormat: 'd MM YYYY'

Varied languages

Customizing the calendar

jquery.flexcal.format.js also extends the presentation of the calendar itself to allow customizing the title, date numbers and next/prev buttons. Five more fields are added to the localization object:

captionText

Formatting string to use for formatting the caption (the month/year title bar) of the calendar. In order to use drop-down menus, the month has to be in a span with class=ui-datepicker-month and the year has to be in a span with class=ui-datepicker-year.

Default value

"'<span class=ui-datepicker-month>'MM'</span>' '<span class=ui-datepicker-year>'YYYY'</span>'"

Note the use of single quotes to prevent parsing the embedded HTML.

Example

captionText: 'mm/yyyy'

dateText

Formatting string to use for the dates (the individual cells of the table that makes up the calendar).

Default value

"dddd"

Example

dateText: "'<span style=transform:rotate(180deg)>'dd'</span>'". OK, that's silly.

dayOfWeekText

Formatting string to use for the days of the week (the header of the calendar columns).

Default value

"D"

Example

dayOfWeekText: "DDDD"

nextButtonText, prevButtonText

Formatting strings to use for the Next and Previous month buttons. The unextended flexcal just uses nextText and prevText, but this allows customizing (such as putting in the name of the month. See the example.

Default value

"'{next}'" and "'{prev}'"

Example

nextButtonText: "MM", prevButtonText: "MM". The CSS replaces the text with the icons, but uses that text for the title. Hover over the next/prev icons to see the month names.