Scheduler - Multiple Instances

  • today
April, 2012
April, 2012
SMTWTFS
       
1234567
891011121314
15161718192021
22232425262728
2930     
4/16/2012
all day
8AM
 
9AM
 
10AM
 
11AM
 
12PM
 
1PM
 
2PM
 
3PM
 
4PM
 
5PM
 
Appointment with the dentist.
Lunch
  • Edit
  • Delete
  • New Appointment
  • New Recurring Appointment
  • Go to today
  • Show 24 hours...
April, 2012
April, 2012
SMTWTFS
       
1234567
891011121314
15161718192021
22232425262728
2930     
Apr, 2012
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Bob's birthday
Call Charlie about the Project
Bowling tournament
Breakfast
Appointment with the dentist.
more...
Meeting with Alex
Math exam
Take the car to the service
History exam
Grand Canyon tour
  • Edit
  • Delete
  • New Appointment
  • New Recurring Appointment
  • Go to today
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This application scenario shows how multiple instances of Scheduler could be combined in one application. You can add, delete or edit an event through any of the instances, either the day or the month view.

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

<%@ Register TagPrefix="sds" Namespace="Telerik.Web.SessionDS" %>
<%@ 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 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" />
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <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="RadScheduler2" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadScheduler2">
                <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:RadSplitter RenderMode="Lightweight" runat="server" ID="RadSplitter1" Height="482px" Width="100%">
            <telerik:RadPane runat="server" ID="CalendarPane" Scrolling="None" MinWidth="500"
                OnClientResizing="hideScrollableArea" OnClientResized="showScrollableArea" OnClientExpanding="hideScrollableArea"
                OnClientExpanded="showScrollableArea" OnClientCollapsing="hideScrollableArea"
                OnClientCollapsed="showScrollableArea">
                <telerik:RadScheduler RenderMode="Lightweight" runat="server" ID="RadScheduler1" Width="100%" StartEditingInAdvancedForm="false"
                    SelectedDate="2012-04-16" DayStartTime="08:00:00" DayEndTime="18:00:00"
                    SelectedView="DayView" ShowHeader="true" ShowViewTabs="false" DataRecurrenceParentKeyField="RecurrenceParentID"
                    OnFormCreating="RadScheduler1_FormCreating" OnAppointmentDelete="RadScheduler1_AppointmentDelete"
                    OnAppointmentInsert="RadScheduler1_AppointmentInsert" OnAppointmentUpdate="RadScheduler1_AppointmentUpdate"
                    OnNavigationComplete="RadScheduler1_NavigationComplete" ShowFooter="false" Height="480px">
                    <DayView HeaderDateFormat="d"></DayView>
                    <TimeSlotContextMenuSettings EnableDefault="true"></TimeSlotContextMenuSettings>
                    <AppointmentContextMenuSettings EnableDefault="true"></AppointmentContextMenuSettings>
                </telerik:RadScheduler>
            </telerik:RadPane>
            <telerik:RadSplitBar runat="server" CollapseMode="Forward" ID="RadSplitBar1">
            </telerik:RadSplitBar>
            <telerik:RadPane runat="server" ID="SchedulerPane" MinWidth="350" Width="700px" Scrolling="None">
                <telerik:RadScheduler RenderMode="Lightweight" runat="server" ID="RadScheduler2" Height="480px" SelectedDate="2012-04-16"
                    DayStartTime="08:00:00" DayEndTime="18:00:00" Width="100%"
                    SelectedView="MonthView" ShowHeader="true" ShowViewTabs="false" ShowNavigationPane="false"
                    ShowFooter="true" OnAppointmentDelete="RadScheduler2_AppointmentDelete" OnAppointmentInsert="RadScheduler2_AppointmentInsert"
                    OnAppointmentUpdate="RadScheduler2_AppointmentUpdate" OnNavigationComplete="RadScheduler2_NavigationComplete">
                    <AdvancedForm Modal="true"></AdvancedForm>
                    <TimeSlotContextMenuSettings EnableDefault="true"></TimeSlotContextMenuSettings>
                    <AppointmentContextMenuSettings EnableDefault="true"></AppointmentContextMenuSettings>
                </telerik:RadScheduler>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?