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

Fill Cell (Day) in Month View

2 Answers 52 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Phil
Top achievements
Rank 1
Phil asked on 29 Aug 2011, 10:31 PM

I am tryin to use RadScheduler to display a month-vew with 5-6 events a month in the calendar. Each event has a Subject, start time, end time and description that needs to be displayed. None of the events will be on the same day. How can I get these events to fill up the entire cell (day) in the scheduler so that all of the info is visible (about 85 pixels high)? Adjusting the row height allows for this display but it also makes each cell longer and I can not fit the entire calendar in a single screen without scrolling. My code is as follows:

<telerik:RadScheduler ID="RadScheduler1" runat="server" DataDescriptionField="description"
           DataEndField="end_time" DataKeyField="pk_training_session_id" DataSourceID="SqlDataSource1"
           DataStartField="start_time" DataSubjectField="session_type" EnableDescriptionField="True"
           FirstDayOfWeek="Monday" Height="550px" LastDayOfWeek="Friday" SelectedView="MonthView"
           CustomAttributeNames="registration_link">
           <AppointmentTemplate>
               <div style="margin-bottom: 4px;">
                   <b>
                       <asp:HyperLink ID="RegistrationLinkHyperLink" runat="server" Text='<%# Eval("Subject") %>'
                           NavigateUrl='<%# Eval("registration_link") %>' ToolTip="Click to Register"></asp:HyperLink>
                   </b>
               </div>
               <div>
                   <span style="width: 60px; display: inline-block;">Start Time:</span>  <%# Eval("Start", "{0:t}") %></div>
               <div style="margin-bottom: 4px;">
                   <span style="width: 60px; display: inline-block;">End Time:</span>  <%# Eval("End", "{0:t}") %></div>
               <p>
                   <%# Eval("Description") %>
               </p>
           </AppointmentTemplate>
       </telerik:RadScheduler>


Does anyone know of a solution?

2 Answers, 1 is accepted

Sort by
0
Ivana
Telerik team
answered on 31 Aug 2011, 11:56 AM
Hi Phil,

You could achieve the desired appearance of the appointments with CSS.

Here is how I did it in my example (the scheduler is bound to an xml provider):
CSS:
<style type="text/css">
        div.RadScheduler .rsAptOut > .rsAptMid, div.RadScheduler .rsAptMid > .rsAptIn, div.RadScheduler .rsAptIn > .rsAptContent
        {
            height: 70px;
        }
        div.rsDateWrap
        {
            height: 16px !important;
        }
        div.RadScheduler_[skinName] .rsMonthView .rsTodayCell
        {
            background-color: #CCFF00;
            color: blue;
            border: 1px solid #000;
        }
    </style>

ASPX:
<telerik:RadScheduler runat="server" ID="RadScheduler1" Skin="Windows7" Height="551px"
    ShowFooter="false" SelectedDate="2009-02-02" TimeZoneOffset="03:00:00" DayStartTime="08:00:00"
    DayEndTime="21:00:00" FirstDayOfWeek="Monday" LastDayOfWeek="Friday" EnableDescriptionField="true"
    AppointmentStyleMode="Default">
    <AppointmentTemplate>
        <div>
            Subject:
            <%# Eval("Subject") %></div>
        <div style="font-style: italic;">
            Description:
            <%# Eval("Description") %></div>
        <div style="font-style: italic;">
            Start:
            <%# Eval("Start")%></div>
        <div style="font-style: italic;">
            End:
            <%# Eval("End") %></div>
    </AppointmentTemplate>
</telerik:RadScheduler>

Hope this helps.

Regards,
Ivana
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

0
Phil
Top achievements
Rank 1
answered on 01 Sep 2011, 04:13 PM
Thanks! I figured that would be the route to take. Your CSS worked great. 
Tags
Scheduler
Asked by
Phil
Top achievements
Rank 1
Answers by
Ivana
Telerik team
Phil
Top achievements
Rank 1
Share this question
or