New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

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...

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 above the scheduler, and you will instantly see 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>
<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:RadCheckBox runat="server" ID="rckbExactTimeRendering" Checked="true" Text="Enable Exact Time Rendering" OnCheckedChanged="rckbExactTimeRendering_CheckedChanged" CssClass="exactTimeButton"></telerik:RadCheckBox>
            <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>

Support & Learning Resources

Find Assistance