[CLOSED] CalendarPanel: Some problem when I add the style to the calendarpanle.

**csssi_coolite** · May 31, 2011, 7:09 AM

Hi,

I want to change the event border style (Similar with outlook calendar) , so I add some css.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm12.aspx.cs" Inherits="WebApplication1.WebForm12" %>

<%@ 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></title>
    <style type="text/css">
        .ext-color-3, .ext-ie .ext-color-3-ad, .ext-opera .ext-color-3-ad
        {
            color: #660066;
        }
        .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
        {
            filter: progid:DXImageTransform.Microsoft.Gradient(style=1,enabled=true,GradientType=0,EndColorStr='#46b5ff',StartColorStr='#ffffff');
        }
        .ext-color-3-x .ext-cal-evb, .ext-color-3-x dl
        {
            border-color: #660066;
            border-left-width: 10px;
        }
        .my-calendar .ext-evt-bd
        {
            color: Black;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Viewport runat="server" Layout="FitLayout">
        <Items>
            <ext:CalendarPanel ID="CalendarPanel1" runat="server" ActiveIndex="1" Cls="my-calendar">
                <EventStore ID="EventStore1" runat="server">
                    <Events>
                        <ext:Event EventId="0" Title="Test Event" StartDate="2011/5/31 8:30" EndDate="2011/5/31 10:50"
                            CalendarId="3" />
                    </Events>
                </EventStore>
            </ext:CalendarPanel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>

When page load, it is normal.

Click image for larger version.

Name: P15.png
Views: 115
Size: 23.2 KB
ID: 2794

But when the mouse moved to this event, the style is lost.

Click image for larger version.

Name: P16.png
Views: 102
Size: 24.1 KB
ID: 2795

Could you help me how to avoid the border color and font color lost ? (I think they may chang back to "White")
PS: please reproduce in Microsoft IE.

**Daniil** · May 31, 2011, 8:49 AM

Hi,

Hmm, I can't reproduce. Styles are not lost on mouse over.

I'm testing under IE9 + Windows 7. And you?

**csssi_coolite** · May 31, 2011, 9:21 AM

Hi,Daniil,

Originally Posted by Daniil

Hmm, I can't reproduce. Styles are not lost on mouse over.
I'm testing under IE9 + Windows 7. And you?

I am testing under IE8 + Windows 2003
And IE 8 + Windows XP also has this issue.

**Daniil** · May 31, 2011, 10:07 AM

We have tested under IE8 + Windows 7 and Windows Vista and it appears to be working fine.

I believe it should work the same way under Windows 2003.

Please update from SVN and re-test.

**Daniil** · May 31, 2011, 10:27 AM

If updating won't help, please post the page's sources.

**csssi_coolite** · Jun 01, 2011, 12:32 AM

Originally Posted by Daniil

If updating won't help, please post the page's sources.

I downloaded the latest version from SVN, and the problem still existed in IE8+WinXP or IE8+Win2003.

The following is the page's source:

 
<!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>
	<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all-embedded-css/ext.axd?v=37391" />
 
	<link rel="stylesheet" type="text/css" href="/ux/extensions/calendar/resources/css/calendar-embedded-css/ext.axd?v=37391" />
<title>
 
</title>
    <style type="text/css">
        .ext-color-3, .ext-ie .ext-color-3-ad, .ext-opera .ext-color-3-ad
        {
            color: #660066;
        }
        .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
        {
            filter: progid:DXImageTransform.Microsoft.Gradient(style=1,enabled=true,GradientType=0,EndColorStr='#46b5ff',StartColorStr='#ffffff');
        }
        .ext-color-3-x .ext-cal-evb, .ext-color-3-x dl
        {
            border-color: #660066;
            border-left-width: 10px;
        }
        .my-calendar .ext-evt-bd
        {
            color: Black;
            font-weight: bolder;
        }
    </style>
 
	<script type="text/javascript" src="/extjs/adapter/ext/ext-base-js/ext.axd?v=37391"></script>
	<script type="text/javascript" src="/extjs/ext-all-js/ext.axd?v=37391"></script>
	<script type="text/javascript" src="/extnet/extnet-core-js/ext.axd?v=37391"></script>
	<script type="text/javascript" src="/extnet/locale/ext-lang-zh-CN-js/ext.axd?v=37391"></script>
	<script type="text/javascript" src="/ux/extensions/calendar/calendar-all-js/ext.axd?v=37391"></script>
	<script type="text/javascript" src="/extnet/extnet-data-js/ext.axd?v=37391"></script>
	<script type="text/javascript">
	//<![CDATA[
		Ext.net.ResourceMgr.init({id:"ResourceManager1",BLANK_IMAGE_URL:"/extjs/resources/images/default/s-gif/ext.axd",aspForm:"form1",theme:"blue"});Ext.onReady(function(){Ext.QuickTips.init();new Ext.net.Viewport({id:"ctl02",renderTo:"form1",items:{id:"CalendarPanel1",xtype:"calendarpanel",cls:"my-calendar",activeItem:1,eventStore:this.EventStore1=new Ext.ux.data.PagingStore({proxyId:"EventStore1",deferLoad:true,reader:new Ext.data.JsonReader({fields:[{name:"EventId",type:"int"},{name:"CalendarId",type:"int"},{name:"Title",type:"string"},{name:"StartDate",type:"date",dateFormat:"Y-m-dTh:i:s"},{name:"EndDate",type:"date",dateFormat:"Y-m-dTh:i:s"},{name:"Location",type:"string"},{name:"Notes",type:"string"},{name:"Url",type:"string"},{name:"IsAllDay",type:"boolean"},{name:"Reminder",type:"string"},{name:"IsNew",type:"boolean"},{name:"Guid"}],idProperty:"EventId"}),directEventConfig:{},proxy:new Ext.data.PagingMemoryProxy([{"EventId":0,"CalendarId":3,"Title":"Test Event","StartDate":"2011-05-31T08:30:00","EndDate":"2011-05-31T10:50:00","Location":null,"Notes":null,"Url":null,"IsAllDay":null,"Reminder":null,"IsNew":null}], false)}),editViewCfg:{renderFormElement : false}},layout:"fit"});});
	//]]>
	</script>
</head>
<body>
    <form name="form1" method="post" action="WebForm12.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzg4MTUzNDQxD2QWAgIDD2QWAgIDD2QWAmYPZBYEZg8UKhJTeXN0ZW0uV2ViLlVJLlBhaXIBDwUJdnNNZW1iZXJzFCsAAQ8FBlJlYWRlchQrBAEPBQRiYXNlFgIeCklEUHJvcGVydHkFB0V2ZW50SWRkAgEPFgIeBWNsYXNzBQh4LWhpZGRlbmQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgIFEFJlc291cmNlTWFuYWdlcjEFDkNhbGVuZGFyUGFuZWwxI39Hr2j7hEjJwv9oahnyGmW+kDY=" />
</div>
 
<script type="text/javascript"> 
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>
 
 
<div>
 
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLo6fnIAgLk1b+VAvYk/ZLx7vEUlCiI0UpNOAggoCMp" />
</div>
    
 
    </form>
</body>
</html>

**csssi_coolite** · Jun 01, 2011, 2:40 AM

PS: My web server is Windows 2003, IIS6.0

I just tested in my client Windows 7 + IE 8, problem still existed.
But Windows 7 + IE 9, no problem.

**Daniil** · Jun 01, 2011, 6:30 AM

I've reproduced the problem under IE8, investigating.

**Vladimir** · Jun 01, 2011, 10:58 AM

Hi,

It is IE<9 bug is related with filter css property
To resolve it I reccomend to remove gradient is implemented with filter css property

Here is test case demonstrates that issue is not related with calendar (just move mouse on left (wide) border of the div)

<%@ 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></title>
    <style type="text/css">
        .text-cls
        {
            filter: progid:DXImageTransform.Microsoft.Gradient(style=1,enabled=true,GradientType=0,EndColorStr='#46b5ff',StartColorStr='#ffffff');
            border: solid 1px #660066;
            border-left-width: 10px;
            color: Black;
            font-weight: bolder;
            width:150px;
            height:75px;
        }
        
        .text-cls-over{
            opacity: .8;
            filter: alpha(opacity=80);
        } 
    </style>
</head>
<body style="padding:30px;">
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server">
            <Listeners>
                <DocumentReady Handler="Ext.fly('outer').addClassOnOver('text-cls-over');" />
            </Listeners>
        </ext:ResourceManager>
        
        <div id="outer">
            <div id="div1" class="text-cls">
                It is a test case
            </div>
        </div>
    </form>
</body>
</html>

**csssi_coolite** · Jun 02, 2011, 7:35 AM

Hi, Vladimir
Thanks.
If so, I will give up using "filter css" before we upgrade IE9.

Thread: [CLOSED] CalendarPanel: Some problem when I add the style to the calendarpanle.

Thread Tools

Search Thread

Display

[CLOSED] CalendarPanel: Some problem when I add the style to the calendarpanle.

Similar Threads

[CLOSED] CalendarPanel - Problem while replicating example

[CLOSED] Calendarpanel problem, could not focus the event correct.

CalendarPanel load problem

Problem with CalendarPanel dragZone

[CLOSED] GridView style problem

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] CalendarPanel: Some problem when I add the style to the calendarpanle.

[CLOSED] CalendarPanel: Some problem when I add the style to the calendarpanle.

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us