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");
}