Inactive Times in RadTimePicker

[Hilmar Bunjes]

Hi,
I'm working on a reservation system where a user must choose a time for reservation. I use an List<DateTime> as datasource which works fine. However I must also display times that aren't available for reservation and make them non-choosable.

Example:
Machine A is usually available from 1:00 pm to 4:00 pm. The reservation can be made every 15 minutes. Someone booked the machine from 1:30 pm to 2:00 pm. Now I want to show the RadTimePicker the following way:

1:00 1:15 1:30 1:45
2:00 2:15 2:30 2:45
3:00 3:15 3:30 3:45

The entries "1:30" and "1:45" shall be shown lighter or dashed-through. Also the user shall not be able to select those times.

Is there any way to do this with the current functionality or does anynone have an idea how to do this?

Thanks,
Hilmar

[Daniel]

Hello Hilmar,

This functionality is not supported out-of-the-box. You can implement it with JS code as shown below:

    <script type="text/javascript" language="javascript">
        function compTime(date, array)
        {
            return (date.getHours() == array[0] && date.getMinutes() == array[1]);
        }

        function disabledFn(e)
        {
            e.cancelBubble = true;
            return false;
        }

        function Popup_Opening(sender, args)
        {
            var dtime = new Array();
            dtime[0] = "1";
            dtime[1] = "0";
            var times = sender.get_timeView()._timeMatrix;
            var table = sender.get_timeView().get_element().getElementsByTagName("table")[0];
            for (var row = 0; row < times.length; row++)
            {
                for (var cell = 0; cell < times[row].length; cell++)
                {
                    var cellDate = times[row][cell];
                    if (cellDate && compTime(cellDate, dtime))
                    {
                        table.rows[row].cells[cell].style.backgroundColor = "#eeeeee";
                        table.rows[row].cells[cell].childNodes[0].backgroundColor = "#eeeeee";
                        if (window.addEventListener)
                            table.rows[row].cells[cell].addEventListener('click', disabledFn, false);
                        else
                            table.rows[row].cells[cell].attachEvent('onclick', disabledFn);
                    }
                }
            }
        }

    </script>

You should modify the provided code to fit your needs.

Kind regards,
Daniel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Troy]

This works and we have modified code to be similiar. One question is how do you re-attach the client event to the times? We are using a calendar as a picker and then a separate Timepicker control. If the user selectes todays date, we disbale all times prior to the current time/hour. If the user selects a date in the future, we need to re-enable to the client event to any disbaled time cells. Another usage is if a weekday or weekend is selected, different time slots should be disbaled though all time slots must be able to be re-enabled.

Thanks,

Troy 

[Daniel]

Hello Troy,

I modified the code to be able to detach the event. As I said before this is not officially supported scenario.

<script type="text/javascript" language="javascript">
    function compTime(date, array)
    {
        return (date.getHours() == array[0] && date.getMinutes() == array[1]);
    }

    function disabledFn(e)
    {
        e.cancelBubble = true;
        return false;
    }

    function toggleTime(timeView, dtime, enable)
    {
        var times = timeView._timeMatrix;
        var table = timeView.get_element().getElementsByTagName("table")[0];
        for (var row = 0; row < times.length; row++)
        {
            for (var cell = 0; cell < times[row].length; cell++)
            {
                var cellDate = times[row][cell];
                if (cellDate && compTime(cellDate, dtime))
                {
                    if (enable)
                    {
                        table.rows[row].cells[cell].style.backgroundColor = "";
                        table.rows[row].cells[cell].childNodes[0].backgroundColor = "";
                        if (window.removeEventListener)
                            table.rows[row].cells[cell].removeEventListener('click', disabledFn, false);
                        else
                            table.rows[row].cells[cell].detachEvent('onclick', disabledFn);
                    }
                    else
                    {
                        table.rows[row].cells[cell].style.backgroundColor = "#eeeeee";
                        table.rows[row].cells[cell].childNodes[0].backgroundColor = "#eeeeee";
                        if (window.addEventListener)
                            table.rows[row].cells[cell].addEventListener('click', disabledFn, false);
                        else
                            table.rows[row].cells[cell].attachEvent('onclick', disabledFn);
                    }
                }
            }
        }
    }
</script>

<input type="button" id="button1" value="enable" onclick='toggleTime($find("<%= RadTimePicker1.ClientID %>").get_timeView(), ["3","0"], true)' />
<input type="button" id="button2" value="disable" onclick='toggleTime($find("<%= RadTimePicker1.ClientID %>").get_timeView(), ["3","0"], false)' />
<telerik:RadTimePicker ID="RadTimePicker1" runat="server" />

Best regards,
Daniel
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.