Background color removes the rounded corners from the events

Hi,

The events shown on the calendar are normally rounded corners but I have suddenly realised that when I color the events, the background-color fills up the 1pixel gap on the edges of the events. This causes the events to loose the rounded corner effect. Firefox and Chrome overcomes this problem using border-radius, -webkit-border-radius, -o-border-radius and -moz-border-radius CSS styling. However, Internet Explorer still does not rounds the corner with these settings. I have also used behavior property with border-radius.htc file for IE but it still does not remove that pixel or round the radius. I am using IE9 at present. Is there anyway I can get rounded corners in event using IE? I also want tool-tips to be with rounded corners, is it possible as well?

Regards,
Jai




Hello,

Do you use -ms-border-radius as well?
-ms- is the prefix for IE.

Best regards,
Ilya

the background-color fills up the 1pixel gap on the edges of the events.

This must be result of some other css modification. You can check samples\02_customization\01_events_coloring.html where background color set as well, and it doesn’t break “round” corners

@Ilya : -ms-border-radius does not work.

@Stanislav : The following lines had to be commented out for it to show rounded corners -
//var rule5 = “.dhx_cal_event_line.color_”+ev.nodecolor;
//var rule_text5 = “background-color:rgb(”+r+","+g+","+b+") !important; color:cream !important;";
//document.styleSheets[0].addRule(rule5, rule_text5);
//document.styleSheets[0].addRule(rule5, rule_text1);
//document.styleSheets[0].insertRule(rule5+" { “+rule_text1+” } ", 0);

Any reason for that? As now I am not getting background-color for the events in the Month View but I am still getting the font color in the month view.

Also, I have just realised that the headers and footers are not shown in the events of IE9 but it shows in Chrome, Firefox and samples\02_customization\01_events_coloring.html example.

I am attaching my code for your ready reference:

scheduler.templates.event_class=function(start, end, event){
if(start<control_date) // event start before control date
return “past_event”;

if(event.nodecolor) // if event has subject property then special class should be assigned
	return "color_"+event.nodecolor;
	
return "" //"color_"+event.color; // default return

}
scheduler.attachEvent(“onEventLoading”,function(ev){
var rule1 = “.dhx_cal_event.color_”+ev.nodecolor+" .dhx_body “;
var rule2 = “.dhx_cal_event.color_”+ev.nodecolor+” .dhx_title “;
var rule3 = “.dhx_cal_event.color_”+ev.nodecolor+” .dhx_footer “;
var rule4 = “.dhx_cal_event.color_”+ev.nodecolor+” .dhx_header “;
var rule5 = “.dhx_cal_event_line.color_”+ev.nodecolor;
var b=parseInt(ev.nodecolor/65536%256), g=parseInt(ev.nodecolor/256%256), r=ev.nodecolor%256;
var rule_text1 = “background-color:rgb(”+r+”,"+g+","+b+") !important; color:cream !important; border-radius:0px 0px 3px 3px !important;";
var rule_text2 = “background-color:white !important; color:cream !important; border-radius:1px 1px 0px 0px !important;”;
var rule_text3 = “background-color:black !important; color:grey !important; border-radius:2px !important;”;
var rule_text4 = “background-color:yellow !important; color:grey !important border-radius:2px !important;;”;
//var rule_text5 = “background-color:blue !important; color:grey !important;”;

if (_isIE){
	document.styleSheets[0].addRule(rule1, rule_text1);
	document.styleSheets[0].addRule(rule2, rule_text2);
	document.styleSheets[0].addRule(rule4, rule_text4);
	document.styleSheets[0].addRule(rule3, rule_text3);
	//document.styleSheets[0].addRule(rule5, rule_text1);
}
else{
	document.styleSheets[0].insertRule(rule1+" { "+rule_text1+" } ", 0);
	document.styleSheets[0].insertRule(rule2+" { "+rule_text2+" } ", 0);
	document.styleSheets[0].insertRule(rule3+" { "+rule_text3+" } ", 0);
	document.styleSheets[0].insertRule(rule4+" { "+rule_text4+" } ", 0);
	//document.styleSheets[0].insertRule(rule5+" { "+rule_text1+" } ", 0);
}
			
return true;

})

