Scheduler - Exact Time Rendering

  • today
April, 2012
April, 2012
SMTWTFS
       
1234567
891011121314
15161718192021
22232425262728
2930     
Monday, April 16, 2012
  • Day
  • Week
  • Timeline
Teachers
Students
all day
7AM
 
8AM
 
9AM
 
10AM
 
11AM
 
12PM
 
1PM
 
2PM
 
3PM
 
4PM
 
5PM
 
Show 24 hours...
  • Edit
  • Delete
  • New Appointment
  • New Recurring Appointment
  • Go to today
  • Show 24 hours...
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The Exact Time Rendering functionality increases readability of the scheduled appointment's sequence by rendering it at its exact Start and End time corresponding with the timeslots around. Please, uncheck the 'Enable Exact Time Rendering' checkbox, positioned just below and you will instantly get the difference that it makes.

For example:
  • Having appointment starting at 9:00am and finishing at 9:30am (if 9:00am is the beginning of a time slot), was rendered the same as appointment starting at 9:25am and finishing at 9:26am.

Exact Time Rendering can be enabled on the server through the EnableExactTimeRendering property of RadScheduler.
            <telerik:RadScheduler runat="server" ID="RadScheduler1" EnableExactTimeRendering="true">
    
            </telerik:RadScheduler>
        
Also it can be selectively enabled/disabled for the supported views, too, which have the same property in their settings. The supported views currently are:
  • DayView;
  • MultiDayView;
  • WeekView;
  • TimelineView.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Scheduler.Examples.ExactTimeRendering.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="Stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container">
        <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1">
             <telerik:RadButton RenderMode="Lightweight" ID="btnToggle" runat="server" ToggleType="CheckBox" ButtonType="LinkButton" CssClass="exactTimeButton" OnClick="btnToggle_Click" Checked="true">
                 <ToggleStates>
                       <telerik:RadButtonToggleState Text="Enable Exact Time Rendering On" PrimaryIconCssClass="rbToggleRadioChecked" />
                       <telerik:RadButtonToggleState Text="Enable Exact Time Rendering Off" PrimaryIconCssClass="rbToggleRadio" />
                 </ToggleStates>
             </telerik:RadButton>
            <telerik:RadScheduler RenderMode="Lightweight" runat="server" ID="RadScheduler1" EnableExactTimeRendering="true" OnLoad="RadScheduler1_Load"
                SelectedView="DayView" SelectedDate="2012-04-16" DayStartTime="07:00" FirstDayOfWeek="Monday"
                LastDayOfWeek="Friday" StartEditingInAdvancedForm="true" EnableDescriptionField="true"
                AppointmentStyleMode="Default" GroupBy="Calendar" GroupingDirection="Horizontal"
                OverflowBehavior="Auto">
                <AdvancedForm Modal="true"></AdvancedForm>
                <TimelineView GroupBy="Calendar" GroupingDirection="Vertical" StartTime="08:00" SlotDuration="00:30:00"
                    NumberOfSlots="16" ColumnHeaderDateFormat="hh:mm"></TimelineView>
                <MonthView UserSelectable="false"></MonthView>
                <WebServiceSettings Path="SchedulerWebService.asmx" ResourcePopulationMode="ServerSide">
                </WebServiceSettings>
                <ResourceStyles>
                    <telerik:ResourceStyleMapping Type="Calendar" Text="Teachers" BackColor="#D0ECBB"
                        BorderColor="#B0CC9B"></telerik:ResourceStyleMapping>
                    <telerik:ResourceStyleMapping Type="Calendar" Text="Students" ApplyCssClass="rsCategoryRed"></telerik:ResourceStyleMapping>
                </ResourceStyles>
                <TimeSlotContextMenuSettings EnableDefault="true"></TimeSlotContextMenuSettings>
                <AppointmentContextMenuSettings EnableDefault="true"></AppointmentContextMenuSettings>
            </telerik:RadScheduler>
        </telerik:RadAjaxPanel>
        <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
        </telerik:RadAjaxLoadingPanel>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?