[CLOSED] CalendarPanel: CalendarModel customized: In FireFox donÂ´t appears border

**supera** · Apr 16, 2012, 7:40 PM

Hi

I'm setting the colors of CalendarModel as customized.
In Ie9, it´s works very fine... but in FireFox, don´t appears the board of Event slot.

IE 9

Click image for larger version.

Name: Calendarpanel 9 - ie.png
Views: 63
Size: 38.7 KB
ID: 4109

FireFox

In my style, I'm setting the border-color as follow:

     .ext-color-1-x .ext-cal-evb,
        .ext-color-1-x dl {
            border-color: Black;    
        }

Follow the complet style tag

<style type="text/css">    
        
        .ext-evt-bd {
            color: Black;
        }
        /*****************************/
        /*   COLOR 0 - NONE          */
        /*****************************/
        .ext-color-0,
        .ext-ie .ext-color-0-ad,
        .ext-opera .ext-color-0-ad {
            color: #FFFFFF;    
        }
        .ext-cal-day-col .ext-color-0,
        .ext-dd-drag-proxy .ext-color-0,
        .ext-color-0-ad,
        .ext-color-0-ad .ext-cal-evm, 
        .ext-color-0 .ext-cal-picker-icon,
        .ext-color-0-x dl,
        .ext-color-0-x .ext-cal-evb  {
            background: #FFFFFF;
            filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#FFFFFF', EndColorStr='#B0C4DE', GradientType=1); 
        }    
        
        .ext-color-0-x .ext-cal-evb,
        .ext-color-0-x dl {
            border-color: Black !important;    
        }
        
        /*****************************/
        /*   COLOR 1 - IMPORTANT     */
        /*****************************/
        .ext-color-1,
        .ext-ie .ext-color-1-ad,
        .ext-opera .ext-color-1-ad {
            color: #FF9484;    
        }
           
        .ext-cal-day-col .ext-color-1,
        .ext-dd-drag-proxy .ext-color-1,
        .ext-color-1-ad,
        .ext-color-1-ad .ext-cal-evm, 
        .ext-color-1 .ext-cal-picker-icon,
        .ext-color-1-x dl,
        .ext-color-1-x .ext-cal-evb  {
            background: #FF9484; 
            filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#FFFFFF', EndColorStr='#FF9484', GradientType=1);    
        }    
        
        .ext-color-1-x .ext-cal-evb,
        .ext-color-1-x dl {
            border-color: Black;    
        }
        
        /*****************************/
        /*   COLOR 2 - Business     */
        /*****************************/
        .ext-color-2,
        .ext-ie .ext-color-2-ad,
        .ext-opera .ext-color-2-ad {
            color: #849CE7;    
        }    
        .ext-cal-day-col .ext-color-2,
        .ext-dd-drag-proxy .ext-color-2,
        .ext-color-2-ad,
        .ext-color-2-ad .ext-cal-evm, 
        .ext-color-2 .ext-cal-picker-icon,
        .ext-color-2-x dl,
        .ext-color-2-x .ext-cal-evb  {
            background: #849CE7;
            filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#FFFFFF', EndColorStr='#849CE7', GradientType=1);
        }    
        
        .ext-color-2-x .ext-cal-evb,
        .ext-color-2-x dl {
            border-color: Black;    
        }
        
        /*****************************/
        /*   COLOR 3 - Personal     */
        /*****************************/
        .ext-color-3,
        .ext-ie .ext-color-3-ad,
        .ext-opera .ext-color-3-ad {
            color: #A5DE63;    
        }    
        .ext-cal-day-col .ext-color-3,
        .ext-dd-drag-proxy .ext-color-3,
        .ext-color-3-ad,
        .ext-color-3-ad .ext-cal-evm, 
        .ext-color-3 .ext-cal-picker-icon,
        .ext-color-3-x dl,
        .ext-color-3-x .ext-cal-evb  {
            background: #A5DE63;
            filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#FFFFFF', EndColorStr='#A5DE63', GradientType=1);   
        }    
        
        .ext-color-3-x .ext-cal-evb,
        .ext-color-3-x dl {
            border-color: Black;    
        }
        
        /*****************************/
        /*   COLOR 4 - Vacation      */
        /*****************************/
        .ext-color-4,
        .ext-ie .ext-color-4-ad,
        .ext-opera .ext-color-4-ad {
            color: #E7E7D6;    
        }    
        .ext-cal-day-col .ext-color-4,
        .ext-dd-drag-proxy .ext-color-4,
        .ext-color-4-ad,
        .ext-color-4-ad .ext-cal-evm, 
        .ext-color-4 .ext-cal-picker-icon,
        .ext-color-4-x dl,
        .ext-color-4-x .ext-cal-evb  {
            background: #E7E7D6;
            filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#FFFFFF', EndColorStr='#E7E7C7', GradientType=1);  
        }    
        
        .ext-color-4-x .ext-cal-evb,
        .ext-color-4-x dl {
            border-color: Black;    
        }
        
        /*****************************/
        /*   COLOR 5 - Must Attend   */
        /*****************************/
        .ext-color-5,
        .ext-ie .ext-color-5-ad,
        .ext-opera .ext-color-5-ad {
            color: #FFB573;    
        }    
        .ext-cal-day-col .ext-color-5,
        .ext-dd-drag-proxy .ext-color-5,
        .ext-color-5-ad,
        .ext-color-5-ad .ext-cal-evm, 
        .ext-color-5 .ext-cal-picker-icon,
        .ext-color-5-x dl,
        .ext-color-5-x .ext-cal-evb  {
            background: #FFB573;
            filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#FFFFFF', EndColorStr='#FFB573', GradientType=1);   
        }    
        
        .ext-color-5-x .ext-cal-evb,
        .ext-color-5-x dl {
            border-color: Black;    
        }
        
        /*****************************/
        /*   COLOR 6 - Travel Required   */
        /*****************************/
        .ext-color-6,
        .ext-ie .ext-color-6-ad,
        .ext-opera .ext-color-6-ad {
            color: #84EFF7;    
        }    
        .ext-cal-day-col .ext-color-6,
        .ext-dd-drag-proxy .ext-color-6,
        .ext-color-6-ad,
        .ext-color-6-ad .ext-cal-evm, 
        .ext-color-6 .ext-cal-picker-icon,
        .ext-color-6-x dl,
        .ext-color-6-x .ext-cal-evb  {
            background: #84EFF7;    
            filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#FFFFFF', EndColorStr='#84EFF7', GradientType=1); 
        }    
        
        .ext-color-6-x .ext-cal-evb,
        .ext-color-6-x dl {
            border-color: Black;    
        }
        
        /*****************************/
        /*   COLOR 7 - Needs Preparation   */
        /*****************************/
        .ext-color-7,
        .ext-ie .ext-color-7-ad,
        .ext-opera .ext-color-7-ad {
            color: #D6CE84;    
        }    
        .ext-cal-day-col .ext-color-7,
        .ext-dd-drag-proxy .ext-color-7,
        .ext-color-7-ad,
        .ext-color-7-ad .ext-cal-evm, 
        .ext-color-7 .ext-cal-picker-icon,
        .ext-color-7-x dl,
        .ext-color-7-x .ext-cal-evb  {
            background: #D6CE84;
            filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#FFFFFF', EndColorStr='#D6CE84', GradientType=1); 
        }    
        
        .ext-color-7-x .ext-cal-evb,
        .ext-color-7-x dl {
            border-color: Black;    
        }
        
        /*****************************/
        /*   COLOR 8 - BirthDay   */
        /*****************************/
        .ext-color-8,
        .ext-ie .ext-color-8-ad,
        .ext-opera .ext-color-8-ad {
            color: #C6A5F7;    
        }    
        .ext-cal-day-col .ext-color-8,
        .ext-dd-drag-proxy .ext-color-8,
        .ext-color-8-ad,
        .ext-color-8-ad .ext-cal-evm, 
        .ext-color-8 .ext-cal-picker-icon,
        .ext-color-8-x dl,
        .ext-color-8-x .ext-cal-evb  {
            background: #C6A5F7;
            filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#FFFFFF', EndColorStr='#C6A5F7', GradientType=1);   
        }    
        
        .ext-color-8-x .ext-cal-evb,
        .ext-color-8-x dl {
            border-color: Black;    
        }
        
        /*****************************/
        /*   COLOR 9 - Anniversary   */
        /*****************************/
        .ext-color-9,
        .ext-ie .ext-color-9-ad,
        .ext-opera .ext-color-9-ad {
            color: #A5CEC6;    
        }    
        .ext-cal-day-col .ext-color-9,
        .ext-dd-drag-proxy .ext-color-9,
        .ext-color-9-ad,
        .ext-color-9-ad .ext-cal-evm, 
        .ext-color-9 .ext-cal-picker-icon,
        .ext-color-9-x dl,
        .ext-color-9-x .ext-cal-evb  {
            background: #A5CEC6;
            filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#FFFFFF', EndColorStr='#A5CEC6', GradientType=1);       
        } 
        
        .ext-color-9-x .ext-cal-evb,
        .ext-color-9-x dl {
            border-color: Black;    
        }
        
        /*****************************/
        /*   COLOR 9 - Anniversary   */
        /*****************************/
        .ext-color-10,
        .ext-ie .ext-color-10-ad,
        .ext-opera .ext-color-10-ad {
            color: #FFE773;    
        }    
        .ext-cal-day-col .ext-color-10,
        .ext-dd-drag-proxy .ext-color-10,
        .ext-color-10-ad,
        .ext-color-10-ad .ext-cal-evm, 
        .ext-color-10 .ext-cal-picker-icon,
        .ext-color-10-x dl,
        .ext-color-10-x .ext-cal-evb  {
            background: #FFE773;
            filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#FFFFFF', EndColorStr='#FFE773', GradientType=1);   
        }
        
        .ext-color-10-x .ext-cal-evb,
        .ext-color-10-x dl {
            border-color: Black;    
        }
        
        .panelAgenda .x-panel-header {
            font-size    : 13px;
            text-align   : center !important;
            padding-left : 10px;
            font-family  : helvetica, arial, sans-serif;
            color        : #455C6F !important;
            background   : #D0DEF0 !important;
        }

        
    </style>

