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

Property Explorer

  • today
April 2012
April 2012
SMTWTFS
       
1234567
891011121314
15161718192021
22232425262728
2930     
Monday, April 16, 2012
  • Day
  • Week
  • Month
  • Timeline
  • Multi-day
all day
test 1
8:00
9:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
wee woo waa2
cdfffff
test123xxx
Stylist Appointment
sssssssssssssssssssssssssssssssss
CFS- 646431
this is an APPT.
sssss
ssss
test
sfdzgdsdsdsg
fdsfsadfsafs
ssssssssssssssssssss
dfghjkl
aaaaaaaaaaaaaaa
Show 24 hours...
  • Edit
  • Delete
  • New Appointment
  • New Recurring Appointment
  • Go to today
  • Show 24 hours...
  • Demo Configurator
  • Overflow behaviorAuto
  • Appointment color
    Pick Color(Current Color is blank)
  • Row header width85px
  • Hours panel time formatH:mm
  • Time label row span2

RadScheduler exposes many properties that allow you to customize its appearance.

The individual parts such as header and footer might be turned on or off. The format of the dates displayed in various places can also be customized.

Setting WorkDayStartTime and WorkDayEndTime causes RadScheduler to apply the rsNonWorkHour class to days that do not fall in the specified range. You can customize the appearance of non working days with the following CSS selector:

.RadScheduler_Vista .rsNonWorkHour { background-color: #f5fcff; }

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" Inherits="Scheduler.Examples.Customization.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="sds" Namespace="Telerik.Web.SessionDS" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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 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 no-bg">
        <telerik:RadAjaxLoadingPanel runat="Server" ID="RadAjaxLoadingPanel1">
        </telerik:RadAjaxLoadingPanel>

        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadScheduler RenderMode="Lightweight" runat="server" ID="RadScheduler1" SelectedDate="2012-04-16"
            DayStartTime="08:00:00" DayEndTime="18:00:00"
            DataSourceID="AppointmentsDataSource" DataKeyField="ID" DataStartField="Start"
            DataEndField="End" DataSubjectField="Subject" DataRecurrenceField="RecurrenceRule"
            DataRecurrenceParentKeyField="RecurrenceParentID" DataReminderField="Reminder"
            DataTimeZoneIdField="TimeZoneID" AppointmentStyleMode="Default" OnAppointmentCreated="RadScheduler1_AppointmentCreated"
            TimeZoneID="FLE Standard Time" OnAppointmentDataBound="RadScheduler1_AppointmentDataBound">
            <AdvancedForm Modal="true"></AdvancedForm>
            <WeekView HeaderDateFormat="d"></WeekView>
            <ResourceTypes>
                <telerik:ResourceType KeyField="ID" Name="Room" TextField="RoomName" ForeignKeyField="RoomID"
                    DataSourceID="RoomsDataSource"></telerik:ResourceType>
                <telerik:ResourceType KeyField="ID" Name="User" TextField="UserName" ForeignKeyField="UserID"
                    DataSourceID="UsersDataSource"></telerik:ResourceType>
            </ResourceTypes>
            <AppointmentTemplate>
                <div>
                    <%# Eval("Subject") %>
                </div>
                <div style="font-style: italic;">
                    <%# Eval("Description") %>
                </div>
            </AppointmentTemplate>
            <TimeSlotContextMenuSettings EnableDefault="true"></TimeSlotContextMenuSettings>
            <AppointmentContextMenuSettings EnableDefault="true"></AppointmentContextMenuSettings>
        </telerik:RadScheduler>
    </div>

    <asp:SqlDataSource ID="AppointmentsDataSource" runat="server"
        ProviderName="System.Data.SqlClient" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString35 %>"
        SelectCommand="SELECT * FROM [Appointments]"
        InsertCommand="INSERT INTO [Appointments] ([Subject], [Start], [End], [Description], [RoomID], [UserID], [RecurrenceRule], [RecurrenceParentID], [TimeZoneID]) VALUES (@Subject, @Start, @End , @Description , @RoomID, @UserID, @RecurrenceRule, @RecurrenceParentID, @TimeZoneID)"
        UpdateCommand="UPDATE [Appointments] SET [Subject] = @Subject, [Start] = @Start, [End] = @End, [Description] = @Description, [RoomID] = @RoomID, [UserID] = @UserID, [RecurrenceRule] = @RecurrenceRule, [RecurrenceParentID] = @RecurrenceParentID, [TimeZoneID] = @TimeZoneID WHERE (ID = @ID)"
        DeleteCommand="DELETE FROM [Appointments] WHERE [ID] = @ID">
        <DeleteParameters>
            <asp:Parameter Name="ID" Type="Int32"></asp:Parameter>
        </DeleteParameters>
        <UpdateParameters>
            <asp:Parameter Name="ID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="Subject" Type="String"></asp:Parameter>
            <asp:Parameter Name="Start" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="End" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="Description" Type="String"></asp:Parameter>
            <asp:Parameter Name="RoomID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="UserID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="RecurrenceRule" Type="String"></asp:Parameter>
            <asp:Parameter Name="RecurrenceParentID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="TimeZoneID" Type="String"></asp:Parameter>
        </UpdateParameters>
        <InsertParameters>
            <asp:Parameter Name="Subject" Type="String"></asp:Parameter>
            <asp:Parameter Name="Start" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="End" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="Description" Type="String"></asp:Parameter>
            <asp:Parameter Name="RoomID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="UserID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="RecurrenceRule" Type="String"></asp:Parameter>
            <asp:Parameter Name="RecurrenceParentID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="TimeZoneID" Type="String"></asp:Parameter>
        </InsertParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="RoomsDataSource" runat="server" 
        ProviderName="System.Data.SqlClient" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString35 %>"
        SelectCommand="SELECT * FROM [Rooms]">
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="UsersDataSource" runat="server" 
        ProviderName="System.Data.SqlClient" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString35 %>"
        SelectCommand="SELECT * FROM [Users]">
    </asp:SqlDataSource>
    <qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server">
        <Views>
            <qsf:View Title="Entire Scheduler Properties" runat="server">
                <ul class="fb-group">
                    <li>
                        <qsf:DropDownList runat="server" ID="OverflowBehavior" AutoPostBack="true" Label="Overflow behavior">
                            <Items>
                                <telerik:DropDownListItem Value="Auto" Text="Auto" Selected="true" />
                                <telerik:DropDownListItem Value="Scroll" Text="Scroll" />
                                <telerik:DropDownListItem Value="Expand" Text="Expand" />
                            </Items>
                        </qsf:DropDownList>
                    </li>
                    <li>
                        <asp:CheckBox ID="AdvancedFormEnabled" runat="server" Text="AdvancedFormEnabled" AutoPostBack="true" Checked="true" />
                    </li>
                    <li>
                        <asp:CheckBox ID="StartInsertingInAdvancedForm" runat="server" Text="StartInsertingInAdvancedForm" AutoPostBack="true" />
                    </li>
                    <li>
                        <asp:CheckBox ID="StartEditingInAdvancedForm" runat="server" Text="StartEditingInAdvancedForm" AutoPostBack="true" Checked="true" />
                    </li>
                    <li>
                        <asp:CheckBox ID="AdvancedFormModal" runat="server" Text="AdvancedFormModal" AutoPostBack="true" Checked="true"  />
                    </li>
                    <li>
                        <asp:CheckBox ID="EnableResourceEditing" runat="server" Text="EnableResourceEditing" AutoPostBack="true"  Checked="true" />
                    </li>
                    <li>
                        <asp:CheckBox ID="EnableCustomAttributeEditing" runat="server" Text="EnableCustomAttributeEditing" AutoPostBack="true" Checked="true"  />
                    </li>
                    <li>
                        <asp:CheckBox ID="TimeSlotContextMenuSettingsEnableDefault" runat="server" Text="TimeSlotContextMenuSettingsEnableDefault" AutoPostBack="true"  Checked="true" />
                    </li>
                    <li>
                        <asp:CheckBox ID="EnableTimeZonesEditing" runat="server" Text="EnableTimeZonesEditing" AutoPostBack="true" />
                    </li>
                </ul>
            </qsf:View>
            <qsf:View Title="Appointments Properties" runat="server">
                <ul class="fb-group">
                    <li>
                        <asp:CheckBox ID="AllowInsert" runat="server" Text="AllowInsert" AutoPostBack="true" Checked="true"  />
                    </li>
                    <li>
                        <asp:CheckBox ID="AllowEdit" runat="server" Text="AllowEdit" AutoPostBack="true" Checked="true"  />
                    </li>
                    <li>
                        <asp:CheckBox ID="AllowDelete" runat="server" Text="AllowDelete" AutoPostBack="true" Checked="true"  />
                    </li>
                    <li>
                        <asp:CheckBox ID="DisplayDeleteConfirmation" runat="server" Text="DisplayDeleteConfirmation" AutoPostBack="true" />
                    </li>
                    <li>
                        <asp:CheckBox ID="DisplayRecurrenceActionDialogOnMove" runat="server" Text="DisplayRecurrenceActionDialogOnMove" AutoPostBack="true" />
                    </li>
                    <li>
                        <asp:CheckBox ID="EnableDescriptionField" runat="server" Text="EnableDescriptionField" AutoPostBack="true" Checked="true"  />
                    </li>
                    <li>
                        <asp:CheckBox ID="AppointmentContextMenuSettingsEnableDefault" runat="server" Text="AppointmentContextMenuSettingsEnableDefault" AutoPostBack="true"  Checked="true" />
                    </li>
                    <li>
                        <qsf:ColorPicker ID="RadColorPickerColorAppointments" runat="server" AutoPostBack="true" Label="Appointment color"
                            Height="300px" PaletteModes="HSV" ShowIcon="true">
                        </qsf:ColorPicker>
                    </li>
                </ul>
            </qsf:View>
            <qsf:View Title="Header and Footer Properties" runat="server">
                <ul class="fb-group">
                    <li>
                        <asp:CheckBox ID="ShowHeader" runat="server" Text="ShowHeader" AutoPostBack="true" Checked="true"  />
                    </li>
                    <li>
                        <asp:CheckBox ID="ShowNavigationPane" runat="server" Text="ShowNavigationPane" AutoPostBack="true" Checked="true"  />
                    </li>
                    <li>
                        <asp:CheckBox ID="ShowViewTabs" runat="server" Text="ShowViewTabs" AutoPostBack="true" Checked="true"  />
                    </li>
                    <li>
                        <asp:CheckBox ID="EnableDatePicker" runat="server" Text="EnableDatePicker" AutoPostBack="true" Checked="true"  />
                    </li>
                    <li>
                        <asp:CheckBox ID="DayView" runat="server" Text="DayView" AutoPostBack="true" Checked="true"  />
                    </li>
                    <li>
                        <asp:CheckBox ID="WeekView" runat="server" Text="WeekView" AutoPostBack="true" Checked="true"  />
                    </li>
                    <li>
                        <asp:CheckBox ID="MonthView" runat="server" Text="MonthView" AutoPostBack="true" Checked="true"  />
                    </li>
                    <li>
                        <asp:CheckBox ID="TimelineView" runat="server" Text="TimelineView" AutoPostBack="true" Checked="true"  />
                    </li>
                    <li>
                        <asp:CheckBox ID="MultiDayView" runat="server" Text="MultiDayView" AutoPostBack="true" Checked="true"  />
                    </li>
                    <li>
                        <asp:CheckBox ID="CheckBoxShowFooter" runat="server" Text="CheckBoxShowFooter" AutoPostBack="true" Checked="true"  />
                    </li>
                </ul>
            </qsf:View>
            <qsf:View Title="Hours Column Properties" runat="server">
                <ul class="fb-group">
                    <li>
                        <asp:CheckBox ID="ShowHoursColumn" runat="server" Text="ShowHoursColumn" AutoPostBack="true" Checked="true"  />
                    </li>
                    <li>
                        <qsf:DropDownList runat="server" ID="RowHeaderWidth" AutoPostBack="true" Label="Row header width">
                            <Items>
                                <telerik:DropDownListItem Value="65px" Text="65px"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Value="85px" Text="85px" Selected="true"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Value="100px" Text="100px"></telerik:DropDownListItem>
                            </Items>
                        </qsf:DropDownList>

                    </li>
                    <li>
                        <qsf:DropDownList runat="server" ID="HoursPanelTimeFormat" AutoPostBack="true" Label=" Hours panel time format">
                            <Items>
                                <telerik:DropDownListItem Value="H:mm" Text="H:mm" Selected="true"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Value="H:mm:ss" Text="H:mm:ss"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Value="t" Text="t"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Value="T" Text="T"></telerik:DropDownListItem>
                            </Items>
                        </qsf:DropDownList>
                    </li>
                    <li>
                        <qsf:DropDownList runat="server" ID="TimeLabelRowSpan" AutoPostBack="true" Label="Time label row span">
                            <Items>
                                <telerik:DropDownListItem Value="1" Text="1"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Value="2" Text="2" Selected="true"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Value="3" Text="3"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Value="4" Text="4"></telerik:DropDownListItem>
                            </Items>
                        </qsf:DropDownList>
                    </li>
                </ul>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance