Highlight Dates in Datepicker control

[jlawton]

I am looking for a way to apply a class to one or more dates in a datepicker on the screen. I have extended the Ext.picker.Date control into my own "myDatepicker" control, and have that appearing on the screen successfully, but from there I'm kind of at a loss. I want to be able to assign a custom parameter, like "myDates" and have those dates (assume all in the same month) get a class assigned to them.

I looked through the source code for Ext.picker.Date and looked at the "setDisabledDates" function, and honestly it wasn't clear how to modify this (in my own component of course) to use a different class.

If I add a function like "setMyDates" do I have to do something to get it to run when the "myDates" parameter is set at initiation? Like in "afterRender"?

Also how would I find and add a class to a specific date in the picker?

This is the main code that has the panel with the extended datepicker:

Ext.define('MyApp.view.ExtendTest', {
    extend: 'Ext.container.Container',
    requires: ['MyApp.view.myDatepicker'],
    items: [
        {
            xtype: 'panel',
            title: 'Extended Datepicker',
            items: [{
                xtype: "mydatepicker",
                value: new Date("10/1/2012"),
                myDates:   ["10/12/2012"]
            }]
        }
    ]
});

And this is the code I'm using that is extending the datepicker:

Ext.define('MyApp.view.myDatepicker', {
    extend: 'Ext.picker.Date',
    alias: 'widget.mydatepicker',

    // defaults
    myDates    : [],
    highlightCls : "",
    
    // functions
    initComponent: function() {
        var me = this;
        me.callParent(arguments);
    },

    afterRender: function() {
        // this will get called automatically
        var me = this;
    },

    setMyDates: function() {
        // this will not get called when the object is newly created
    }
});

[mitchellsimoens]

So first thing you are asking is you want a custom disabled CSS class?

[jlawton]

Basically yes. I wanted to be able to highlight different sets of days by using css classes.

I ended up stealing code from the selectedUpdate function, and I pass it the info during the afterComponentLayout function call.

highlightDates: function (highlightDates, highlightCls, highlightTooltip) {
		for(var i = 0; i < highlightDates.length; i++) {
			var t     = Ext.Date.parse(highlightDates[i], 'm/d/Y').getTime(),
			cells     = this.cells,
			cellItems = cells.elements,
			c,
			cLen      = cellItems.length,
			cell;


			for (c = 0; c < cLen; c++) {
				cell = Ext.fly(cellItems[c]);
				if (cell.dom.firstChild.dateValue == t) {
					cell.addCls(highlightCls);
					cell.dom.title = highlightTooltip + ": " + cell.dom.title;
					break;
				}
			}
		}
	}