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

Multi-Month View

June 2023 - September 2023
June 2023 - September 2023
Jun 23
Jun 23
 SMTWTFS
2228293031123
2345678910
2411121314151617
2518192021222324
262526272829301
272345678
Jul 23
Jul 23
 SMTWTFS
262526272829301
272345678
289101112131415
2916171819202122
3023242526272829
31303112345
Aug 23
Aug 23
 SMTWTFS
31303112345
326789101112
3313141516171819
3420212223242526
35272829303112
363456789
Sep 23
Sep 23
 SMTWTFS
35272829303112
363456789
3710111213141516
3817181920212223
3924252627282930
401234567
  • 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