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

Multi-Month View

January 2022 - April 2022
January 2022 - April 2022
Jan 22
Jan 22
 SMTWTFS
532627282930311
22345678
39101112131415
416171819202122
523242526272829
6303112345
Feb 22
Feb 22
 SMTWTFS
6303112345
76789101112
813141516171819
920212223242526
10272812345
116789101112
Mar 22
Mar 22
 SMTWTFS
10272812345
116789101112
1213141516171819
1320212223242526
14272829303112
153456789
Apr 22
Apr 22
 SMTWTFS
14272829303112
153456789
1610111213141516
1717181920212223
1824252627282930
191234567
  • Demo Configurator
Dispaly2 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.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page CodeFile="DefaultVB.aspx.vb" Language="vb" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Calendar.Functionality.MultiMonthView.DefaultVB" %>

<%@ 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" Label="Dispaly" AutoPostBack="true" 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