Hello,

That’s old version of events coloring sample, in the upcoming release of scheduler we will include updated one, check it below.

[code]

<script src="../../codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../../codebase/dhtmlxscheduler.css" type="text/css" media="screen" title="no title" charset="utf-8">

<style type="text/css" media="screen">
    html, body{
        margin:0;
        padding:0;
        height:100%;
        overflow:hidden;
    }

    /*event in day or week view*/
    .dhx_cal_event.past_event div{
        background-color: black !important;
        color: white !important;
    }
    /*multi-day event in month view*/
    .dhx_cal_event_line.past_event{
        background-color: black !important;
        color: white !important;
    }
    /*event with fixed time, in month view*/
    .dhx_cal_event_clear.past_event{
        color: black !important;
    }

    .dhx_cal_event.event_math div, .dhx_cal_event_line.event_math{
        background-color: orange !important;
        color: blue !important;
    }
    .dhx_cal_event_clear.event_math{
        color: blue !important;
    }

    .dhx_cal_event.event_science div, .dhx_cal_event_line.event_science{
        background-color: #add8e6 !important;
        color: #8b0000 !important;
    }
    .dhx_cal_event_clear.event_science{
        color: #8b0000 !important;
    }

    .dhx_cal_event.event_english div, .dhx_cal_event_line.event_english{
        background-color: #e0ffff !important;
        color: #008b8b !important;
    }
    .dhx_cal_event_clear.event_english{
        color: #008b8b !important;
    }

</style>

<script type="text/javascript" charset="utf-8">
    function init() {
        scheduler.config.xml_date="%Y-%m-%d %H:%i";
        scheduler.config.time_step = 30;
        scheduler.config.multi_day = true;
        scheduler.locale.labels.section_subject = "Subject";
        scheduler.config.first_hour = 6;

        var control_date = new Date(2011, 3, 20);
        scheduler.templates.event_class=function(start, end, event){

            if(start<control_date) // event start before control date
                return "past_event";

            if(event.subject) // if event has subject property then special class should be assigned
                return "event_"+event.subject;

            return ""; // default return

            /*
                Note that it is possible to create more complex checks
                events with the same properties could have different CSS classes depending on the current view:

                var mode = scheduler.getState().mode;
                if(mode == "day"){
                    // custom logic here
                }
                else {
                    // custom logic here
                }
            */
        };

        var subject = [
            { key: '', label: 'Appointment' },
            { key: 'english', label: 'English' },
            { key: 'math', label: 'Math' },
            { key: 'science', label: 'Science' }
        ];

        scheduler.config.lightbox.sections=[
            {name:"description", height:43, map_to:"text", type:"textarea" , focus:true},
            {name:"subject", height:20, type:"select", options: subject, map_to:"subject" },
            {name:"time", height:72, type:"time", map_to:"auto" }
        ];

        scheduler.init('scheduler_here', new Date(2011, 3, 18), "week");

        scheduler.parse([
            { start_date: "2011-04-18 09:00", end_date: "2011-04-18 12:00", text:"English lesson", subject: 'english' },
            { start_date: "2011-04-20 10:00", end_date: "2011-04-21 16:00", text:"Math exam", subject: 'math' },
            { start_date: "2011-04-21 10:00", end_date: "2011-04-21 14:00", text:"Science lesson", subject: 'science' },
            { start_date: "2011-04-23 16:00", end_date: "2011-04-23 17:00", text:"English lesson", subject: 'english' },
            { start_date: "2011-04-24 09:00", end_date: "2011-04-24 17:00", text:"Usual event" }
        ], "json");

    }
</script>
 
 
[/code] Please add your CSS to that sample and attach it here, so we could check the problem.

Kind regards,
Ilya

Hi,

When I attach my CSS to the sample it works fine. But it does not work in my file. I am not sure what the problem is. I cannot even get the days and hours coloring as well in IE although it displays in Firefox and Chrome. If there was any problem with my CSS then it should not have displayed the headers and footers and also the hours and days coloring image in Firefox or Chrome. But these browsers do display the headers and footers as well as the hours and days coloring. It is only IE which has the problem.

