Different Colors of appointment by changing status

[Alex]

Hi,

I am very new to all of this I have seen a few examples of doing this but can't seem to get it to work. I have seen some about using CSS and some of using code. Just wanted to know which is better? I would like to use CSS. So here is what I got I have a RadScheduler with custom resources not sure that is what it is called. I have Therapists, Patients and Status. What I want to do is change the color of the appointment when the status is changed. Can you please provide me with what code I need to implement and maybe a sample of what the CSS should look like. thanks here is my code.

<%@ Page Title="" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="STSchedule.aspx.vb" Inherits="ScheduleUser_STSchedule" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
    <link href="../Styles.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    .style3
    {
        width: 165px;
        height: 120px;
    }
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
    </telerik:RadStyleSheetManager>
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI"
                Name="Telerik.Web.UI.Common.Core.js">
            </asp:ScriptReference>
            <asp:ScriptReference Assembly="Telerik.Web.UI"
                Name="Telerik.Web.UI.Common.jQuery.js">
            </asp:ScriptReference>
            <asp:ScriptReference Assembly="Telerik.Web.UI"
                Name="Telerik.Web.UI.Common.jQueryInclude.js">
            </asp:ScriptReference>
        </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <div id="content-container1">
    <div id="content-container2">
            <div id="section-navigation">
                <img alt="h2t" class="style3" src="../Pics/logoh2t.png" />
                <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Transparent"
                    Width="161px" SelectedIndex="2" >
                <Tabs>
                    <telerik:RadTab runat="server" Text="PT"
                        NavigateUrl="~/ScheduleUser/PTSchedule.aspx">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="OT"
                        NavigateUrl="~/ScheduleUser/OTSchedule.aspx">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="ST" Selected="True"
                        NavigateUrl="~/ScheduleUser/STSchedule.aspx">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="MT"
                        NavigateUrl="~/ScheduleUser/MTSchedule.aspx">
                    </telerik:RadTab>
                     <telerik:RadTab runat="server" Text="Patients"
                        NavigateUrl="~/ScheduleUser/Schedule.aspx">
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
                <asp:ListBox ID="ListBox1" runat="server" BackColor="#99CCFF"
                    DataSourceID="SqlDataSource6" DataTextField="TherapistName"
                    DataValueField="EmployeeID" Rows="30" Width="161px" AutoPostBack="True"></asp:ListBox>
                <asp:SqlDataSource ID="SqlDataSource6" runat="server"
                    ConnectionString="<%$ ConnectionStrings:H2T2SQLConnectionString %>" SelectCommand="SELECT        EmployeeID, TherapistFirstName, TherapistLastName, Occupation, TherapistLastName + ' ' + TherapistFirstName + ' ' + Occupation AS TherapistName
FROM            Therapist
WHERE        (Occupation = N'SLP') OR
                         (Occupation = N'SLPA')
