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

TimeView Templates

 
Open the time view popup.
The example demonstrates how to use the HeaderTemplate, TimeTemplate, AlternatingTimeTemplate and FooterTemplate properties of the RadTimePicker control in order to customize the look of the control.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page CodeFile="DefaultVB.aspx.vb" Language="vb" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Calendar.DateTimePicker.Templates.DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function ClosePopup() {
                var dateTimePicker = $find("<%= RadTimePicker1.ClientID %>");
                dateTimePicker.hideTimePopup();
            }
        </script>
    </telerik:RadCodeBlock>
    <div class="demo-container no-bg" style="max-width: 748px" runat="server" id="containerDiv">
        <div class="mainWrap">
            <div class="pickerWrap">
                <label for="RadTimePicker1_dateInput_text">
                    Start time:</label>
                &nbsp;
            <telerik:RadTimePicker RenderMode="Lightweight" ID="RadTimePicker1" Skin="Metro" runat="server"  style="display:inline-block;width:110px;">
                <TimeView runat="server" BorderStyle="None" BackColor="#2a3508" StartTime="09:00:00"
                    EndTime="17:00:10">
                    <HeaderTemplate>
                        <div class="headerTemplate">
                            Time Picker
                        </div>
                    </HeaderTemplate>
                    <TimeTemplate>
                        <div class="itemt">
                            <%# DataBinder.Eval(Container, "DataItem.Time", "{0:hh:mm tt}") %>
                        </div>
                    </TimeTemplate>
                    <AlternatingTimeTemplate>
                        <div class="itemt">
                            <%# DataBinder.Eval(Container, "DataItem.Time", "{0:hh:mm tt}") %>
                        </div>
                    </AlternatingTimeTemplate>
                    <FooterTemplate>
                        <div class="footerTemplate">
                            <button onclick="javascript:ClosePopup();return false;">
                                Close</button>
                        </div>
                    </FooterTemplate>
                </TimeView>
                <DateInput BackColor="#89980c">
                </DateInput>
                <TimePopupButton HoverImageUrl="images/clockHover.gif" ImageUrl="images/clock.gif"></TimePopupButton>
            </telerik:RadTimePicker>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance