Silk skin

Calendar - Multi-Month View

February, 2019 - May, 2019
February, 2019 - May, 2019
Feb 19
Feb 19
 SMTWTFS
5272829303112
63456789
710111213141516
817181920212223
9242526272812
103456789
Mar 19
Mar 19
 SMTWTFS
9242526272812
103456789
1110111213141516
1217181920212223
1324252627282930
1431123456
Apr 19
Apr 19
 SMTWTFS
1431123456
1578910111213
1614151617181920
1721222324252627
182829301234
19567891011
May 19
May 19
 SMTWTFS
182829301234
19567891011
2012131415161718
2119202122232425
222627282930311
232345678

Demo Configurator

Display2 row x 2 columns

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

Telerik RadCalendar supports Multi-Month rendering style. The Multi-Month view can be achived by setting the MultiViewColumns and MultiViewRows properties to the desired values (e.g. MultiViewColumns="2" MultiViewRows="2").

You need to set AutoPostBack of RadCalendar to true in order to use Multi-Month mode.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Calendar.Functionality.MultiMonthView.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!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>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container" style="max-width: 890px" runat="server" id="containerDiv">
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadCalendar1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadCalendar1"></telerik:AjaxUpdatedControl>
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="DropDownList1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadCalendar1"></telerik:AjaxUpdatedControl>
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadCalendar RenderMode="Lightweight" ID="RadCalendar1" runat="server" AutoPostBack="true" MultiViewColumns="2"
                MultiViewRows="2" EnableMultiSelect="false" OnPreRender="RadCalendar1_PreRender">
            </telerik:RadCalendar>
        </div>
    </div>
    <qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server" Orientation="Vertical">
        <Views>
            <qsf:View>
                <qsf:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" Label="Display" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                    <Items>
                        <telerik:DropDownListItem Text="1 row x 2 columns" Value="1x2"></telerik:DropDownListItem>
                        <telerik:DropDownListItem Text="1 row x 3 columns" Value="1x3"></telerik:DropDownListItem>
                        <telerik:DropDownListItem Text="2 row x 2 columns" Value="2x2" Selected="True"></telerik:DropDownListItem>
                        <telerik:DropDownListItem Text="3 row x 4 columns" Value="3x4"></telerik:DropDownListItem>
                    </Items>
                </qsf:DropDownList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    <br />
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?