Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

How to select the container for the calendar popup wrapper?

9 Answers 218 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Gregory
Top achievements
Rank 2
Gregory asked on 25 Oct 2019, 04:10 PM

My overall goal is to use a raddatepicker where weekend days and federal holidays are disabled. On PageLoad, the date picker is populated with a date which could be as far as 5 years in the future.

So far I have implemented the solution given by Eyup in this thread and get the almost desired result with OnDayRender.

However, by doing this, when i click on the calendar icon to show the calendar popup, it does a full post back. My understand is because the calendar popup wrapper is outside my ajax panel, right under the <body>.

How can i force the calendar popup wrapper to be created in my ajax panel?

Thank you

Gregory

9 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 30 Oct 2019, 10:16 AM

Hi Gregory,

All you have to do is to ajaxify RadDatePicker with the RadAjaxManager:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadDatePicker1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadDatePicker1"  />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadDatePicker ID="RadDatePicker1" runat="server" Skin="Sunset" OnDayRender="RadCalendar1_DayRender"
    AutoPostBack="true" MultiViewColumns="2">
</telerik:RadDatePicker>

This will prevent the full page postback.

Best regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Gregory
Top achievements
Rank 2
answered on 30 Oct 2019, 01:30 PM
screenshota5aa0fb8b2b34d8081efd2d5b00881de.png

Hello Rumen,

I have tried this before without success. In your demo, you place the server event on the RadDatePicker and not the calendar. By doing so, my server event is not called. I have attached an image to show the a specific holiday was not caught.

In Eyup's thread, the OnDayRender event is on the Calendar element as well as the AutoPostBack property.

<telerik:RadCalendar ID="RadCalendar1" runat="server" AutoPostBack="true"
    OnDayRender="RadCalendar1_DayRender">
</telerik:RadCalendar>

 

My server event is following:

protected void RadCalendar1_DayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e)
    {
        List<DateTime> holidays = new List<DateTime>() { new DateTime(2019, 11, 28) };
        if (e.Day.Date.DayOfWeek == DayOfWeek.Saturday || e.Day.Date.DayOfWeek == DayOfWeek.Sunday)
        {
            (sender as RadCalendar).SpecialDays.Add(DisableDay(e));
            e.Cell.CssClass = "weekend-day";
        }
        else if (holidays.Contains(e.Day.Date))
        {
            (sender as RadCalendar).SpecialDays.Add(DisableDay(e));
            e.Cell.CssClass = "disabled-day";
            e.Cell.ToolTip = "Federal Holiday";
        }
    }
    private RadCalendarDay DisableDay(Telerik.Web.UI.Calendar.DayRenderEventArgs e)
    {
        e.Cell.CssClass = "rcOtherMonth";
        return new RadCalendarDay()
        {
            Date = e.Day.Date,
            IsDisabled = true,
            IsSelectable = false,
        };
    }

 

 

0
Rumen
Telerik team
answered on 04 Nov 2019, 01:58 PM

Hi Gregody,

Here is a working demo with a datepicker and its calendar in the dropdown:

 

ASPX:

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .rcOtherMonth { border: 1px solid blue !important;}
        .weekend-day { border: 1px solid yellow !important; }
        .disabled-day { border: 1px solid red !important; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="sm1" runat="server"></telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadDatePicker1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadDatePicker1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadDatePicker ID="RadDatePicker1" runat="server"  
            AutoPostBack="true" MultiViewColumns="2">
            <Calendar runat="server" OnDayRender="RadCalendar1_DayRender"></Calendar>
        </telerik:RadDatePicker>
    </form>
</body>
</html>

 

Codebehind:

 

using System;
using System.Collections.Generic;
using Telerik.Web.UI;

public partial class Default6 : System.Web.UI.Page
{
    protected void RadCalendar1_DayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e)
    {
        List<DateTime> holidays = new List<DateTime>() { new DateTime(2019, 11, 28) };
        if (e.Day.Date.DayOfWeek == DayOfWeek.Saturday || e.Day.Date.DayOfWeek == DayOfWeek.Sunday)
        {
            RadDatePicker1.Calendar.SpecialDays.Add(DisableDay(e));
            e.Cell.CssClass = "weekend-day";
        }
        else if (holidays.Contains(e.Day.Date))
        {
            (sender as RadCalendar).SpecialDays.Add(DisableDay(e));
            e.Cell.CssClass = "disabled-day";
            e.Cell.ToolTip = "Federal Holiday";
        }
    }
    private RadCalendarDay DisableDay(Telerik.Web.UI.Calendar.DayRenderEventArgs e)
    {
        e.Cell.CssClass = "rcOtherMonth";
        return new RadCalendarDay()
        {
            Date = e.Day.Date,
            IsDisabled = true,
            IsSelectable = false,
        };
    }
}

 

Regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Gregory
Top achievements
Rank 2
answered on 05 Nov 2019, 07:13 PM
screenshot_1.png

Rumen,

Thanks for the last answer. It seems to work fine at one exception.The format does not seem to apply to all the days in the calendar but just a couple of weeks.

On the page load, my date picker is initialized to, let's say, December 5th. I can see that the weekend days of November are disabled as well as December 1st and 7th but then it stops. Any reasons for that?

I attached a screenshot to show that.

Thank you

 

 

0
Rumen
Telerik team
answered on 06 Nov 2019, 02:57 PM

Hi Gregory,

Can you please share your test page and its codebehind to test it on my side?

Regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Gregory
Top achievements
Rank 2
answered on 06 Nov 2019, 03:19 PM

Rumen,
Thanks for taking the time on this. See below.
Thanks, Gregory

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test2.aspx.cs" Inherits="test_test2" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server" id="masterHead">
    <title>TEST</title>
    <link rel="icon" href="../favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <script type="text/javascript" src="/js/jquery-1.5.min.js"></script>
    <link rel="Stylesheet" type="text/css" href="/RadControls/Skin/Grid/Grid.eCdInvestor.css" />
    <link rel="Stylesheet" type="text/css" href="/RadControls/Skin/Grid/Grid.eCdDepositor.css" />
    <link rel="Stylesheet" type="text/css" href="/RadControls/Skin/Grid/Grid.MaturityAlert.css" />
    <link rel="Stylesheet" type="text/css" href="/RadControls/Skin/Grid/Grid.Type1.css" />
 
    <link rel="Stylesheet" type="text/css" href="/RadControls/Skin/Calendar/Calendar.Cdrl.css" />
    <link rel="Stylesheet" type="text/css" href="/RadControls/Skin/Input/Input.Cdrl.css" />
    <link rel="Stylesheet" type="text/css" href="/RadControls/Skin/Menu/Menu.Cdrl.css" />
    <link rel="Stylesheet" type="text/css" href="/Css/mycss.css" media="screen" />
    <script type="text/javascript" src="/js/myjs.js"></script>
     
    <style type="text/css">
         
        .disabled-day{
            background: #fff;
        }
        .disabled-day span, .disabled-day a{
            color: red !important;
        }
        .weekend-day{
            background: #fff;
        }
        .weekend-day span, .weekend-day a{
            color: #b9b8b8 !important;
        }
    </style>
    
</head>
 
<body class="template1" style="margin:100px; width:100px; height:100px;">
    <form id="form1" runat="server">
    <asp:ScriptManager ID="smMain" runat="server" />
     
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadDatePicker1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadDatePicker1" LoadingPanelID="ralp"/>
                        <telerik:AjaxUpdatedControl ControlID="lit" LoadingPanelID="ralp"/>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
 
        <telerik:RadAjaxLoadingPanel ID="ralp" runat="server" Transparency="50" BackColor="LightGray">
            <img alt="Loading..." src="/RadControls/loading.gif"
                style="border:0; padding-top:35px;" />
        </telerik:RadAjaxLoadingPanel>
 
        <telerik:RadDatePicker ID="rdp1" runat="server" AutoPostBack="true">
        <Calendar runat="server" OnDayRender="RadCalendar1_DayRender"></Calendar>
    </telerik:RadDatePicker>
 
        <asp:Literal ID="lit" runat="server"></asp:Literal>
    </form>
</body>
</html>

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
 
public partial class test_test2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, System.EventArgs e)
    {
        if (!Page.IsPostBack)
            rdp1.SelectedDate = new DateTime(2019, 12, 31);
    }
    protected void RadCalendar1_DayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e)
    {
        List<DateTime> holidays = new List<DateTime>() { new DateTime(2019, 11, 28) };
        if (e.Day.Date.DayOfWeek == DayOfWeek.Saturday || e.Day.Date.DayOfWeek == DayOfWeek.Sunday)
        {
            (sender as RadCalendar).SpecialDays.Add(DisableDay(e));
            e.Cell.CssClass = "weekend-day";
        }
        else if (holidays.Contains(e.Day.Date))
        {
            (sender as RadCalendar).SpecialDays.Add(DisableDay(e));
            e.Cell.CssClass = "disabled-day";
            e.Cell.ToolTip = "Federal Holiday";
        }
    }
    private RadCalendarDay DisableDay(Telerik.Web.UI.Calendar.DayRenderEventArgs e)
    {
        e.Cell.CssClass = "rcOtherMonth";
        return new RadCalendarDay()
        {
            Date = e.Day.Date,
            IsDisabled = true,
            IsSelectable = false,
        };
    }
}
0
Rumen
Telerik team
answered on 06 Nov 2019, 04:16 PM

Thank you!

The behavior is due to that the OnDayRender event is executed only for one month, due to performance reasons.

What you can do is to set the EnableWeekends="false" property 

        <telerik:RadDatePicker ID="rdp1" runat="server" AutoPostBack="true">
            <Calendar runat="server" OnDayRender="RadCalendar1_DayRender" EnableWeekends="false">
            </Calendar>
        </telerik:RadDatePicker>

and style the weekends with the following class:

    .rcWeekend.rcDisabled {
        background: #fff !important;
    }

 

Regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Gregory
Top achievements
Rank 2
answered on 06 Nov 2019, 04:42 PM

Thank you Rumen.

It makes sense for performance reasons to do it only for one month at time. Is there a way to select the date range on which the OnDayRender is executed?

In my scenario, the DatePicker is fetched with a date on page load which might be up to 5 years in the feature so I would prefer this chosen date to be surrounded from 2 weeks before to 2 weeks after with the correct disable days in terms of weekend and holidays too.

Thank you

0
Accepted
Rumen
Telerik team
answered on 11 Nov 2019, 02:24 PM

You are welcome, Gregory!

If you have a standalone calendar on the page you can configure the control to execute the OnDayRender server event when changing the months by setting the AutoPostBack property of the control to true:

<telerik:RadCalendar id="RadCalendar1" runat="server" 
   AutoPostBack="true" 
OnDayRender="RadCalendar1_DayRender"></telerik:RadCalendar>

This approach is not applicable, however, for the RadDatePicker since the AutoPostBack="true" property of its nested calendar reloads the entire popup when changing the month:

<telerik:RadDatePicker  ID="rdp1" runat="server" AutoPostBack="true">
    <Calendar runat="server" OnDayRender="RadCalendar1_DayRender" AutoPostBack="true"></Calendar>
</telerik:RadDatePicker>
So the available options are to:

  1. Implement the whole logic on the client by using the ClientEvents-OnDayRender client event and a hidden field to obtain the serialized to JSON information for the special days so that you can specify them on the client. You can see this forum post for more information:  RadDatePicker -- Only Enable Special Dates.
  2. or use the EnableWeekends="false" as suggested in my earlier response along with the CSS Class override  - .rcWeekend.rcDisabled.

Best Regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Calendar
Asked by
Gregory
Top achievements
Rank 2
Answers by
Rumen
Telerik team
Gregory
Top achievements
Rank 2
Share this question
or