Change Appointment Background Color

8 posts, 0 answers
  1. Scott
    Scott avatar
    7 posts
    Member since:
    Apr 2012

    Posted 13 Jun 2012 Link to this post

    I am wanting to change the background color of an appointment based on the value in the appointment description.  I have this working using the pallet from Drawing.Color.  The user would like much lighter colors than those in the pallet.  I tried passing in the hex value for the color, but then I get the default background color.  (see below).  My question is, is there a way to lighten the defined colors or pass in a different color than what is defined in Drawing.Color?  All of your examples that I have seen seem to require a color from System.Color

    Color[] RadSchedulerColors = new Color[15];
    RadSchedulerColors[0] = ColorTranslator.FromHtml("#80F4A460");
  2. Peter
    Peter avatar
    6637 posts

    Posted 15 Jun 2012 Link to this post

    Hi Scott,

    This approach should work. There is a demo as a proof of concept that uses a similar technique:
    protected void RadScheduler1_AppointmentDataBound(object sender, SchedulerEventArgs e)
               string colorAttribute = e.Appointment.Attributes["AppointmentColor"];
               if (!string.IsNullOrEmpty(colorAttribute))
                   int colorValue;
                   if (int.TryParse(colorAttribute, out colorValue))
                       int borderColorValue = (int) (colorValue < -0x7F7F7F ? colorValue + 0x202020 : colorValue - 0x202020);
                       e.Appointment.BackColor = Color.FromArgb(colorValue);
                       e.Appointment.BorderColor = Color.FromArgb(borderColorValue);
               e.Appointment.ToolTip = e.Appointment.Subject + ": " + e.Appointment.Description;

    Greetings, Peter
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Scott
    Scott avatar
    7 posts
    Member since:
    Apr 2012

    Posted 19 Jun 2012 Link to this post

    Thanks, that worked.  I was passing the name instead of the int value.
  4. Mehmet
    Mehmet avatar
    100 posts
    Member since:
    Jun 2014

    Posted 01 Sep 2014 in reply to Peter Link to this post

    How we can assign the backcolor from the JS side?

    1.function OnClientAppointmentDataBound(sender, eventArgs) {
    2.                    var app = eventArgs.get_appointment();
    3.                    var jobColor = app.get_attributes().getAttribute("JobColor");                   
    4.                    app.set_backColor(jobColor);                   
    5.                    //app.set_borderColor("black");
    6.                    app.set_borderWidth("1");
    8.                }

    I do have the HEX code, but I dont have the color name:

            //    System.Drawing.Color col = System.Drawing.ColorTranslator.FromHtml(colorValue);
            //    e.Appointment.BackColor = col;

    I want to be able to do that in the JS code.
    thank you
  5. Mehmet
    Mehmet avatar
    100 posts
    Member since:
    Jun 2014

    Posted 01 Sep 2014 in reply to Mehmet Link to this post

    Could anybody help me in regards?
    thank you
  6. Boyan Dimitrov
    Boyan Dimitrov avatar
    2020 posts

    Posted 02 Sep 2014 Link to this post


    Please try to get the appointment DOM element using the appointment client-side object method get_element(). Then you can find a nested div element with class rsAptContent and change its background color using jQuery.

    Boyan Dimitrov

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  7. Dan
    Dan avatar
    37 posts
    Member since:
    Oct 2013

    Posted 16 Aug 2017 in reply to Boyan Dimitrov Link to this post

    Hello Dimitrov (or anyone else)

    Am using: Telerik.Web.UI 2016.3.1027.45.

    When moving an Appointment in the schedule the Appointment DOM loses its inline style:Background-Color attribute. And reverts to the color defined by the Skin ("Glow") (this was not happening when viewed in compatability mode view.)

    I have followed your suggestion (as follows):

    function AppointmentMoved(sender, args)
            var SchedItem = args.get_appointment();
            $(SchedItem.get_element()).find('.rsAptContent').css('background-color', 'silver');

    This code works (no errors), but somehow the background color attribute gets erased when the Appointment actually gets rendered.
     I have also tried 'overriding' the  style class but this does not work either:

    .rsWrap div {

     Any help would be appreciated.


  8. Peter Milchev
    Peter Milchev avatar
    464 posts

    Posted 25 Aug 2017 Link to this post

    Hello Dan,

    We have tried replicating the issue but we were unable to. 

    Please find attached a sample project implementing the various approaches for customizing the appointment color: 
    • With CSS:
      html .RadScheduler .rsWrap .rsAptContent {
          background-color: aquamarine;
    • With ResourceStyles:
      <telerik:RadScheduler runat="server" ID="RadScheduler1" ... >
              <telerik:ResourceStyleMapping Type="User" Key="1" BackColor="Orange" />
              <telerik:ResourceStyleMapping Type="User" Key="2" BackColor="Aqua" />
              <telerik:ResourceStyleMapping Type="User" Key="3" BackColor="Silver" />
    • With JavaScript: 
      function pageLoad() {
          var scheduler = $find("<%= RadScheduler1.ClientID%>");
          var apt = scheduler.get_appointments().findByID(6);
    • From Server-side: 
      protected void RadScheduler1_AppointmentDataBound(object sender, SchedulerEventArgs e)
          if (e.Appointment.Subject == "From CodeBehind")
              e.Appointment.BackColor = Color.FromArgb(255, 64, 23);

    Adding the .NET 4.5 version of the Telerik assemblies in the Bin folder and modifying the connection string should be sufficient for running the project.

    Peter Milchev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top