I am displaying the scheduler within Layout. Could this be the problem? I have another topic in forum (title ‘Recurring functionality in IE not displayed properly’) which does not display the recurring functionality properly in IE although it is displayed in Firefox and Chrome. This also seems to be a CSS issue. I guess all these have the same problem of CSS. The three problems are 1.) not displaying recurring as expected, 2.) not displaying header and footer of event and 3.) not displaying the hours and days coloring.

I am attaching my CSS and javascript code for your ready reference:

Main Scheduler File:

.dhx_cal_event.past_event div { background-color: black !important; color: white !important; } /*.dhx_cal_event_line.past_event{ background-color: black !important; color: white !important; }*/ .dhx_cal_event_clear.past_event{ color:purple !important; } .dhx_scale_holder_now.weekday, .dhx_scale_holder.weekday{ background-image:url(media/week_bg.png); } .dhx_scale_holder_now.custom_color, .dhx_scale_holder.custom_color{ background-image:url(media/hour_bg.png); background-position:0px -420px; } .rounded { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; behavior: url(script/border-radius.htc) }

ClientMethod onloadHandler() [ Language = javascript ]
{
var zenscheduler=zenPage.getComponentById(‘testcal’);
var scheduler=zenscheduler.control;
var format=scheduler.date.date_to_str("%Y-%m-%d %H:%i");
var patientDetails=zenPage.getPatientDetails();
patientDetails=patientDetails.split("*");
var patientId=patientDetails[0];
var patient=patientDetails[1];
var chart=patientDetails[2];
var provideroptions = scheduler.serverList(“provider”);
var apptypeoptions = scheduler.serverList(“apptype”);
var control_date = new Date(2011, 5, 9);
scheduler.templates.week_date_class=function(date,today){
if (date.getDay()==0 || date.getDay()==6)
return “weekday”;
return “custom_color”;
}
scheduler.templates.event_class=function(start, end, event){
if(start<control_date) // event start before control date
return “past_event”;

	if(event.nodecolor) // if event has subject property then special class should be assigned
		return "color_"+event.nodecolor;
	
	return "" //"color_"+event.color; // default return
}
scheduler.templates.event_text=function(start,end,event){
    var retvalue=(event.txtConfirmAppointment==1?"<img src='media/Symbol Check 2.gif' />":"");
    retvalue += (event.provider==null?"":"<b>Patient:</b> "+event.txtPatientName)
    retvalue += (event.provider==null?"":"<br><b>Doctor:</b> "+event.provider.substr(0,event.provider.indexOf("-")));
    return retvalue; //(event.txtConfirmAppointment==1?"<img src='media/Symbol Check 2.gif' />":"")+"<b>Patient:</b> "+event.txtPatientName+"<br><b>Doctor:</b> "+(event.provider.substr(0,event.provider.indexOf("-"))||"");
}
scheduler.templates.tooltip_text = function(start,end,event) {
return (event.txtConfirmAppointment==1?"<img src='media/Symbol Check 2.gif' />":"")+event.text+"<br/><b>Start date:</b> "+format(start)+"<br/><b>End date:</b> "+format(end);};	
//return "<b>Patient:</b> "+event.txtPatientName+"<br/><b>Provider:</b> "+event.txtprovider+"<br/><b>Start date:</b> "+format(start)+"<br/><b>End date:</b> "+format(end);};	
scheduler.locale.labels.unit_tab = "Provider"
scheduler.locale.labels.section_description="Appointment Details";
scheduler.locale.labels.section_provider="Provider";
scheduler.locale.labels.section_apptype="Appointment Type";
scheduler.locale.labels.section_time="Appointment Time";
scheduler.xy.menu_width = 0;
//scheduler.config.hour_size_px = 55;
scheduler.config.multi_day = true;
scheduler.config.event_duration = 15;
scheduler.config.drag_move = true;
scheduler.config.drag_resize = true;
scheduler.config.limit_time_select = true;
scheduler.config.icons_select=["icon_details","icon_delete"]
scheduler.config.details_on_create = true;
scheduler.config.details_on_dblclick = true;
scheduler.config.lightbox.sections = [
	{name: "provider", map_to: "provider", type: "select", options:provideroptions, focus: true },
	{name: "apptype",map_to: "apptype", type: "select", options:apptypeoptions },
	{name: "description", map_to: "text", type: "appointmentdetails_editor" },
	{name:"recurring", type:"recurring", map_to:"rec_type", button:"recurring"},
	{name: "time", type:"time", map_to:"auto"}
]
scheduler.form_blocks["appointmentdetails_editor"] = {
	render: function(sns) {
		var customfields = "";
		customfields += "<div class='dhx_cal_ltext' style='height:92px'><table border='0' align='left' cellspacing='0' cellpadding='1'>";
		customfields += "<tr><td align='left'><label style='font-size:smaller; font-weight:bold'>Patient</label></td><td align='left'>";
		customfields += "<textarea cols='1' id='txtPatientName' rows='2' name='S1' style='width:300px;background-color: #FFFFFF;border:1'>"+patient+"</textarea></td></tr>";
		customfields += "<input type='hidden' id='txtPatientId' value='"+patientId+"' /></td></tr>";
		customfields += "<tr><td align='left'><label style='font-size:smaller; font-weight:bold'>Chart Number</label></td><td align='left'>";
		customfields += "<textarea cols='1' id='txtChartNumber' rows='2' name='S2' style='width:100px;background-color: #FFFFFF;border:1'>"+chart+"</textarea></td></tr>";
		customfields += "<tr><td align='left'><label style='font-size:smaller; font-weight:bold'>Appointment Reason</label></td><td align='left'>";
		customfields += "<textarea cols='1' id='txtAppointmentReason' rows='4' name='S5' style='width:300px;background-color: #FFFFFF;border:1'></textarea></td></tr>";
		customfields += "<tr><td align='left'><label style='font-size:smaller; font-weight:bold'>Confirm Appointment</label></td><td align='left'>";
		customfields += "<input type='checkbox' id='txtConfirmAppointment' /></td></tr>";
		customfields += "</table></div>";
		return customfields;
	},
	set_value: function(node,value,ev) {
		document.getElementById("txtPatientName").value=ev.txtPatientName||patient;
		document.getElementById("txtChartNumber").value=ev.txtChartNumber||chart;
		document.getElementById("txtAppointmentReason").value=ev.txtAppointmentReason||"";
		document.getElementById("txtConfirmAppointment").checked=(ev.txtConfirmAppointment=="1");
		document.getElementById("txtPatientName").disabled=true;
		document.getElementById("txtChartNumber").disabled=true;
		document.getElementById("txtConfirmAppointment").disabled=true;
		if (value != "New event") {
			document.getElementById("txtConfirmAppointment").disabled=false;
		}
	},
	get_value: function(node, ev) {
		ev.txtPatientName=document.getElementById("txtPatientName").value
		ev.txtChartNumber=document.getElementById("txtChartNumber").value
		ev.txtAppointmentReason=document.getElementById("txtAppointmentReason").value
		ev.txtConfirmAppointment=document.getElementById("txtConfirmAppointment").checked?1:0;
		return "<b>Patient:</b> "+document.getElementById("txtPatientName").value+"<br><b>Doctor:</b> "+ev.provider.substr(0,ev.provider.indexOf("-"));
	},
	focus: function(node) {
	}
}
var getHours=this.doGetHours();
var hour=getHours.split("*");
if (hour[0]==1)
{
	scheduler.config.first_hour=hour[2];
	scheduler.config.last_hour=hour[3];
}
else
{
	scheduler.config.first_hour=7;
	scheduler.config.last_hour=21;
}
scheduler.createUnitsView({
		name:"unit",
		property:"provider",
		list:provideroptions
});
/*scheduler.createTimelineView({
		name:	"timeline",
		x_unit:	"minute",
		x_date:	"%H:%i",
		x_step:	30,
		x_size: 24,
		x_start: 16,
		x_length:	48,
		y_unit:	provideroptions,
		y_property:	"provider",
		render:"bar"
});*/
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.init(testcal,control_date,"week");
scheduler.attachEvent("onClick",function(){ return false; });
scheduler.setLoadMode("month");
scheduler.load("Scheduler.AppointmentList.cls");
//scheduler.load("media/dhtmlx/dhtmlxScheduler/samples/common/events2010.xml");
scheduler.attachEvent("onEventLoading",function(ev){
		//ev.nodecolor = Math.floor(Math.random()*16777216);
		//var rule = ".dhx_cal_event.dhx_header.color_"+ev.nodecolor+" div";
		var rule1 = ".dhx_cal_event.color_"+ev.nodecolor+" div.dhx_body ";
		var rule2 = ".dhx_cal_event.color_"+ev.nodecolor+" div.dhx_title ";
		var rule3 = ".dhx_cal_event.color_"+ev.nodecolor+" div.dhx_footer ";
		var rule4 = ".dhx_cal_event.color_"+ev.nodecolor+" div.dhx_header ";
		var rule5 = ".dhx_cal_event_line.color_"+ev.nodecolor;
		//var r = Math.floor(ev.nodecolor/(65536)); var g = Math.floor((ev.nodecolor%(256*256))/256); var b = ev.nodecolor%256;
		var b=parseInt(ev.nodecolor/65536%256), g=parseInt(ev.nodecolor/256%256), r=ev.nodecolor%256;
		var rule_text1 = "background-color:rgb("+r+","+g+","+b+") !important; color:cream !important; border-radius:0px 0px 3px 3px !important;";
		var rule_text2 = "background-color:white !important; color:cream !important; border-radius:1px 1px 0px 0px !important;";
		var rule_text3 = "background-color:black !important; color:grey !important; border-radius:2px !important;";
		var rule_text4 = "background-color:yellow !important; color:grey !important border-radius:2px !important;;";
		//var rule_text5 = "background-color:blue !important; color:grey !important;";
		
		if (_isIE){
			document.styleSheets[0].addRule(rule1, rule_text1);
			document.styleSheets[0].addRule(rule2, rule_text2);
			//document.styleSheets[0].addRule(rule4, rule_text4);
			//document.styleSheets[0].addRule(rule3, rule_text3);
			//document.styleSheets[0].addRule(rule5, rule_text1);
		}
		else{
			document.styleSheets[0].insertRule(rule1+" { "+rule_text1+" } ", 0);
			document.styleSheets[0].insertRule(rule2+" { "+rule_text2+" } ", 0);
			//document.styleSheets[0].insertRule(rule3+" { "+rule_text3+" } ", 0);
			//document.styleSheets[0].insertRule(rule4+" { "+rule_text4+" } ", 0);
			//document.styleSheets[0].insertRule(rule5+" { "+rule_text1+" } ", 0);
		}
			
		return true;
})
scheduler.attachEvent("onEventAdded",zenPage.onEventAdded);
scheduler.attachEvent("onEventChanged",zenPage.onEventChanged);
scheduler.attachEvent("onBeforeEventDelete",zenPage.onEventDeleted);
scheduler.attachEvent("onBeforeLightbox",function(event_id,event_object){
	var ev = this.getEvent(event_id);
	var date = ev.start_date;
	if (date.getDay()==0 || date.getDay()==6 || date.getHours()<6 || date.getHours()>17) {
	alert("Blocked for Appointments");
	zenPage.reloadSched();
	return false; // event won't be saved
	}
return true;
});
/*scheduler.attachEvent("onContextMenu", function (event_id, native_event_object)
{
    if(event_id) {
	var posx = 0;
	var posy = 0;
	if (native_event_object.pageX || native_event_object.pageY)
	{
    	posx = native_event_object.pageX;
    	posy = native_event_object.pageY;
    }
    else if (native_event_object.clientX || native_event_object.clientY)
    {
    	posx = native_event_object.clientX + document.body.scrollLeft+ document.documentElement.scrollLeft;
        posy = native_event_object.clientY + document.body.scrollTop+ document.documentElement.scrollTop;
    }
    var start=this._min_date.valueOf()+(posy*this.config.time_step+(this._table_view?0:posx)*24*60)*60000;
    start = this._correct_shift(start);
    var date = new Date(start)
    alert(date);
    menu.showContextMenu(posx-1,posy-1)
	}
});*/
//custom logic when new event is saved/created. 
scheduler.attachEvent("onEventSave", function(id, data) {
	if (!document.getElementById("txtAppointmentReason").value) {
		alert("Text must not be empty");
		return false;
	}
	return true;
})
//alert(scheduler.getState().mode);

}

