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

[Solved] TimeLine View

4 Answers 194 Views

Scheduler

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

4 Answers, 1 is accepted

answered on 07 Oct 2009, 10:04 AM

Hi,
The code below, please I am looking forward for you replay to solve the problem.

Thanks
Ban Shareef

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadSchedular.aspx.cs" Inherits="Calender_NewCalendar" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <%@ Register Src="../UserControls/Header.ascx" TagName="Header" TagPrefix="HeaderUserControl" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server">  
        
                <title>Shared Calendar</title> 
        
                <style type="text/css">  
        
                    div.RadScheduler .rsAptContent, div.RadScheduler .rsAptIn, div.RadScheduler .rsAptMid, div.RadScheduler .rsAptOut   
        
                    {  
        
                        background-image: none !important;  
        
                        background: none;  
        
                        wrap:true;  
        
                    }  
        
                    .RadScheduler_Office2007 .rsTimelineView .rsWrap,     
        
                    .RadScheduler_Office2007 .rsTimelineView .rsApt     
        
                    {     
        
                        height:auto !important;    
        
                        position:relative !important;     
        
                    }     
        
                </style> 
        
            </head> 
        
            <body style=" padding-top:0px ; height:100%; "  LEFTMARGIN=0 TOPMARGIN=0 bgcolor="#F7F9FC">  
        
              <form id="Calendarform" runat="server" style="padding:0px,0px,0px,0px; height:100%">  
        
                 <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> 
        
                 <table style="height:600px; width:100% ;" height="100%" align="center" cellpadding="0px" cellspacing="0px" BORDER=0   > 
        
                     <tr height="100%" style="height:100%; width:100%">  
        
                        <td> 
        
                          <table style="width:1100px; height:100% ; margin-top:0px; " align="center" CELLPADDING=0 CELLSPACING=0>  
        
                              <tr id="MainContent" > 
        
                                 <td id="RightSide" style="vertical-align:top; padding-top:10px" > 
        
                                   <telerik:RadAjaxPanel ID="LeftRadAjaxPane" runat="server" LoadingPanelID="LoadingPanelPic">  
        
                                     <table width="100%">  
        
                                         <tr> 
        
                                            <td> 
        
                                                <div id="Div1" style="width:935px">  
        
                                                  <telerik:RadScheduler   
        
                                                    runat="server"   
        
                                                    ID="EventsRadScheduler"   
        
                                                    ShowFooter="true"   
        
                                                    Height="100%"    
        
                                                    Width="100%"   
        
                                                    ShowViewTabs="false" 
        
                                                    SelectedView="TimelineView" 
        
                                                    ShowNavigationPane="false" 
        
                                                    AllowDelete="false" 
        
                                                    AllowEdit="false" 
        
                                                    SelectedDate="7/1/2009" 
        
                                                    DataKeyField="ID" 
        
                                                    DataStartField="StartDate"   
        
                                                    DataEndField="EndDate"   
        
                                                    DataSubjectField="ShortSummary"   
        
                                                    DataRecurrenceField="RecurrenceRule"   
        
                                                    DataRecurrenceParentKeyField="RecurrenceParentID"   
        
                                                    StartEditingInAdvancedForm="False"   
        
                                                    TimelineView-UserSelectable="false"   
        
                                                    ValidationGroup="EventsRadScheduler"    
        
                                                    Skin="Office2007" 
        
                                                    ColumnWidth="100px" 
        
                                                    DataSourceID="CalendarSqlDataSource"   
        
                                                    OnAppointmentCreated="EventsRadScheduler_AppointmentCreated"   
        
                                                    MonthVisibleAppointmentsPerDay="4">  
        
                                                    <TimelineView NumberOfSlots="31" HeaderDateFormat="M" /> 
        
                                                    <ResourceTypes> 
        
                                                        <telerik:ResourceType DataSourceID="CalendarSqlDataSource" 
        
                                                                ForeignKeyField="EventTypeID" 
        
                                                                KeyField="EventTypeID"   
        
                                                                Name="EventTypeID"   
        
                                                                TextField="EventTypeID" /> 
        
                                                        <telerik:ResourceType KeyField="ID"   
        
                                                                Name="StaffMember"   
        
                                                                TextField="EnglishName"   
        
                                                                ForeignKeyField="StaffMemberID" 
        
                                                                DataSourceID="StaffSqlDataSource" /> 
        
                                                    </ResourceTypes> 
        
                                                  </telerik:RadScheduler> 
        
                                                    &nbsp;<br /> 
        
                                               </div> 
        
                                               <asp:SqlDataSource ID="CalendarSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:StaffInfoConnectionString %>" CancelSelectOnNullParameter="true"   
        
                                                   SelectCommand="SELECT * FROM [Event] Where EventTypeID = @EventTypeID or @EventTypeID = 0" > 
        
                                                   <SelectParameters> 
        
                                                       <asp:Parameter DefaultValue="0" Name="EventTypeID" Type="Int32" /> 
        
                                                   </SelectParameters> 
        
                                               </asp:SqlDataSource> 
        
                                               <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:StaffInfoConnectionString %>" 
        
                                                    SelectCommand="SELECT * From UserEventsView WHERE (Trust_StaffMemberID = @StuffMemberID) Or (EventTypeID = 4)">  
        
                                                    <SelectParameters> 
        
                                                        <asp:Parameter Name="StuffMemberID" /> 
        
                                                    </SelectParameters> 
        
                                               </asp:SqlDataSource> 
        
                                               <br /> 
        
                                               <asp:SqlDataSource ID="StaffSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:StaffInfoConnectionString %>" 
        
                                                   SelectCommand="SELECT [ID], [EnglishName] FROM [StaffMember]">  
        
                                               </asp:SqlDataSource> 
        
                                               <asp:SqlDataSource ID="OMTStaffSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:StaffInfoConnectionString %>" 
        
                                                   SelectCommand="SELECT [ID], [EnglishName] FROM [StaffMember] Where UserRole=1 Or UserRole=2">  
        
                                               </asp:SqlDataSource> 
        
                                               <telerik:RadAjaxLoadingPanel ID="LoadingPanelPic" runat="server" Transparency="1"   
        
                                                       Height="1px" Width="16px">  
        
                                                       <img alt="Loading..." src="../Images/loading.gif"   
        
                                                            style="margin-top: 100px; vertical-align:super" /> 
        
                                               </telerik:RadAjaxLoadingPanel> 
        
                                            </td> 
        
                                         </tr> 
        
                                      </table> 
        
                                  </telerik:RadAjaxPanel> 
        
                                 </td> 
        
                             </tr> 
        
                          </table> 
        
                       </td> 
        
                     </tr> 
        
                   </table> 
        
              </form> 
        
            </body> 
        
            </html>

answered on 09 Oct 2009, 01:44 PM

Hello Ban,

I believe the problem is related to your custom css styles:

<style type="text/css">

div.RadScheduler .rsAptContent, div.RadScheduler .rsAptIn, div.RadScheduler .rsAptMid, div.RadScheduler .rsAptOut

{

background-image: none !important;

background: none;

wrap:true;

}

.RadScheduler_Office2007 .rsTimelineView .rsWrap,

.RadScheduler_Office2007 .rsTimelineView .rsApt

{

height:auto !important;

position:relative !important;

}

</style>

You have probably used those styles to set custom background color to your appointments. The good news is that with the current version 2009.2.826( Q2 2009 SP1) you no longer need this workaround since we have introduced 4 new properties which allow you to easily style the appointments:

BackColor
BorderColor
BorderStyle
BorderWidth

For more information, please see this help topic:

http://www.telerik.com/help/aspnet-ajax/schedule_howtoset_different_styles_for_appointments.html

Regards,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.