Progress® Telerik® UI for ASP.NET AJAX Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 02 Nov 2021 07:58 by ADMIN
David Pike
Created on: 14 Apr 2020 13:48
Category: Calendar
Type: Bug Report
1
The month view columns are not properly aligned when the ShowOtherMonthsDays="False"

When MultiViewColumns > 2 the the month views of the Calendar are not aligned properly. The problem occurs if the week count in the months is different and the ShowOtherMonthsDays property is set to false.

Temporary workaround: Set the ShowOtherMonthsDays="True" property of RadCalendar.

 

Code to reproduce:

        <telerik:RadCalendar ID="cal1" runat="server" Skin="Outlook"
            MultiViewColumns="3" ShowOtherMonthsDays="False" AutoPostBack="True" RenderMode="Lightweight">
        </telerik:RadCalendar>
 

1 comment
ADMIN
Doncho
Posted on: 02 Nov 2021 07:58

A possible workaround is to keep the ShowOtherMonthsDays to false, and use JavaSript code to manipulate the <td> elements representing the dates, so they are styled by the built-in CSS as if they contain an anchor with a specific day:

<telerik:RadCalendar RenderMode="Lightweight" ID="RadCalendar2" runat="server" AutoPostBack="true" EnableMultiSelect="true" MultiViewColumns="4" MultiViewRows="3"
    EnableWeekends="false" ShowOtherMonthsDays="false" ShowRowHeaders="false">
    <ClientEvents OnLoad="restyleCalendarCells" OnCalendarViewChanged="restyleCalendarCells" />
</telerik:RadCalendar>

<script>
    function restyleCalendarCells(sender, args) {
        var $ = $telerik.$;
        $(sender.get_element()).find('td.rcOtherMonth').each(function () {
            if (!$(this).text().trim()) {
                this.innerHTML = '<a href="#" style="pointer-events:none">&nbsp;</a>'
            }
        })
    }
</script>

Create an account Log In
View
Type
Status
Category