Datepicker/Calendar displaying unwanted caption space

[Jaite]

I've been trying to resolve an issue with my RadCalendar/Datepicker with Telerik, maybe with bootstrap messing up things.

After upgrading to bootstrap 5 the calendar displays 2 extra caption spaces below the title and below the calendar. How can I remove these caption spaces? I have something simple like this in a row.

<div class='col2'
<telerik:raddatepicker id="1234" mindate:"5/5/5555" calendar-showheaders="false" calendar-tltleformat="mmm yyyy" skin="telirek"
</telerick:raddatepicker>
</div>

[Attila Antal]

Hi Jaite,

There are a couple of errors that you will need to correct.

1. IDs of Controls cannot start with numbers, you will need to provide another ID starting with letters e.g. MyPicker1234
2. The MinDate "5/5/5555" would also throw and error because this date is after the MaxDate. The Default MaxDate is "12/31/2099", so you will need to define a MaxDate that will be after the MinDate. e.g. "5/5/6666"
3. Recent versions of the Calendar have no property called "Calendar-ShowHeader". They have "Calendar-ShowColumnHeaders" and "Calendar-ShowRowHeaders" properties. Consider fixing that too.
4. There is no built-in Skin named "telirek", and if you're using a Custom Skin, be sure to disable the Embedded Skins by setting the "EnableEmbeddedSkins" property to "False". Or if you were trying to use the built-in Skin, correct the name to "Telerik".

 

I have tried the following markup with Bootstrap v5 and is working as expected:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        <asp:ScriptReference Path="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" />
    </Scripts>
</telerik:RadScriptManager>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<div class="col2">
    <telerik:RadDatePicker ID="RadDatePicker1" runat="server" MinDate="5/5/5555" MaxDate="5/5/6666" Calendar-ShowColumnHeaders="false" Calendar-ShowRowHeaders="false" Calendar-TitleFormat="mmm yyyy" Skin="Telerik">
    </telerik:RadDatePicker>
</div>

 

Regards,
Attila Antal
Progress Telerik