Scheduler - Customizing the Time Slots

  • today
December, 2011
December, 2011
SMTWTFS
    123
45678910
11121314151617
18192021222324
25262728293031
       
Dec, 2011
  • Day
  • Week
  • Month
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Average daily temperature: 8°C
Mountain trip
Average daily temperature: 5°C
Average daily temperature: 3°C
Average daily temperature: -2°C
FootBall Tournament
Average daily temperature: 2°C
Average daily temperature: 14°C
Skiing in the Alps
Average daily temperature: -2°C
Average daily temperature: -7°C
Average daily temperature: 5°C
Average daily temperature: 3°C
Average daily temperature: 13°C
Start of the Holiday
Average daily temperature: 12°C
Average daily temperature: -5°C
  • New Appointment
  • New Recurring Appointment
  • Set Weather Forecast
    • Sunny
    • Cloudy
    • Rainy
    • Snowy
  • Remove Weather Forecast
  • Set Temperature
    • Click here to set Temperature
  • Go to today
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This example shows how to customize time slots by handling TimeSlotCreated event to set the CssClass property of the time slot or to insert controls, such a label for the temperature for a given day.

In Month View you can change the background image of a time slot with the context menu to show the whether forecast for that day.

Week View shows how special time slots can be disabled. In this case the time for lunch break and the non-working hours are Disabled.

In order to change the "Weather" image of a time slot, right-click on it and select the desired subItem of the "Set Weather Forecast" menu item.

You can also set the "Temperature" in any day of the month by using the RadSplitter under the "Set Temperature" context menu item.

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

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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 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:RadScriptBlock runat="Server" ID="RadScriptBlock1">
        <script type="text/javascript" src="scripts.js"></script>
    </telerik:RadScriptBlock>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadScheduler1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
     <div class="demo-container no-bg">
        <telerik:RadScheduler RenderMode="Lightweight" runat="server" ID="RadScheduler1" SelectedView="MonthView"
            DataSourceID="AppointmentsDataSource" OnAppointmentCancelingEdit="RadScheduler1_AppointmentCancelingEdit"
            OnClientAppointmentMoveEnd="OnClientAppointmentMoveEnd" ShowFullTime="false"
            ShowAllDayRow="false" OnClientAppointmentInserting="OnClientAppointmentInserting"
            DataKeyField="ID" DataSubjectField="Subject" DataStartField="Start" DataEndField="End"
            DataRecurrenceField="RecurrenceRule" DataRecurrenceParentKeyField="RecurrenceParentID"
            StartInsertingInAdvancedForm="true" OnTimeSlotCreated="RadScheduler1_TimeSlotCreated"
            OnTimeSlotContextMenuItemClicking="RadScheduler1_TimeSlotContextMenuItemClicking"
            NumberOfHoveredRows="0" EnableRecurrenceSupport="false" SelectedDate="2011-12-25"
            OnPreRender="RadScheduler1_PreRender" WorkDayEndTime="20:00:00" WorkDayStartTime="08:00:00"
            DayEndTime="23:00:00" DayStartTime="06:00:00" OverflowBehavior="Expand">
            <TimelineView UserSelectable="false" />
            <TimeSlotContextMenus>
                <telerik:RadSchedulerContextMenu runat="server" ID="SchedulerTimeSlotContextMenu"
                    OnClientItemOpening="OnClientItemOpening">
                    <Items>
                        <telerik:RadMenuItem Text="New Appointment" Value="CommandAddAppointment">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="New Recurring Appointment" Value="CommandAddRecurringAppointment">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem IsSeparator="true">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Set Weather Forecast" Value="set">
                            <Items>
                                <telerik:RadMenuItem Text="Sunny" Value="Sunny">
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Cloudy" Value="Cloudy">
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Rainy" Value="Rainy">
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Snowy" Value="Snowy">
                                </telerik:RadMenuItem>
                            </Items>
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem IsSeparator="true">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Remove Weather Forecast" Value="Remove">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Set Temperature" Value="set">
                            <Items>
                                <telerik:RadMenuItem Text="AverageTemperature" Value="AverageTemperature">
                                    <ItemTemplate>
                                        <telerik:RadSlider RenderMode="Lightweight" runat="server" ID="RadSlider1" MinimumValue="-10" MaximumValue="30"
                                            ItemType="Tick" SmallChange="1" LargeChange="5" Height="45" TrackPosition="BottomRight">
                                        </telerik:RadSlider>
                                        <asp:Label ID="label1" runat="server" CssClass="temperatureLabel" Text="Click here to set Temperature"></asp:Label>
                                    </ItemTemplate>
                                </telerik:RadMenuItem>
                            </Items>
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Go to today" Value="CommandGoToToday">
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadSchedulerContextMenu>
            </TimeSlotContextMenus>
            <TimelineView GroupingDirection="Vertical" NumberOfSlots="7"></TimelineView>
        </telerik:RadScheduler>
        <asp:SqlDataSource ID="AppointmentsDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString35 %>"
            SelectCommand="SELECT * FROM [Appointments]" InsertCommand="INSERT INTO [Appointments] ([Subject], [Start], [End], [RoomID], [UserID], [RecurrenceRule], [RecurrenceParentID]) VALUES (@Subject, @Start, @End , @RoomID, @UserID, @RecurrenceRule, @RecurrenceParentID)"
            UpdateCommand="UPDATE [Appointments] SET [Subject] = @Subject, [Start] = @Start, [End] = @End, [RoomID] = @RoomID, [UserID] = @UserID, [RecurrenceRule] = @RecurrenceRule, [RecurrenceParentID] = @RecurrenceParentID 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="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>
            </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="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>
            </InsertParameters>
        </asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?