Format month name of <rich:calendar> as MMM instead of MMMM

Question

How can I change the <rich:calender> displayed month from "April" to 3 characters "Apr"?

Answer 1

That is not supported, if you want to change it you'll need to overwrite the JavaScript method that creates the element, something like this:

var calendar = #{rich:component('calendar')};
var fn = calendar.calendarContext.currentMonthControl;

calendar.calendarContext.currentMonthControl = function(context) {
    var newDate = RichFaces.calendarUtils.formatDate(context.calendar.getCurrentDate(), "MMM, yyyy", context.monthLabels, context.monthLabelsShort);
    var markup = fn(context);
    markup.childs[0].value = newDate;
    return markup;
}

Of course, you'll have to make sure that when the calendar is rerendered this code is rerendered as well.

---

Most of the calendar code is created on the client side. (Note: this is internal stuff, you're not expected to know how this works).

calendar.calendarContext.currentMonthControl is responsible for creating the label, it returns this object:

{
    "tag":"div",
    "attrs":{
        /* event listeners, unimportant */
    },
    "childs":
        [{"value":"April, 2016"}]
}

What you do is replace the original method with a new that modifies this object. RichFaces.calendarUtils.formatDate is called in the original function with the pattern "MMMM, yyyy" so we call it with a different pattern, then call the original function, replace the text, and return the modified object.