Different Colors of appointment by changing status

2 posts, 1 answers
  1. Alex
    Alex avatar
    16 posts
    Member since:
    May 2012

    Posted 26 Sep 2012 Link to this post

    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>
  2. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2035 posts

    Posted 28 Sep 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top