Appointment Colors don't work in ie7

3 posts, 1 answers
  1. Datamex
    Datamex avatar
    161 posts
    Member since:
    Jun 2012

    Posted 21 Aug 2009 Link to this post

    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?
  2. Answer
    Peter
    Admin
    Peter avatar
    6637 posts

    Posted 21 Aug 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Datamex
    Datamex avatar
    161 posts
    Member since:
    Jun 2012

    Posted 21 Aug 2009 Link to this post

    That's a great solution thanks :)
Back to Top