**Daniil** · Apr 16, 2012, 11:19 PM

Hi,

I was able to achieve it using the followin CSS.

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 v2 Example</title>

    <style type="text/css">   
        .ext-color-3-x .ext-cal-evb, 
        .ext-color-3-ad .ext-cal-evm, 
        .ext-color-3-ad, 
        .ext-color-3-x dl {
            border-color: black !important;
        }
        
        .x-gecko .ext-cal-evr {
            border: 1px solid;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" Namespace="CompanyX" />
        <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:CalendarPanel runat="server">
                    <EventStore runat="server">
                        <Events>
                            <ext:EventModel
                                Title="My event" 
                                StartDate="2012/4/18" 
                                EndDate="2012/4/19" 
                                CalendarId="3" />
                        </Events>
                    </EventStore>
                </ext:CalendarPanel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>

**supera** · Apr 17, 2012, 12:00 PM

Works fine...

thanks a lot, Daniil.

Thread: [CLOSED] CalendarPanel: CalendarModel customized: In FireFox donÂ´t appears border

Thread Tools

Search Thread

Display

[CLOSED] CalendarPanel: CalendarModel customized: In FireFox don´t appears border

Similar Threads

[CLOSED] Customized Window Alignment in Firefox

[CLOSED] GroupTabPanel sample in Examples Explorer appears donÂ´t work

[CLOSED] The example \Dataview\Advanced\Multisort appears donÂ´t work

[CLOSED] LabelAlign in checkbox appears donÂ´t take effect.

[CLOSED] CalendarPanel: Some question about my customized the <DirectEvents>

Posting Permissions

Sitemap

Downloads

Resources