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

Agenda View

  • today
January 2012
January 2012
SMTWTFS
       
1234567
891011121314
15161718192021
22232425262728
293031    
31/January - 6/February
Date
Time
Appointment
31Tuesday January, 2012 11:00 AM - 12:00 PM
Budget Committee Meeting
1Wednesday February, 2012 9:00 PM »
Visual Studio Integration Conference
9:00 PM »
DevMedia conference
2Thursday February, 2012 » all day »
Visual Studio Integration Conference
» all day »
DevMedia conference
7:00 AM - 8:30 AM
Review Ad Campaign Results
7:00 AM - 8:00 AM
Product planning
11:00 AM - 12:00 PM
OpenAccess Presentation
12:00 PM - 1:00 PM
.NET User Group Meeting
2:00 PM - 3:00 PM
Media Planning meeting
3Friday February, 2012 » all day »
Visual Studio Integration Conference
» 9:00 PM
DevMedia conference
8:00 AM - 9:00 AM
TDD Presentation
9:00 AM - 10:00 AM
ASP.NET MVC Presentation
12:00 PM - 1:00 PM
Evangelist Webinar
4Saturday February, 2012 » 9:00 PM
Visual Studio Integration Conference
7:00 AM - 8:00 AM
Interview with Junior WPF Developer candidate
5Sunday February, 2012 8:00 AM - 9:00 AM
Interview for Senior Silverlight Developer
6Monday February, 2012 7:00 AM - 8:00 AM
MCPD Exam
11:00 AM - 12:00 PM
Integration Partners Conference Call
  • Edit
  • Delete
  • New Appointment
  • New Recurring Appointment
  • Go to today
  • Configuration
  • Agenda View Properties
  • Grouping Settings
  • NumberOfDays7
  • HeaderDateFormatd/MMMM
  • DateColumnWidth150px
  • TimeColumnWidth150px
  • AppointmentColumnWidthAuto
  • ResourceMarkerTypeBar
  • GroupBy
  • GroupingDirection
  • ResourceColumnWidth

Agenda View provides the ability to edit appointments in two ways - either by using the in-line form or the advanced form of RadScheduler. Further, by setting the ResourceMarkerType property of the RadScheduler you can easily see the resources that are assigned to each appointment (here we used differently colored bars and blocks).

The AppointmentContextMenu provides another way to edit and delete appointments in the Agenda View.

RadScheduler is able to show its appointments in an Agenda View, which is designed to show appointments in a simple table layout. Once you set the SelectedView property to AgendaView you can use the NumberOfDays property to define the length of the period you want to show in the view.

The width of each row can be easily changed by using some of the following properties: DateColumnWidth, TimeColumnWidth, ResourceColumnWidth.

