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

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
Not Determined
Average daily temperature: -5°C
autre 2
Average daily temperature: 8°C
autre
Mountain trip
Average daily temperature: 5°C
TEST2
TEST
Average daily temperature: 2°C
Not Determined
Average daily temperature: 14°C
vvvvv
Nro Reserva: 20202 Cliente: Juan Perez Producto: chocolate, Rosas
Custom slot
Average daily temperature: -2°C
sdafg
Not Determined
Average daily temperature: 5°C
test
Average daily temperature: 3°C
Skiing in the Alps
Hello
Average daily temperature: 13°C
Average daily temperature: 3°C
Start of the Holiday
Average daily temperature: 12°C
Average daily temperature: 1°C
test
Average daily temperature: -5°C
Average daily temperature: 15°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

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

Support & Learning Resources

Find Assistance