ORDER BY TherapistLastName"></asp:SqlDataSource>
</div>
<div id="content">

    <telerik:RadScheduler ID="RadScheduler1" runat="server" Skin="Vista" DataEndField="EndTime"
        DataKeyField="ApptID" DataSourceID="SqlDataSource1" DataStartField="StartTime"
        DataSubjectField="Subject" DayEndTime="21:00:00"
        DisplayRecurrenceActionDialogOnMove="True" Height="700px"
        SelectedView="WeekView" ShowAllDayRow="False"
        ShowFooter="False" TimeZoneID="US Mountain Standard Time"
        TimeZoneOffset="-07:00:00" WorkDayEndTime="18:00:00"
        DataDescriptionField="Description"
        EnableDescriptionField="True" DataRecurrenceField="Recurrence"
    DataRecurrenceParentKeyField="RecurrencePartentID"
    DataReminderField="Reminder" style="margin-left: 3px"
        HoursPanelTimeFormat="htt" TimeLabelRowSpan="1">
        <ResourceTypes>
            <telerik:ResourceType DataSourceID="SqlDataSource2" ForeignKeyField="PatientID"
                KeyField="PatientID" Name="Patient" TextField="PatientName" />
            <telerik:ResourceType DataSourceID="SqlDataSource5" ForeignKeyField="StatusID"
                KeyField="ReasonID" Name="Status" TextField="Appointment" />
            <telerik:ResourceType DataSourceID="SqlDataSource7"
                ForeignKeyField="TherapistID" KeyField="EmployeeID" Name="Theraist"
                TextField="TherapistName" />
        </ResourceTypes>
        <AppointmentTemplate>
        <div class="AppointmentTemplate <%# Eval("Status.Text") %>">
            <h4><%# Eval("Subject") %></h4>
        </div>
        </AppointmentTemplate>
        <Localization HeaderTimeline="All Therapist " HeaderToday="Today" />
        <TimelineView GroupBy="Therapist"
            GroupingDirection="Vertical" />
        <MultiDayView ShowHoursColumn="False" />
        <Reminders Enabled="True" />
    </telerik:RadScheduler>
    </div>



    </div>
    </div>


    <asp:SqlDataSource ID="SqlDataSource5" runat="server"
        ConnectionString="<%$ ConnectionStrings:H2T2SQLConnectionString %>"
        SelectCommand="SELECT [Appointment], [ReasonID] FROM [StatusInfo]">
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
        ConnectionString="<%$ ConnectionStrings:Insurance InfoConnectionString1 %>"

        SelectCommand="SELECT ApptID, RecurrencePartentID, PatientID, TherapistID, StatusID, TimeZoneID, StartTime, EndTime, Subject, Description, Reminder, Recurrence, LastModified FROM Schedule WHERE (TherapistID = @TherapistID)"
        DeleteCommand="DELETE FROM [Schedule] WHERE [ApptID] = @ApptID"
        InsertCommand="INSERT INTO [Schedule] ([RecurrencePartentID], [PatientID], [TherapistID], [StatusID], [TimeZoneID], [StartTime], [EndTime], [Subject], [Description], [Reminder], [Recurrence], [LastModified]) VALUES (@RecurrencePartentID, @PatientID, @TherapistID, @StatusID, @TimeZoneID, @StartTime, @EndTime, @Subject, @Description, @Reminder, @Recurrence, @LastModified)"





        UpdateCommand="UPDATE [Schedule] SET [RecurrencePartentID] = @RecurrencePartentID, [PatientID] = @PatientID, [TherapistID] = @TherapistID, [StatusID] = @StatusID, [TimeZoneID] = @TimeZoneID, [StartTime] = @StartTime, [EndTime] = @EndTime, [Subject] = @Subject, [Description] = @Description, [Reminder] = @Reminder, [Recurrence] = @Recurrence, [LastModified] = @LastModified WHERE [ApptID] = @ApptID">
        <DeleteParameters>
            <asp:Parameter Name="ApptID" Type="Int32" />
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="RecurrencePartentID" Type="Int32" />
            <asp:Parameter Name="PatientID" Type="Int32" />
            <asp:Parameter Name="TherapistID" Type="Int32" />
            <asp:Parameter Name="StatusID" Type="Int32" />
            <asp:Parameter Name="TimeZoneID" Type="String" />
            <asp:Parameter Name="StartTime" Type="DateTime" />
            <asp:Parameter Name="EndTime" Type="DateTime" />
            <asp:Parameter Name="Subject" Type="String" />
            <asp:Parameter Name="Description" Type="String" />
            <asp:Parameter Name="Reminder" Type="String" />
            <asp:Parameter Name="Recurrence" Type="String" />
            <asp:Parameter Name="LastModified" Type="String" />
        </InsertParameters>
        <SelectParameters>
            <asp:ControlParameter ControlID="ListBox1" Name="TherapistID"
                PropertyName="SelectedValue" Type="Int32" />
        </SelectParameters>
        <UpdateParameters>
            <asp:Parameter Name="RecurrencePartentID" Type="Int32" />
            <asp:Parameter Name="PatientID" Type="Int32" />
            <asp:Parameter Name="TherapistID" Type="Int32" />
            <asp:Parameter Name="StatusID" Type="Int32" />
            <asp:Parameter Name="TimeZoneID" Type="String" />
            <asp:Parameter Name="StartTime" Type="DateTime" />
            <asp:Parameter Name="EndTime" Type="DateTime" />
            <asp:Parameter Name="Subject" Type="String" />
            <asp:Parameter Name="Description" Type="String" />
            <asp:Parameter Name="Reminder" Type="String" />
            <asp:Parameter Name="Recurrence" Type="String" />
            <asp:Parameter Name="LastModified" Type="String" />
            <asp:Parameter Name="ApptID" Type="Int32" />
        </UpdateParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource2" runat="server"
        ConnectionString="<%$ ConnectionStrings:H2T2SQLConnectionString %>"

        SelectCommand="SELECT PatientID, PatientFirstName, PatientLastName, PatientDOB, PatientLastName + ' ' + PatientFirstName AS PatientName FROM Patients ORDER BY PatientLastName">
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource3" runat="server"
        ConnectionString="<%$ ConnectionStrings:H2T2SQLConnectionString %>"


        SelectCommand="SELECT EmployeeID, TherapistFirstName, TherapistLastName, Occupation, TherapistLastName + ' ' + TherapistFirstName + ' ' + Occupation AS TherapistName FROM Therapist WHERE (Occupation = N'SLP') OR (Occupation = N'SLPA') ORDER BY TherapistLastName">
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource7" runat="server"
        ConnectionString="<%$ ConnectionStrings:H2T2SQLConnectionString %>"
        SelectCommand="SELECT EmployeeID, TherapistFirstName + ' ' + TherapistLastName AS TherapistName FROM Therapist WHERE (EmployeeID = @EmployeeID)">
        <SelectParameters>
            <asp:ControlParameter ControlID="ListBox1" DefaultValue="32" Name="EmployeeID"
                PropertyName="SelectedValue" />
        </SelectParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource4" runat="server"
        ConnectionString="<%$ ConnectionStrings:H2T2SQLConnectionString %>"
        SelectCommand="SELECT Appointment FROM StatusInfo WHERE (NOT (Appointment IS NULL))">
    </asp:SqlDataSource>
</asp:Content>

[Boyan Dimitrov]

Hello Alex,

We already discussed your issue in the support thread that you opened. I will post the solution so it will be available for community.

I inspected the provided project and I did some modifications in order to show you how to apply styles to RadScheduler resources. Please take a look at  the <ResourceStyles> section in the markup code where you can define style for each type and text property. Please check our RadScheduler resources on-line demos.


Regards,
Boyan Dimitrov
the Telerik team