Agenda View also supports two different views for grouping the resources - Horizontal and Vertical. Note that the resources can be grouped by Date and Resource.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" Inherits="Scheduler.Examples.AgendaView.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>
<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="Configuratorpanel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="Configuratorpanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadScheduler RenderMode="Lightweight" runat="server" ID="RadScheduler1" SelectedDate="2012-01-31" SelectedView="AgendaView">
            <AdvancedForm Modal="true"></AdvancedForm>
            <WeekView UserSelectable="false" />
            <DayView UserSelectable="false" />
            <MultiDayView UserSelectable="false" />
            <TimelineView UserSelectable="false" />
            <MonthView UserSelectable="false" />
            <AgendaView UserSelectable="false" />
            <ResourceStyles>
                <telerik:ResourceStyleMapping Type="Calendar" Text="Development" ApplyCssClass="rsCategoryBlue"></telerik:ResourceStyleMapping>
                <telerik:ResourceStyleMapping Type="Calendar" Text="Marketing" ApplyCssClass="rsCategoryOrange"></telerik:ResourceStyleMapping>
                <telerik:ResourceStyleMapping Type="Calendar" Text="Work" ApplyCssClass="rsCategoryGreen"></telerik:ResourceStyleMapping>
                <telerik:ResourceStyleMapping Type="Calendar" Text="Personal" ApplyCssClass="rsCategoryRed"></telerik:ResourceStyleMapping>
            </ResourceStyles>
            <TimeSlotContextMenuSettings EnableDefault="true"></TimeSlotContextMenuSettings>
            <AppointmentContextMenuSettings EnableDefault="true"></AppointmentContextMenuSettings>
        </telerik:RadScheduler>
    </div>
    <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server" Title="Configuration">
        <Views>
            <qsf:View runat="server" Title="Agenda View Properties">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <asp:CheckBox ID="ShowColumnHeaders" runat="server" Checked="true" AutoPostBack="true" Text="ShowColumnHeaders" />

                            <asp:CheckBox ID="ShowDateHeaders" runat="server" AutoPostBack="true" Checked="true" Text="ShowDateHeaders" />
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="NumberOfDays" AutoPostBack="true" Label="NumberOfDays">
                                <Items>
                                    <telerik:DropDownListItem Value="1" Text="1"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="7" Text="7" Selected="true"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="10" Text="10"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="30" Text="30"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="HeaderDateFormat" AutoPostBack="true" Label="HeaderDateFormat">
                                <Items>
                                    <telerik:DropDownListItem Value="d/MMMM" Text="d/MMMM" Selected="true"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="dd/MMM" Text="dd/MMM"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="ddd/MM" Text="ddd/MM"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="dddd" Text="dddd"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="DateColumnWidth" AutoPostBack="true" Label="DateColumnWidth">
                                <Items>
                                    <telerik:DropDownListItem Value="" Text="Auto"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="150" Text="150px" Selected="true"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="200" Text="200px"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" ID="TimeColumnWidth" AutoPostBack="true" Label="TimeColumnWidth">
                                <Items>
                                    <telerik:DropDownListItem Value="" Text="Auto"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="150" Text="150px" Selected="true"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="200" Text="200px"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="AppointmentColumnWidth" AutoPostBack="true" Label="AppointmentColumnWidth">
                                <Items>
                                    <telerik:DropDownListItem Value="" Text="Auto" Selected="true"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="100" Text="100px"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="200" Text="200px"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="300" Text="300px"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="ResourceMarkerType" AutoPostBack="true" Label="ResourceMarkerType">
                                <Items>
                                    <telerik:DropDownListItem Value="None" Text="None"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="Bar" Text="Bar" Selected="true"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="Block" Text="Block"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
            <qsf:View ID="View1" Title="Grouping Settings" runat="server">
                <ul class="fb-group">
                    <li>
                        <span class="label">GroupBy</span>
                        <asp:RadioButtonList ID="GroupBy" runat="server" AutoPostBack="true" OnSelectedIndexChanged="GroupBy_SelectedIndexChanged">
                            <asp:ListItem Text="None" Value="" Selected="True"></asp:ListItem>
                            <asp:ListItem Text="Calendar" Value="Calendar"></asp:ListItem>
                            <asp:ListItem Text="Date, Calendar" Value="Date, Calendar"></asp:ListItem>
                        </asp:RadioButtonList>
                    </li>
                    <li>
                        <span class="label">GroupingDirection</span>
                        <asp:RadioButtonList ID="GroupingDirection" runat="server" AutoPostBack="true" OnSelectedIndexChanged="GroupingDirection_SelectedIndexChanged">
                            <asp:ListItem Text="Horizontal" Value="Horizontal"></asp:ListItem>
                            <asp:ListItem Text="Vertical" Value="Vertical"></asp:ListItem>
                        </asp:RadioButtonList>
                    </li>
                    <li>
                        <asp:CheckBox ID="ShowResourceHeaders" runat="server" AutoPostBack="true" Text="ShowResourceHeaders" />
                    </li>
                    <li>
                        <span class="label">ResourceColumnWidth</span>
                        <asp:RadioButtonList ID="ResourceColumnWidth" runat="server" AutoPostBack="true">
                            <asp:ListItem Value="100" Text="100px" Selected="true"></asp:ListItem>
                            <asp:ListItem Value="150" Text="150px"></asp:ListItem>
                        </asp:RadioButtonList>
                    </li>
                </ul>
            </qsf:View>
            <qsf:View></qsf:View>
            <qsf:View></qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance