WebCalendar disable past dates

1 reply. Last post: February 23, 2015 9:27 AM by leo Chandra
Tags :
Dev AshishMember

Hi,

Is there any way I can disable the past dates in WebCalendar i.e. the user can only select the present date or a future date.

Something like booking a flight where user can only select today or a day in future.

Ans also can you tell how to make the disabled date look different.

Regards,
Dev

All Replies

Hi Dev Ashish,

Unfortunately, WebCalendar still not support disabling specific date. But you could adopt this hack technique by running the following javascript on WebCalendar OnAfterRender ClientSideEvents:

function EnableOnlyDateRange(WebCalendar, fromDate, toDate)        {
            var a = document.querySelectorAll("#" + WebCalendar.ID + "_f td[unselectable = 'on']");
            if (fromDate)
            {
                fromDate.setHours(0, 0, 0, 0);
            }
            if (toDate)
            {
                toDate.setHours(0, 0, 0, 0);
            }
            for (var i = 0; i < a.length; i++)
            {
                var dateDay = new Date(a[i].getAttribute("y"), a[i].getAttribute("m") - 1, a[i].getAttribute("d"));
                if ((fromDate && dateDay < fromDate) || (toDate && dateDay > toDate))
                {
                    a[i].setAttribute("class", WebCalendar.OutboundCellStyle);
                    a[i].setAttribute("cssname", WebCalendar.OutboundCellStyle);
                    a[i].onclick = function () { event.stopPropagation(); };
                }
            }
        }
Please note that it will only work on browser that have a support for querySelectorAll.

To make the disabled date(outbound date) look different, you could simply change it through WebCalendar OutboundCellStyle property.

As a reference, I have attach a simple working sample. Please have the sample evaluated on your end by adding it to WebEssentials sample which is included in the installation folder.


Best Regards,
Leo

All times are GMT -5. The time now is 6:57 AM.
Previous Next