Hi,
It's easy to change the color of all cells.
.ext-cal-day {
background-color: red;
}
Though, I guess, it is not your requirement.
To change color of some specified cell you could apply the CSS like this:
#CalendarPanel1-month-day-20120220 {
background-color: Red;
}
Each cell is a td HTML element with an id like the one above.
You can apply CSS on the fly by registering it in ResourceMgr.
Example
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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 runat="server">
<title>Ext.NET Example</title>
<script type="text/javascript">
var applyCss = function () {
var css = "#CalendarPanel1-month-day-20120221 {background-color:red;}";
Ext.net.ResourceMgr.registerCssClass("someCssClassId", css);
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:CalendarPanel ID="CalendarPanel1" runat="server">
<EventStore runat="server" />
<BottomBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Apply CSS" StandOut="true">
<Listeners>
<Click Fn="applyCss" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:CalendarPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Also I would look into the Calendar templates to investigate a possibility to override to get your requirements.
Generally, could you describe a final purpose what are you developing? What are the requirements? Your calendar's view is similar in DatePicker. Did you look into a possibility to use DatePicker?