This is a migrated thread and some comments may be shown as answers.

Different Colors of appointment by changing status

1 Answer 47 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 26 Sep 2012, 07:12 PM
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>

1 Answer, 1 is accepted

Sort by
0
Accepted
Boyan Dimitrov
Telerik team
answered on 28 Sep 2012, 03:11 PM
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.
Tags
Scheduler
Asked by
Alex
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Share this question
or