Change Appointment Background Color

[Scott]

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

[Peter]

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

[Scott]

Thanks, that worked.  I was passing the name instead of the int value.

[Mehmet]

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

[Mehmet]

Could anybody help me in regards?
thank you

[Boyan Dimitrov]

Hello,

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.


Regards,
Boyan Dimitrov
Telerik

 

 

[Dan]

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 {
    background-color:silver;
}

 Any help would be appreciated.

 

[Peter Milchev]

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" ... >
      <ResourceStyles>
          <telerik:ResourceStyleMapping Type="User" Key="1" BackColor="Orange" />
          <telerik:ResourceStyleMapping Type="User" Key="2" BackColor="Aqua" />
          <telerik:ResourceStyleMapping Type="User" Key="3" BackColor="Silver" />
      </ResourceStyles>
  </telerik:RadScheduler>

• With JavaScript: 

  function pageLoad() {
      var scheduler = $find("<%= RadScheduler1.ClientID%>");
      var apt = scheduler.get_appointments().findByID(6);
      apt.set_backColor("yellowgreen");
  }

• 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.

Regards,
Peter Milchev
Progress Telerik