Silk skin

Calendar - Multi-Month View

October, 2019 - January, 2020
October, 2019 - January, 2020
Oct 19
Oct 19
 SMTWTFS
40293012345
416789101112
4213141516171819
4320212223242526
44272829303112
453456789
Nov 19
Nov 19
 SMTWTFS
44272829303112
453456789
4610111213141516
4717181920212223
4824252627282930
491234567
Dec 19
Dec 19
 SMTWTFS
4824252627282930
491234567
50891011121314
5115161718192021
5222232425262728
532930311234
Jan 20
Jan 20
 SMTWTFS
532930311234
2567891011
312131415161718
419202122232425
52627282930311
62345678

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?