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

Multi-Month View

May 2024 - August 2024
May 2024 - August 2024
May 24
May 24
 SMTWTFS
182829301234
19567891011
2012131415161718
2119202122232425
222627282930311
232345678
Jun 24
Jun 24
 SMTWTFS
222627282930311
232345678
249101112131415
2516171819202122
2623242526272829
2730123456
Jul 24
Jul 24
 SMTWTFS
2730123456
2878910111213
2914151617181920
3021222324252627
3128293031123
3245678910
Aug 24
Aug 24
 SMTWTFS
3128293031123
3245678910
3311121314151617
3418192021222324
3525262728293031
361234567
  • Demo Configurator
Display2 row x 2 columns

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

Support & Learning Resources

Find Assistance