Disable some Date in the Rad date Picker

[Karthick Purushothaman]

Hi,
 
How to disable the some Date in the Rad Date Picker. I can  be able to disable the date in the Calender control. But i cant be able to acvhieve this in the Date picker.

Can anyone help me  to solve this issue.

Thanks and Regards,
Sushanth Mathew

[Pavlina]

Hello Karthick,

For more information about how to disable calendar days in the calendar component of RadDatePicker, please refer to the following article:
Code Library

Best wishes,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Princy]

Hi Karthik,

Try following approach in order to disable the day in RadDatePicker.

.aspx

<telerik:RadDatePicker ID="RadDatePicker1" runat="server">
    <Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x">
        <SpecialDays>
            <telerik:RadCalendarDay Date="2009-06-12" IsSelectable="False" IsDisabled="True">
            </telerik:RadCalendarDay>
        </SpecialDays>
        <DisabledDayStyle BackColor="#FFE0C0" />
    </Calendar>
</telerik:RadDatePicker>

You can also try disabling day from code behind as shown below.
.cs

protected void Button1_Click(object sender, EventArgs e)
{
    RadCalendarDay calendarDay = new RadCalendarDay();
    DateTime dt = new DateTime(2009, 06, 20); // Date to disable
    calendarDay.Date = dt.Date;
    calendarDay.IsDisabled = true;
    calendarDay.IsSelectable = false;
    RadDatePicker1.Calendar.SpecialDays.Add(calendarDay);
}

Also checkout the code library:
Disabling calendar days

-Princy.

[Karthick Purushothaman]

Hi,

I can be able to disable some date in the popup calender in the date picker. But when i navigate to next month and come back to the current month i can be able to select those disable dates. At that time disabling is not happen.

Ex: For the current month i can be able to disable selecting  "Sunday" but when i navigate to next month i can be able to select "Sunday" also. In this case disabling is not happen.

Susahnth Mathew

[Pavlina]

Hello Karthick,

In order to persist the changes I suggest that you disable the days in RadDatePicker using DayRender event.
Find more information in the following article:
DayRender Event

Best wishes,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[JB]

Hi,

I followed the example you have given and the DayRender demo. However the DayRender is meant for Calendar and not for DatePicker. I tried implementing it for the Calendar within the DatePicker but it is not executing that method.

My aspx page code

<telerik:RadDatePicker ID="RadDatePicker1" Runat="server"
        Culture="English (United Kingdom)" ShowPopupOnFocus="True" Skin="Vista"
        EnableTyping="False" onselecteddatechanged="RadDatePicker1_SelectedDateChanged">
        <DateInput Runat="server" ReadOnly="True">
        </DateInput>
<Calendar Runat="server" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False"
            ViewSelectorText="x" Skin="Vista"  OnDayRender="CustomizeDay">
    <SpecialDays>
        <telerik:RadCalendarDay Date="2009-06-24" IsDisabled="True"
            IsSelectable="False">
        </telerik:RadCalendarDay>
    </SpecialDays>
    <DisabledDayStyle Font-Bold="True" Font-Strikeout="True" />
        </Calendar>

<DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>
    </telerik:RadDatePicker>

Page's cs code

private DateTime startDate = DateTime.Today;
    private DateTime endDate = DateTime.Today.AddDays(7);

    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void CustomizeDay(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e)
    {
        DateTime CurrentDate = e.Day.Date;
        if (startDate <= CurrentDate && CurrentDate <= endDate)
        {
            return;
        }

        e.Day.IsDisabled = true;
        e.Day.IsSelectable = false;
        e.Day.IsSelected = false;
    }

    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);
    }

    protected void RadDatePicker1_SelectedDateChanged(object sender, Telerik.Web.UI.Calendar.SelectedDateChangedEventArgs e)
    {

    }

Hope you can tell me where I made the mistake in.

[Pavlina]

Hello,

I followed your scenario in order to replicate the problem but to no avail. Please find attached a simple runnable application which is working as expected. GIve it a try and let me know what is the difference in your case.

Kind regards,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[JB]

Hi,

