Recently, I have been given a task to make extjs datepicker allowing for selection of multiple dates. Unfortunately afters hours of searching for some build-in function, it turned out that this kind of functionality is not supported by default. Finaly, I decided to extend datepicker by creating component called highlightableDatePicker. I started from creating a class which inhierits from Ext.picker.Date. First draft of class looked this way

In this class I created additional function highlightDates which is responsible for highlighting dates. Moreover, I added some additional config elements:

• selectedDates – object keeping track of dates which should be selected
• clsHighlightClass – css class defining selected cell style

The most important part of HighlightableDatepicker class is function highlightDates which is responsible for highlighting dates. The body of this method looks like this

As You can see, this function simply compares date in cell with dates stored in selectedDates. If there is a match, cell style is modified by adding extra CSS class into class attribute of cell (see addCls function of Extjs), otherwise CSS class responsible for highlighting is removed. Having defind highlightDates function,I also had to attach an event handler to select event, in order to modify collection of selected dates. This handler looks this way

The final step to make this control work is to attach event handlers and call highlightDates function during initialization of component.

Please, notice that highlightDates is called after component is rendered, because there is no rendered cells before that moment. Entire code listing is presented below

and the result

Source code for this post can be found here