jQuery UI datepicker
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:
d: Date numberdd: Date number, padded to two digitsdddd: Date number, formatted (using the dates function)D: Day name, minimized ('S', 'M', etc.)DD: Day name, short ('Sun', 'Mon',etc.)DDDD: Day name, full, ('Sunday', 'Monday',etc.)m: Month number (1-indexed. Note that internally (as with Date) months are 0-based)mm: Month number, padded to two digitsM: Month name, short ('Jan', 'Feb', etc.)MM: Month name, full ('January', 'February', etc.)yy: Year number. There is no option for a two-digit year.yyyy: Year number, padded to four digits (which really shouldn't be relevant)YYYY: Year number, formatted (using the years function)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.
dateFormat: 'DDDD, d MM yyyy'
Using formatted years (a years function that shows Roman numerals).
dateFormat: 'd MM YYYY'
Varied languages
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:
captionTextFormatting 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.
"'<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.
captionText: 'mm/yyyy'
dateTextFormatting string to use for the dates (the individual cells of the table that makes up the calendar).
"dddd"
dateText: "'<span style=transform:rotate(180deg)>'dd'</span>'". OK, that's silly.
dayOfWeekTextFormatting string to use for the days of the week (the header of the calendar columns).
"D"
dayOfWeekText: "DDDD"
nextButtonText, prevButtonTextFormatting 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.
"'{next}'" and "'{prev}'"
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.