Setting styles for appointments

[Geoff]

I've just used the radSheduler for the first time and was impressed at how easy it was to setup from the on-line examples and demos. I am however experiencing one small problem with setting styles. I used the Telerik documentation on the subject here and everything seemed ok except that my styles are ignored but I can't figure out what I've missed.

Here is my aspx code for the Scheduler (it uses a SQLDataSource:

<telerik:RadScheduler ID="RadScheduler1" StartEditingInAdvancedForm="false" EnableExactTimeRendering="true"
    OnClientAppointmentEditing="AppointmentEditing" OnClientAppointmentInserting="AppointmentInserting"
    DataSourceID="ds_Logbook" DataDescriptionField="ProgComment"
    DataEndField="StopDate" DataKeyField="Logbook_Id" DataStartField="StartDate"
    DataSubjectField="ActivityDescription" SelectedView="MonthView" Height="100%" runat="server">
</telerik:RadScheduler>

 

Here is the DataBound event in the codebehind: 

Protected Sub RadScheduler1_AppointmentDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.SchedulerEventArgs) Handles RadScheduler1.AppointmentDataBound
    e.Appointment.CssClass = "rsCategory" + Replace(e.Appointment.Subject, " ", "")
End Sub

 

Here is the CSS:  

.rsCategoryActivity1 {
    background-color: Blue;
    border-color: Blue;
    border-style: dotted;
    border-width: thin;
}

.rsCategoryActivity2 {
    background-color: Green;
    border-color: Green;
    border-style: dotted;
    border-width: thin;
}

.rsCategoryActivity3 {
    background-color: Yellow;
    border-color: Yellow;
    border-style: dotted;
    border-width: thin;
}

.rsCategoryActivity4 {
    background-color: Red;
    border-color: Red;
    border-style: dotted;
    border-width: thin;
}

.rsCategoryActivity5 {
    background-color: Orange;
    border-color: Orange;
    border-style: dotted;
    border-width: thin;
}

and here is a rendered appointment that should be shown in red but just shows up in the default skin colours:

<div id="RadScheduler1_3_0" title="Activity 4" class="rsApt rsCategoryActivity4" style="height:21px;width:500%;">
    <div class="rsAptOut" style="height:21px;">
        <div class="rsAptMid">
            <div class="rsAptIn">
                <div class="rsAptContent">
                    Activity 4<a class="rsAptDelete" href="#">delete</a>
                </div>
            </div><div class="rsAptResize rsAptResizeStart" style="z-index:80;top:0px;">
                <!-- -->
            </div><div class="rsAptResize rsAptResizeEnd" style="z-index:80;top:0px;">
                <!-- -->
            </div>
        </div>
    </div>
</div>

Can anyone help?

 

 

 

 

[Magdalena]

Hello Geoff,

Thank you for contacting Telerik support.

The following styles will customize background and border colors of an appointment with a class rsCategoryActivity4:

.RadScheduler .rsCategoryActivity4 .rsAptIn,
.RadScheduler .rsCategoryActivity4 .rsAptMid,
.RadScheduler .rsCategoryActivity4 .rsAptContent {
    background: red;
    border-color: red;
    border-style: dotted;
}

         
Do not hesitate to contact us if you have other questions.

Regards,
Magdalena
Telerik

 

 

[Geoff]

Magdalena,

Thanks for the response. I have changed my styles as you suggested and it worked great.

Regards

Geoff