Change the font color for specific dates
There is no typical way to implement it. Here is a little bit workaround:)
Hungus but effective.
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
//A year in YYYY format, a month from 0 to 11, a day from 1 to 31
String specificDates =
"[" +
"new Date(2010, 06, 15)" +
",new Date(2010, 06, 20)" +
",new Date(2010, 06, 25)" +
",new Date(2010, 07, 25)" +
",new Date(2010, 05, 25)" +
"]";
this.df.CustomConfig.Add(new ConfigItem("specificDates", specificDates, ParameterMode.Raw));
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.your-class-for-specific-dates
{
color: red;
font-family: Arial;
font-size: 120%;
font-style: oblique;
}
</style>
<ext:ResourcePlaceHolder runat="server">
</ext:ResourcePlaceHolder>
<script type="text/javascript">
Ext.form.DateField.override({
onTriggerClick: function() {
if (this.disabled) {
return;
}
if (this.menu == null) {
this.menu = new Ext.menu.DateMenu({
hideOnClick: false,
focusOnSelect: false
});
}
this.onFocus();
Ext.apply(this.menu.picker, {
minDate: this.minValue,
maxDate: this.maxValue,
disabledDatesRE: this.disabledDatesRE,
disabledDatesText: this.disabledDatesText,
disabledDays: this.disabledDays,
disabledDaysText: this.disabledDaysText,
format: this.format,
showToday: this.showToday,
minText: String.format(this.minText, this.formatDate(this.minValue)),
maxText: String.format(this.maxText, this.formatDate(this.maxValue)),
specificDates: this.specificDates //workaround
});
this.menu.picker.setValue(this.getValue() || new Date());
this.menu.show(this.el, "tl-bl?");
this.menuEvents('on');
}
});
Ext.DatePicker.override({
update: function(date, forceRefresh) {
if (this.rendered) {
var vd = this.activeDate, vis = this.isVisible();
this.activeDate = date;
if (!forceRefresh && vd && this.el) {
var t = date.getTime();
if (vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()) {
this.cells.removeClass('x-date-selected');
this.cells.each(function(c) {
if (c.dom.firstChild.dateValue == t) {
c.addClass('x-date-selected');
if (vis && !this.cancelFocus) {
Ext.fly(c.dom.firstChild).focus(50);
}
return false;
}
}, this);
return;
}
}
var days = date.getDaysInMonth(),
firstOfMonth = date.getFirstDateOfMonth(),
startingPos = firstOfMonth.getDay() - this.startDay;
if (startingPos < 0) {
startingPos += 7;
}
days += startingPos;
var pm = date.add('mo', -1),
prevStart = pm.getDaysInMonth() - startingPos,
cells = this.cells.elements,
textEls = this.textNodes,
// convert everything to numbers so it's fast
d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart, this.initHour)),
today = new Date().clearTime().getTime(),
sel = date.clearTime(true).getTime(),
min = this.minDate ? this.minDate.clearTime(true) : Number.NEGATIVE_INFINITY,
max = this.maxDate ? this.maxDate.clearTime(true) : Number.POSITIVE_INFINITY,
ddMatch = this.disabledDatesRE,
ddText = this.disabledDatesText,
ddays = this.disabledDays ? this.disabledDays.join('') : false,
ddaysText = this.disabledDaysText,
format = this.format;
if (this.showToday) {
var td = new Date().clearTime(),
disable = (td < min || td > max ||
(ddMatch && format && ddMatch.test(td.dateFormat(format))) ||
(ddays && ddays.indexOf(td.getDay()) != -1));
if (!this.disabled) {
this.todayBtn.setDisabled(disable);
this.todayKeyListener[disable ? 'disable' : 'enable']();
}
}
var setCellClass = function(cal, cell) {
cell.title = '';
var t = d.clearTime(true).getTime();
cell.firstChild.dateValue = t;
if (t == today) {
cell.className += ' x-date-today';
cell.title = cal.todayText;
}
if (t == sel) {
cell.className += ' x-date-selected';
if (vis) {
Ext.fly(cell.firstChild).focus(50);
}
}
// disabling
if (t < min) {
cell.className = ' x-date-disabled';
cell.title = cal.minText;
return;
}
if (t > max) {
cell.className = ' x-date-disabled';
cell.title = cal.maxText;
return;
}
if (ddays) {
if (ddays.indexOf(d.getDay()) != -1) {
cell.title = ddaysText;
cell.className = ' x-date-disabled';
}
}
if (ddMatch && format) {
var fvalue = d.dateFormat(format);
if (ddMatch.test(fvalue)) {
cell.title = ddText.replace('%0', fvalue);
cell.className = ' x-date-disabled';
}
}
};
var i = 0;
for (; i < startingPos; i++) {
textEls[i].innerHTML = (++prevStart);
d.setDate(d.getDate() + 1);
cells[i].className = 'x-date-prevday';
setCellClass(this, cells[i]);
}
for (; i < days; i++) {
var intDay = i - startingPos + 1;
textEls[i].innerHTML = (intDay);
d.setDate(d.getDate() + 1);
cells[i].className = 'x-date-active';
setCellClass(this, cells[i]);
}
var extraDays = 0;
for (; i < 42; i++) {
textEls[i].innerHTML = (++extraDays);
d.setDate(d.getDate() + 1);
cells[i].className = 'x-date-nextday';
setCellClass(this, cells[i]);
}
//Begin of workaround
if (Ext.isArray(this.specificDates)) {
var prevStart = pm.getDaysInMonth() - startingPos,
d = new Date(pm.getFullYear(), pm.getMonth(), prevStart),
textEls = this.textNodes;
for (i = 0; i < 42; i++) {
d.setDate(d.getDate() + 1);
textEls[i].className = "";
for (var j = 0; j < this.specificDates.length; j++) {
if (d.toDateString() == this.specificDates[j].toDateString()) {
textEls[i].className = "your-class-for-specific-dates";
}
}
}
}
//end of workaround
this.mbtn.setText(this.monthNames[date.getMonth()] + ' ' + date.getFullYear());
if (!this.internalRender) {
var main = this.el.dom.firstChild,
w = main.offsetWidth;
this.el.setWidth(w + this.el.getBorderWidth('lr'));
Ext.fly(main).setWidth(w);
this.internalRender = true;
// opera does not respect the auto grow header center column
// then, after it gets a width opera refuses to recalculate
// without a second pass
if (Ext.isOpera && !this.secondPass) {
main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth + main.rows[0].cells[2].offsetWidth)) + 'px';
this.secondPass = true;
this.update.defer(10, this, [date]);
}
}
}
}
});
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug">
</ext:ResourceManager>
<form id="Form1" runat="server">
<ext:DateField ID="df" runat="server" Width="180">
</ext:DateField>
</form>
</body>
</html>