Layout file:

body { margin: 0; color: blue; font-family: Arial; }

Method onloadHandler() [ Language = javascript ]
{
this.createRequestOb();
this.layoutCtrl=zenPage.getComponentById(“pageLayout”);

this.layoutCtrl.cells("a").setWidth('190');
this.layoutCtrl.cells("a").fixSize(true, false);
this.layoutCtrl.cells("b").hideHeader();
this.layoutCtrl.cells("a").setText('Hide/Show Scheduler Panel');
//this.layoutCtrl.setCollapsedText("a", "<img src='/media/3.gif' width='18px' height='81px' border='0'>");

this.accordion=this.layoutCtrl.cells("a").attachAccordion();
this.accordion.addItem("a0", "View");
this.accordion.addItem("a1", "Search");
this.accordion.cells("a0").attachObject("objId");
this.accordion.cells("a1").attachObject("objId2");
document.getElementById("objId").innerHTML=zenPage.getProviders();
this.accordion.openItem("a0");
this.accordion.setEffect(true);
this.layoutCtrl.cells("b").attachURL("Scheduler.Main.cls");

}

I am still waiting on my reply for this issue as I still have not been able to sort out the css issue.

Hello,

Please either provide link to the page where we could check this issue or create full sample which we would be able to simply run.

Best regards,
Ilya