I used the code you gave me but it did not do what it was supposed to do. The code is being executed now (don't know what is different from my code) but the calendar is not disabling the dates as it should. My purpose is to disable all the dates other than a particular range of dates. I know I can use Min and Max date range but I'm trying to implement a multiple range calendar and this is not possible with min max date range. So this is the alternative solution. However, it doesn't seem to work.

From the code, you can see that I have set the days to be disabled and not selectable. However, I seem to be able to select them when the calendar loads. Don't know what I'm doing wrong. I used the exact code you gave me.

Please suggest how I can do this.
Regards,
JB

[Pavlina]

Hello

Please find attached a modified project that demonstrates the needed approach. Give it a try and let me know if you have other questions or problems.

I hope this helps.

Regards,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[JB]

Hi,

Your example works for the current month but not for the next months or previous months. All the dates in the initial popup calendar month is blocked as I wanted but any dates that doesn't fall in that calendar month area doesn't get blocked.

Is there anyway to do it for all the months so if the user navigates to other months/years, the same pattern follows so only dates listed as active will be selectable and not the others?

Thanks for the support.

Regards,
JB

[Pavlina]

Hello,

To disable the required dates for the next/previous months, you should add OnDayRender client-side event handler which is called for every calendar day cell when the calendar is rendered as a result of client-side navigation. This event mimics the server-side DayRender event, giving final control over the output of a specific calendar day cell. This event can be used to apply analogous changes to calendar cells when the user navigates that the server-side event handler applied to the cells in the initial view.

I hope this helps.

Regards,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[JB]

Hi,

Can you suggest how I can disable date ranges that is dynamic and retrieved from the database within the client side javascript?

My purpose is to disable all the dates other than a particular range of dates. I know I can use Min and Max date range but I'm trying to implement a multiple range calendar and this is not possible with min max date range.

So in other words, I won't know how many sets of range will be there. I won't know what the values are of the date ranges. And there might be individual dates blocked as well. All the information comes from the database. I can implement this in the server side but how do I bring it to client side? If you can provide an example, I would be grateful.

Regards,
JB

[Pavlina]

Hi,

I suggest you try  following the solution from the code library (Disabling calendar days), which will help you to address the issue you encountered.

Let me know if it helps, or you will need additional assistance.
 
Sincerely yours,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[alok singh]

Hi,
My name is Alok what i am trying to do is display range of two dates from rad date picker how could it possible
.is there any other way to achive this....

thankyou
Alok

[Pavlina]

Hello,

I recommend you try the following code snippet in order to disable a set of Dates in the given date range:
C#:

protected void RadCalendar1_DayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e)
    {

        DateTime StartDate = Convert.ToDateTime("06/11/2009");
        DateTime EndDate = Convert.ToDateTime("06/15/2009");
        if (e.Day.Date >= StartDate.Date && e.Day.Date <= EndDate.Date)
        {

            // disable the selection for the specific day
            RadCalendarDay calendarDay = new RadCalendarDay();
            calendarDay.Date = e.Day.Date;
            calendarDay.IsSelectable = false;
            RadCalendar1.SpecialDays.Add(calendarDay);
        }

    }

I hope this helps.

Sincerely yours,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Gijs]

Hi

I followed all recommended steps, downloaded all examples but unfortunately when initially the calendar is loaded the current month dates are not disabled (I want to disable everything but Start/End week)
I want to mention that Ajax/Js disabling dates code works nicely.
Here is a short movie: http://screencast.com/t/xZzMKK1Kx

Thanks

[Pavlina]

Hi Gijs,

Note that in order to apply changes purely client-side attaching the DayRender client event, you need to navigate to a different month and thus force the calendar to re-render itself. This is the cause DayRender to not fire on load. In order to fire OnDayRender client side event before navigate to a different view you should handle OnLoad client-side event and navigate calendar as demonstrated in this online demo.

Regards,
Pavlina
the Telerik team

[Nelson]

Hello,

I have been looking on how to implement client-side enabling and disabling of days on the RadDatePicker Calendar control.

I have reviewed the referenced example in this thread and it has helped out quite a bit. However, I am hitting a road block and am hoping I may receive a little guidance.

In essence, I want to take the example code one step further and derive whether or not I am going to enable or disable a calendar day based on an ajax request to a webservice that ideally would return a boolean.

However after implementing this I was reminded of the fact that (of course) the nature of these requests are asynchronous and so the result is received after the OnDayRender client side event is fired. As you can imagine, this is problematic because by then the calendar will have already been rendered and I will be outside of the OnDayRender event context.

I am sure there must be a way to enable and disable days in client-side based on server-side logic (ajax methods) but I am wondering if I could be pointed to the right direction on how to acheive this. I know how to properly form the Ajax calls and pass a reference to a function to fire off when the call was successful, but I am not sure how I am going to enable and disable days when I am no longer in the OnDayRender event.

Any information or guidance here would be most welcome. Ultimately, the days that are allowed to be picked will be defined server-side and so they will need to be enabled or disabled dynamically and OnDayRender (client side) seems to be the right fit here but I am open to suggestions there as well.

Thanks,
Nelson 

Thanks,
Nelson

[Nelson]

Was there any information or suggestions on this? Would it be more helpful if I submitted a support ticket instead?

Thanks,
Nelson

[Pavlina]

Hello Nelson,

My colleague Angel already answered your question in the support ticket you have opened on the matter. I am pasting his answer here as well:

The only way you can resolve the problem is by storing the dates that you want to disable client-side. From there on you can intercept the client-side OnDateClick event check if the selected exist in the collection previously created and if so cancel the event like this:

Copy Code

args.set_cancel(true);

You can not use server-side disabling of the dates because you are using services. The upper-mentioned approach however should do the trick.

To avoid duplicate posts I will ask you to continue your comunication there.

All the best,
Pavlina
the Telerik team

[Charl]

Hi

For this example lets say the following dates are not allowed. Public holidays and Sundays

I can load my rad date picker, and the above dates are disabled, when you select the next month those dates are disabled also,

everything is working fine.

The issue  I am having is: When I selected a date in the next month, (example current month is July next month is August)  and I re open the rad date picker, and try to select a previous month (currently on August, trying to select July) It gets stuck, It does not move from August it also removed my colour scheme for disabled dates.  The only way to get it working again is I need to select the last possible day in July from August, then wait a bit re open the rad date picker only then does it updated back to July. I am using the OnDayRender function to load the dates that are not allowed