Printable View
Hi, is there a way to change a color of a cell in monthview? any cell?. I am using the calendar panel in a very small size (w: 190 and H: 180) and when I put an event it doesn't show in a good way?. I am attaching an image to show you an example of what I am trying to achieve.
Regards
Hi,
It's easy to change the color of all cells.
Though, I guess, it is not your requirement.Code:.ext-cal-day {
background-color: red;
}
To change color of some specified cell you could apply the CSS like this:
Each cell is a td HTML element with an id like the one above.Code:#CalendarPanel1-month-day-20120220 {
background-color: Red;
}
You can apply CSS on the fly by registering it in ResourceMgr.
Example
Also I would look into the Calendar templates to investigate a possibility to override to get your requirements.Code:<%@ 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>
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?
Hi Daniil,
I guess your suggestions to use CSS on the fly could help me, I wiil try it and give you the feedback.
Regarding of what in the world am I doing (hehe), take a look at the attached picture. What I am trying to do here is to create a form with all the months in a calendar displayed so our user can choose a month by clicking on it and then select a day and that day will be displayed as if there were an event in it.
I know I could have used the date picker for instance, but I started with calendar panel because I needed, or at least I thought I could use, the functionality of the events to display the day as selected by creating an event on it. Unfortunately I soon found out that using the panel in a small size like that, will not have the space to show the event in a properly manner.
So now I am trying to find out a workaround to show the day with some other color on the fly (the data for the dates are in a database) as you suggest so that I don't have to throw all the code I have written to the garbage can hehe
Thanks for all your positive responses, I love Ext.Net and having such a great support from you has made me love it even more :)
Thanks for the kind feedback on our support!
And thanks for the details, the are interesting.
Honestly, I can't say for sure it's rather possible or rather not, but, hopefully, you will be able to achieve the requirement using Calendar!
Thanks Daniil, I guess what worries me more is that I have to combine the using of javascript to change the CSS and server code to get the data from the database... oouch!, that's not something easy or at least something I know how to do. Let me surf the forum to see if I find something useful and I will post it back so you will know how it was.
Regards my friend
Hi. Why the calendar panel does not work with responsive behavior? I took code of examples of responsive.