Changing the background color of the rad scheduler in agenda view

672 Views Asked by At

I have a rad scheduler in agenda view. I wish to change the background color of certain appointments in the scheduler. An Example can be seen here

This is my current C# code but the background never changes in Agenda View. Is it possible to change the color in agenda view. This works for any of the other views.

protected void rs_Calendar_AppointmentDataBound(object sender, SchedulerEventArgs e)
    {
        if (e.Appointment.DataItem is vw_CalendarDate)
        {
            vw_CalendarDate ce = (vw_CalendarDate)e.Appointment.DataItem;
            if (ce.Title != null && ce.Title.ToLower().StartsWith("sgt"))
                e.Appointment.BackColor = Color.Red;
            }

This is the code for the scheduler:

<telerik:RadScheduler runat="server" ID="rs_Calendar"
                    SelectedView="AgendaView" 

                    AllowDelete="false"
                    Height="100%" OverflowBehavior="Expand"
                    Width="100%" DataKeyField="TourInstanceId" DataSubjectField="Title"
                    DataStartField="DateStart" DataEndField="DateEnd" 

                    OnAppointmentDataBound="rs_Calendar_AppointmentDataBound"
                     OnAppointmentCreated="RadScheduler1_AppointmentCreated"
                    OnNavigationComplete="rs_Calendar_NavigationComplete"
                    OnClientAppointmentInserting="CancelEvent"
                    OnClientAppointmentEditing="CancelEvent"
                    CustomAttributeNames="Color,TourInstanceId,Title,Bookings,Guideinitials,Availability,GroupName"
                    OnClientAppointmentMoveEnd="MoveAppt"
                    OnClientAppointmentResizeStart="ResizeAppt"
                    OnClientAppointmentClick="onClientAppointmentClick"
                    OnClientAppointmentDoubleClick="onClientAppointmentDoubleClick">
                    <WeekView UserSelectable="false" />
                    <DayView UserSelectable="false" />
                    <MonthView UserSelectable="true" />
                    <MultiDayView UserSelectable="false" />
                    <TimelineView UserSelectable="true" />
                    <AgendaView UserSelectable="true" />
                    <AppointmentTemplate>
                        <div class="appt-title" style="border-color: <%# Eval("Attributes['BackGroundColor']") %>; color: <%# Eval("Attributes['TextColor']") %>;">

                            <span runat="server" id="calendar_icons_alerts">
                                <img class="icons_on_calendar" src="<%# Eval("Attributes['Completed']") %>" alt="Completed" width="20px" style="display: <%# Eval("Attributes['Completed']")!=null ? "inline-block": "none" %>" />
                                <img class="icons_on_calendar" src="<%# Eval("Attributes['Closed']") %>" alt="Closed" width="20px" style="display: <%# Eval("Attributes['Closed']")!=null ? "inline-block": "none" %>" />
                                <img class="icons_on_calendar" src="<%# Eval("Attributes['Custom']") %>" alt="Custom" width="50px" style="display: <%# Eval("Attributes['Custom']")!=null ? "inline-block": "none" %>" />
                                <img class="icons_on_calendar" src="<%# Eval("Attributes['Transfer']") %>" alt="Transfer" width="50px" style="display: <%# Eval("Attributes['Transfer']")!=null ? "inline-block": "none" %>" />
                                <img class="icons_on_calendar" src="<%# Eval("Attributes['Attention']") %>" alt="Attention" width="20px" style="display: <%# Eval("Attributes['Attention']")!=null ? "inline-block": "none" %>" />
                                <img class="icons_on_calendar" src="<%# Eval("Attributes['No Bookings']") %>" alt="No Bookings" width="20px" style="display: <%# Eval("Attributes['No Bookings']")!=null ? "inline-block": "none" %>" />
                                <img class="icons_on_calendar" src="<%# Eval("Attributes['Headsets']") %>" alt="Headsets" width="20px" style="display: <%# Eval("Attributes['Headsets']")!=null ? "inline-block": "none" %>" />
                                <img class="icons_on_calendar" src="<%# Eval("Attributes['Bikes']") %>" alt="Bikes" width="20px" style="display: <%# Eval("Attributes['Bikes']")!=null ? "inline-block": "none" %>" />
                                <img class="icons_on_calendar" src="<%# Eval("Attributes['Tickets']") %>" alt="Tickets" width="20px" style="display: <%# Eval("Attributes['Tickets']")!=null ? "inline-block": "none" %>" />
                                <img class="icons_on_calendar" src="<%# Eval("Attributes['Guide']") %>" alt="Guide" width="20px" style="display: <%# Eval("Attributes['Guide']")!=null ? "inline-block": "none" %>" />
                                <img class="icons_on_calendar" src="<%# Eval("Attributes['Money']") %>" alt="Money" width="20px" style="display: <%# Eval("Attributes['Money']")!=null ? "inline-block": "none" %>" />
                                <img class="icons_on_calendar" src="<%# Eval("Attributes['Kids']") %>" alt="Kids" width="20px" style="display: <%# Eval("Attributes['Kids']")!=null ? "inline-block": "none" %>" />
                                <img class="icons_on_calendar" src="<%# Eval("Attributes['Voucher']") %>" alt="Voucher" width="20px" style="display: <%# Eval("Attributes['Voucher']")!=null ? "inline-block": "none" %>" />
                                <img class="icons_on_calendar" src="<%# Eval("Attributes['Arrange Transfer']") %>" alt="Arrange Transfer" width="20px" style="display: <%# Eval("Attributes['Arrange Transfer']")!=null ? "inline-block": "none" %>" />
                                <img class="icons_on_calendar" src="<%# Eval("Attributes['Radio']") %>" alt="Radio" width="20px" style="display: <%# Eval("Attributes['Radio']")!=null ? "inline-block": "none" %>" />
                                <img class="icons_on_calendar" src="<%# Eval("Attributes['VIP client']") %>" alt="VIP client" width="20px" style="display: <%# Eval("Attributes['VIP client']")!=null ? "inline-block": "none" %>" />
                                <img class="icons_on_calendar" src="<%# Eval("Attributes['Finelli & Shaw']") %>" alt="Finelli & Shaw" width="20px" style="display: <%# Eval("Attributes['Finelli & Shaw']")!=null ? "inline-block": "none" %>" />
                                <img class="icons_on_calendar" src="<%# Eval("Attributes['Trip planning']") %>" alt="Trip planning" width="20px" style="display: <%# Eval("Attributes['Trip planning']")!=null ? "inline-block": "none" %>" />
                                <img class="icons_on_calendar" src="<%# Eval("Attributes['People Together']") %>" alt="People Together" width="20px" style="display: <%# Eval("Attributes['People Together']")!=null ? "inline-block": "none" %>" />
                                <img class="icons_on_calendar" src="<%# Eval("Attributes['Press']") %>" alt="Press" width="20px" style="display: <%# Eval("Attributes['Press']")!=null ? "inline-block": "none" %>" />
                                <img class="icons_on_calendar" src="<%# Eval("Attributes['Restaurant Reservation']") %>" alt="Restaurant Reservation" width="20px" style="display: <%# Eval("Attributes['Restaurant Reservation']")!=null ? "inline-block": "none" %>" />
                                <img class="icons_on_calendar" src="<%# Eval("Attributes['Pick Up Location']") %>" alt="Pick Up Location" width="20px" style="display: <%# Eval("Attributes['Pick Up Location']")!=null ? "inline-block": "none" %>" />
                                <img class="icons_on_calendar" src="<%# Eval("Attributes['Drop Off Location']") %>" alt="Drop Off Location" width="20px" style="display: <%# Eval("Attributes['Drop Off Location']")!=null ? "inline-block": "none" %>" />
                                <img class="icons_on_calendar" src="<%# Eval("Attributes['Meeting Point']") %>" alt="Meeting Point" width="20px" style="display: <%# Eval("Attributes['Meeting Point']")!=null ? "inline-block": "none" %>" />
                            </span>

                            <%# Eval("Subject") %>
                        </div>
                    </AppointmentTemplate>
                </telerik:RadScheduler>
1

There are 1 best solutions below

0
On

The issue is that the appointments are stored in a table in the agenda view so changing the backcolor of the appointment does nothing. You have to use an attribute to change the backgroundcolor of the table row