Hi,

Here is the zipped full sample which you can run. It has two problems the repeat event section does not close even when disabled and the days and hours colouring is not displayed.

Regards,
Jai
Completed Demo.zip (1.02 MB)

Hello,

Do you mean that once you open it you can not close it? Can not reproduce this issue as section is correctly opened and closed in my case.

They are not colored from the start, if you move to another view - background image will be correctly applied. This happens because you call scheduler.init function before setting templates.

Best regards,
Ilya

Hi,

The repeat event section is always open. It never closes whether the event is enabled or disabled.
Here are some details taken from IE developer tools:

  1. When it is disabled:
As you can see the height of "dhx_form_repeat" is 0 but still it is displayed completely. If we maually change this to 1px then repeat form closes.
  1. When repeat even is enabled:
Here the height is smaller as compared to disabled repeat event.

I have circled the extra space in the disabled event where the vertical line is not connected to the base of time period.

With regards to the second problem, I changed the view but still I cannot see the background image at all. Although I have not made any changes as I do not know where I need to make changes to bring template before init. But as mentioned changing view still does not show the background image.

I am confused how the both things are working at your end and not working in my IE9 or IE8 browser. The confusion increases as Firefox works perfectly fine.




Hi,

Accidentally, I have done something which solved both the problems. Now it will need your attention to see if anything can be done about it in whole of the suite.

In the IE developer tools (F12), the document mode is Quirks mode by default. Changing it to any other mode i.e. Internet Explorer 7 or Internet Explorer 8 or Internet Explorer 9 sorts out the problem and I can see the background images and the repeat event enable/disable button also works as expected.

Did more research and found out that there should be a meta tag in the documents for it to overcome this problem as follows:

I have not been able to implement this meta tag functionality as all my pages are created dynamically and somehow this meta tag is being ignored.

So I would like to know if anything about this can be done in the dhtmlx suite and all dhtmlx products so that we do not get this problem going forward with IE.

Regards,
Jai

HI,

Here is a new problem when changing the document mode. If we change the document mode to IE7 or IE8 then it is fine. But if we change it to IE9 it gives problem with tooltip and displays error “No such interface supported” when hovering for tooltip.

I have tried this with your 03_extensions\20_tooltip.html example. It does not give the error, however it does not show the tooltip for IE9 document mode.

Regards,
Jai

Hello,

Scheduler officially doesn’t support Quirks mode. You need to change you page to trigger Standards display, not Quirks.

As for tooltip - updated version is available on the Known issue page in our documentation or you simply use attached file.

Best regards,
Ilya
dhtmlxscheduler_tooltip.zip (1.8 KB)