Appointment Colors don't work in ie7

[Datamex]

Hi,

We are using the scheduler control 817 version with webservices.

But the colors seems not to be working in IE7 when we add them client side using javascript.
In IE 8 and firefox this works fine.
We are using to following code to fill the appointment client side.

/// <summary>

/// Occurs when a timeslot is created.

/// Sets the AppointmentType image, as well as the AppointmentState category color.

/// </summary>

/// <param name="sender">telerik:RadScheduler</param>

/// <param name="e">telerik:TimeSlot</param>

/// <returns>null</returns>

function TimeSlotCreated(sender, e) {

var app = e.get_appointment();

var element = e.get_appointment().get_element();

var attributeCollection = app.get_attributes();

var StateIconName = attributeCollection.getAttribute("StateIconName");

var SubStateIconName = attributeCollection.getAttribute("SubStateIconName");

var RsCategory = RgbStringToRadStyleString(attributeCollection.getAttribute("Color"));

var customerName = attributeCollection.getAttribute("CustomerName");

var startTime = app.get_start().format("MMM dd, yyyy HH:mm:ss");

attributeCollection.setAttribute("OriginalStartTime", startTime);

// Set the tooltip of the appointment

if (customerName == null) { customerName = "Geen klant"; }

app.set_toolTip("Afspraak: " + app.get_toolTip() + "\n" + "Klant:       " + customerName);

// Set the stateimage

var image = document.createElement("img");

image.setAttribute("src", '/Images/16x16/icons/' + StateIconName);

image.setAttribute("alt", 'IconImage');

image.setAttribute("ondragstart", 'javascript:return false;');

// If the appointment has a substate then show the substateimage

if (SubStateIconName != null) {

var image2 = document.createElement("img");

image2.setAttribute("src", '/Images/16x16/icons/' + SubStateIconName);

image2.setAttribute("alt", 'IconImage');

image2.setAttribute("ondragstart", 'javascript:return false;');

}

// Add the color style to the appointment

element.setAttribute("class", element.className + " rsCategory" + RsCategory);

// All appointments with ID 0 are script generated, they are not actually appointments within the database, thus must not be allowed to

// be edited/moved or resized in any way shape or form.

if (app.get_id() == 0) {

app.set_allowDelete(false);

app.set_allowEdit(false);

}

var divs = element.getElementsByTagName('div');

var result;

var innerHTML;

for (i = 0; i < divs.length; i++) {

// IE and its eternal spacing issues *sigh*

if ($telerik.$(divs[i]).is("div.rsAptContent")) {

result = divs[i];

innerHTML = result.innerHTML;

result.innerHTML = '';

result.appendChild(image);

// If the appointment has a substate then show the substateimage

if (SubStateIconName != null) { result.appendChild(image2); }

result.innerHTML = result.innerHTML + innerHTML;

result.innerHTML = result.innerHTML + "<br />";

if (customerName != "Geen klant") {

result.innerHTML = result.innerHTML + customerName;

}

return;

}

}

}

/// <summary>
      /// Returns the selected Css style type name for use within tsAptIn etc.
      /// </summary>
      /// <param name="color">hex color</param>
      /// <returns>Named string as used by telerik rsCategory</returns>
      function RgbStringToRadStyleString(color) {
        switch (color) {
          case "#BBD0EC": color = "Blue"; break;
          case "#202B3F": color = "DarkBlue"; break;
          case "#2B3F20": color = "DarkGreen"; break;
          case "#3F2020": color = "DarkRed"; break;
          case "#D0ECBB": color = "Green"; break;
          case "#EDD5B7": color = "Orange"; break;
          case "#F1DCFF": color = "Pink"; break;
          case "#ECBBBB": color = "Red"; break;
          case "#FFFBC7": color = "Yellow"; break;
          case "#540042": color = "Violet"; break;
          default: color = "Blue"; break;
        }
        return color;
      }

This gives me the following className :  "rsApt rsCategoryBlue"

Can you tell me what i am doing wrong?

[Peter]

Hello Datamex,

With the upcoming service pack, we will expose client side methods for setting appoinment backcolor and border. For example, you can use OnClientAppointmentDataBound:

 function OnClientAppointmentDataBound(sender, eventArgs) {
            var app = eventArgs.get_appointment();
            //debugger;
            var backColor = app.get_attributes().getAttribute("AppointmentColor");

            if (backColor)
                app.set_backColor(backColor);

            app.set_borderColor("black");
            app.set_borderWidth("1");

        }

Yo can try the todays internal build which will be available later on today and use it with this sample project to test this functionality:
http://www.telerik.com/support/kb/aspnet-ajax/scheduler/sample-project-of-customizing-the-advanced-form-in-client-side-binding-mode-web-services.aspx


Greetings,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Datamex]

That's a great solution thanks :)