[1.2] Change the color of a Day in calendar panel month view

  1. #1

    [1.2] Change the color of a Day in calendar panel month 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
    Attached Thumbnails Click image for larger version. 

Name:	Small Cal.jpg 
Views:	136 
Size:	12.7 KB 
ID:	3822  
  2. #2
    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?
  3. #3
    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 :)
    Attached Thumbnails Click image for larger version. 

Name:	Calendar.jpg 
Views:	155 
Size:	94.3 KB 
ID:	3826  
  4. #4
    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!
  5. #5
    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
  6. #6

    how to get responsive on calendar panel?

    Hi. Why the calendar panel does not work with responsive behavior? I took code of examples of responsive.

Similar Threads

  1. [CLOSED] Cropped Calendar month details panel
    By ppqrnd in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 05, 2012, 5:37 AM
  2. Replies: 4
    Last Post: Feb 09, 2012, 4:04 PM
  3. Replies: 1
    Last Post: Jul 07, 2011, 8:34 PM
  4. [CLOSED] calendar month view
    By farisqadadeh in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: May 02, 2011, 3:42 PM
  5. Calendar - Range Select and View Change
    By rbarr in forum 1.x Help
    Replies: 0
    Last Post: Feb 07, 2011, 10:54 AM

Posting Permissions