This is a migrated thread and some comments may be shown as answers.
Setting appointment color without CSS?
15 Answers 552 Views
This is a migrated thread and some comments may be shown as answers.
Rex Chappell
Top achievements
Rank 1
Rex Chappell asked on 26 Sep 2008, 03:46 PM
Currently, I'm changing the color of different calendars using something to the effect of:

e.Appointment.CssClass = <css color>

However, I would like to set this based on an ARGB color that I'm getting through the rad ColorPicker. How would I go about doing this?

15 Answers, 1 is accepted

Sort by
0
Rex Chappell
Top achievements
Rank 1
answered on 29 Sep 2008, 02:12 PM
Does anyone have any idea how to make this happen?
0
Simon
Telerik team
answered on 30 Sep 2008, 08:51 AM
Hello Rex Chappell,

You can set the color of Appointments in the event handler of the AppointmentCreated event of RadScheduler as shown below:

[C#]
    protected void RadScheduler1_AppointmentCreated(object sender, AppointmentCreatedEventArgs e) 
    { 
        WebControl rsWrap = (WebControl)e.Container.Parent.Parent.Parent.Parent.Parent; 
 
        WebControl rsApt = (WebControl)e.Container.Parent.Parent.Parent.Parent; 
 
        WebControl rsAptWrap = (WebControl)e.Container.Parent.Parent.Parent; 
 
        WebControl rsAptInner = (WebControl)e.Container.Parent.Parent; 
        rsAptInner.Style["background-color"] = "green"
    } 

[VB.NET]
Protected Sub RadScheduler1_AppointmentCreated(ByVal sender As ObjectByVal e As AppointmentCreatedEventArgs) 
    Dim rsWrap As WebControl = DirectCast(e.Container.Parent.Parent.Parent.Parent.Parent, WebControl) 
 
    Dim rsApt As WebControl = DirectCast(e.Container.Parent.Parent.Parent.Parent, WebControl) 
 
    Dim rsAptWrap As WebControl = DirectCast(e.Container.Parent.Parent.Parent, WebControl) 
 
    Dim rsAptInner As WebControl = DirectCast(e.Container.Parent.Parent, WebControl) 
    rsAptInner.Style("background-color") = "green" 
End Sub 

You need to set the appropriate style to the corresponding element of the Appointment HTML representation. In some cases, styles should be applied to different elements in order to apply correctly (due to specificity).

Kind regards,
Simon
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Rex Chappell
Top achievements
Rank 1
answered on 06 Oct 2008, 03:02 PM
Is this possible without using a named color? As in, an arbitrary ARGB color?
0
Simon
Telerik team
answered on 08 Oct 2008, 02:46 PM
Hello Rex Chappell,

You can set any value which is available to the color attribute.

Please use this article as a reference.

Greetings,
Simon
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Ian Russell
Top achievements
Rank 1
answered on 21 Nov 2008, 03:53 PM
I am using Office2007 skin and with this solution only background color of the appointment description is changed and the rest of the appointment box has the default skin color.
0
Simon
Telerik team
answered on 24 Nov 2008, 01:08 PM
Hello Attila Safari,

Some CSS styles should be applied to the correct Appointment element. In some cases, due to the specificity of CSS classes the desired style does not apply.

I suggest you test with the following AppointmentCreated event handler in order to determine which element the desired color should be applied on:

[C#]
protected void RadScheduler1_AppointmentCreated(object sender, AppointmentCreatedEventArgs e) 
    AppointmentControl rsApt = (AppointmentControl) e.Appointment.AppointmentControls[0]; 
 
    WebControl rsAptWrap = (WebControl) rsApt.Controls[0]; 
    rsAptWrap.Style["background-color"] = "red"
 
    WebControl rsAptInner = (WebControl)rsApt.Controls[0].Controls[0]; 
    //rsAptInner.Style["background-color"] = "green"; 
 
    WebControl rsAptContent = (WebControl)rsApt.Controls[0].Controls[0].Controls[0]; 
    //rsAptContent.Style["background-color"] = "yellow"; 

[VB.NET]
Protected Sub RadScheduler1_AppointmentCreated(ByVal sender As ObjectByVal e As AppointmentCreatedEventArgs) 
    Dim rsApt As AppointmentControl = DirectCast(e.Appointment.AppointmentControls(0), AppointmentControl) 
 
    Dim rsAptWrap As WebControl = DirectCast(rsApt.Controls(0), WebControl) 
    rsAptWrap.Style("background-color") = "red" 
 
    Dim rsAptInner As WebControl = DirectCast(rsApt.Controls(0).Controls(0), WebControl) 
    'rsAptInner.Style("background-color") = "green"; 
 
    Dim rsAptContent As WebControl = DirectCast(rsApt.Controls(0).Controls(0).Controls(0), WebControl) 
    'rsAptContent.Style("background-color") = "yellow"; 
End Sub 

Note: comment and uncomment each line and test to see the appearance of Appointments changing.

Sincerely yours,
Simon
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Karl
Top achievements
Rank 1
answered on 15 Dec 2008, 05:41 PM
Hi Rex and Simon!

I've been playing around setting and changing colors programmatically. It's fun. Where do I change the CSS of the displayed text on (or in) an appointment?   I've tried 

rsAptContent.Style(

"font-color") = "red"

 

 

but that doesn't work.

Any Ideas?

Thanks
Karl
0
Peter
Telerik team
answered on 16 Dec 2008, 12:23 PM
Hello Karl,

How about this:
  Protected Sub RadScheduler1_AppointmentCreated(ByVal sender As ObjectByVal e As Telerik.Web.UI.AppointmentCreatedEventArgs) Handles RadScheduler1.AppointmentCreated  
        e.Appointment.ForeColor = Drawing.Color.Red  
    End Sub 
?



Peter
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Chi
Top achievements
Rank 1
answered on 06 Mar 2009, 11:03 PM
Hi there,

I have the same problem of changing the fone color of appointments. I have tried using e.Appointment.ForeColor = Color.Black; in the AppointmentCreated event, the fone color is not changed. I have tried to set the FoneColor property of the Scheduler to Black in Design mode, it didn't help either.

It seems to me that if using a skin for a scheduler, we are not able to change the fone color of the appointments.
Are there any way to solve this problem please?

Cheers,
Chi
0
Peter
Telerik team
answered on 07 Mar 2009, 04:13 PM
Hello Chi,

That's unusual. Can you open a support ticket and send us a simple demo of your implementation showing the problem?

Best wishes,
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.
0
Oksana
Top achievements
Rank 1
answered on 20 Mar 2009, 06:26 PM

protected

 

void RadScheduler_OnAppointmentCreated(object sender, AppointmentCreatedEventArgs e)

 

 

{

 

switch (e.Appointment.Attributes["type"])

 

 

{

 

    case "1":

 

 

        e.Appointment.BackColor = System.Drawing.

Color.Beige;

 

 

 

    break;

 

 

 

    case "2":

 

 

        e.Appointment.BackColor = System.Drawing.

Color.BlanchedAlmond;

 

 

 

    break;

 

 

 

    case "3":

 

 

         e.Appointment.BackColor = System.Drawing.

Color.Goldenrod;

 

 

 

    break;

 

 

 

    default:

 

 

        e.Appointment.BackColor = System.Drawing.

Color.LightSkyBlue;

 

 

 

    break;

 

 

}

}

 

 

0
Peter
Telerik team
answered on 23 Mar 2009, 12:17 PM
Hi Oksana,

With Q1 2009, we use background images from sprites for the appointments' background. If you want to use custom color for the appointments, you have to remove the background image with the following css rules:
 <style type="text/css">     
    .RadScheduler .rsAptContent,   
    .RadScheduler .rsAptIn,   
    .RadScheduler .rsAptMid,   
    .RadScheduler .rsAptOut   
    {          
        background-imagenone !important;  
    }  
    </style> 
  
and set the BackColor property from code:
  protected void RadScheduler1_AppointmentDataBound(object sender, SchedulerEventArgs e)  
    {  
        e.Appointment.BackColor = System.Drawing.Color.Red;          
    } 

If your appointments have resources associated with them, you could use the new ResourceStyleMapping feature and set up to 4 unique styles (rsCategoryBlue, rsCategoryOrange, rsCategoryRed, rsCategoryGreen) in addition to the default one. The background images for these styles are embedded in the skins so you don't have to create them. The following example demonstrates this:
http://demos.telerik.com/aspnet-ajax/scheduler/examples/resources/defaultcs.aspx
 <ResourceStyles> 
                    <telerik:ResourceStyleMapping Type="User" Text="Alex" ApplyCssClass="rsCategoryBlue" /> 
                    <telerik:ResourceStyleMapping Type="User" Text="Bob" ApplyCssClass="rsCategoryOrange" /> 
                    <telerik:ResourceStyleMapping Type="User" Text="Charlie" ApplyCssClass="rsCategoryGreen" /> 
                </ResourceStyles> 
 

You can also see this blog post:
http://blogs.telerik.com/tervelpeykov/posts/09-02-23/RadControls_for_ASP_NET_AJAX_receive_a_major_face-lift.aspx



Sincerely yours,
Peter
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
Dave Friedel
Top achievements
Rank 1
answered on 15 Apr 2009, 09:20 PM
e.Appointment.BackColor = <acolor>
e.Appointment.BorderStyle = BorderStyle.Solid
e.Appointment.BorderColor = Color.Black    <--- this does not work.

I have tried disabling the style like you say above BUT I cannot get the bordercolor to work.

regards,
Dave
0
Peter
Telerik team
answered on 20 Apr 2009, 09:20 AM
Hello Dave,

We have decided to expose a property with which to set the appointment's background color without any additional css styling. Untill this happens, please use the following css fix in addition to the css already suggested above:
 div.RadScheduler .rsAptContent,  
    div.RadScheduler .rsAptIn,  
    div.RadScheduler .rsAptMid,  
    div.RadScheduler .rsAptOut  
    {  
        background:none;  
        margin:0;  
        padding: 0;  
        rightrightauto;  
        bottombottomauto;  
    }  
    div.RadScheduler .rsAptOut  
    {  
        padding-bottom4px;  
    }  
    div.RadScheduler .rsAptMid  
    {  
        border1px solid gray;  
        padding-bottom3px;  
    }  
    div.RadScheduler .rsAptContent,  
    div.RadScheduler .rsAptIn  
    {  
        padding-bottom3px;  
    }  
    div.RadScheduler .rsTimelineView .rsAptResize  
    {  
        margin-top: -1px;  
    } 



Regards,
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.
0
sirishagundala
Top achievements
Rank 1
answered on 06 Oct 2010, 07:12 AM
i have seen the post which you have given but sorry i am not geeting the right answer i will say my query could you please amswer the query?
my query is i am using rad scheduler appointments  i want to apply color to the scheduler dynimically like i f i select the calender type from the dropdown its should automatically apply to the appointment that is the type i selected.......example if it is 
 

Default------ it should be blue
public calende-----r it sould be black
please answer to my query its important to me



Asked by
Rex Chappell
Top achievements
Rank 1
Answers by
Rex Chappell
Top achievements
Rank 1
Simon
Telerik team
Ian Russell
Top achievements
Rank 1
Karl
Top achievements
Rank 1
Peter
Telerik team
Chi
Top achievements
Rank 1
Oksana
Top achievements
Rank 1
Dave Friedel
Top achievements
Rank 1
sirishagundala
Top achievements
Rank 1
Share this question
or