ASP.NET Calendar - Knowledge Base

« Back to Knowledge Base list

Customize the minute dropdown in the time selector

Q:

For the time selector in the calendar control, is it possible to limit the choices in the minute dropdown?  Our application really only needs minutes of 00, 15, 30 & 45.  All the others are just wasted scroll time.

A:

Here you can find a page where the Calendar has such minute dropdown:

<%@ Page Language="C#" %>
<%@ Register TagPrefix="obout" Namespace="OboutInc.Calendar2" Assembly="obout_Calendar2_NET" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
     <title>obout ASP.NET Calendar examples</title>
     <script type="text/javascript">
    // minutes that we want to show
    var showMinutes = [0, 15, 30, 45];

    // on page load
    function pageLoad(sender, args) {
        // change minutes list
        changeMinutesList("<%= myCalendar.ClientID %>");
    }

    // change minutes list for the calendar control by its client ID
    function changeMinutesList(calendarId) {
        // try to find minutes container if 'DropDownList' is used
        var dropDownList = $get("_" + calendarId + "Minute");
        if (dropDownList != null) { // found
            // go throw all options of the SELECT element
            for (var i = 0; i < dropDownList.options.length; i++) {
                // current option
                var item = dropDownList.options[i];
                // get time value from this option
                var value = parseInt(item.value);
                // go throw all allowed seconds values
                var j = 0;
                for (; j < showMinutes.length; j++) {
                    // do we need this option?
                    if (value == showMinutes[j]) { //yes
                        break;
                    }
                }
                if (j >= showMinutes.length) { // we don't need this option
                    dropDownList.remove(i); // remove it
                    i--; // correct the current index
                }
            }
        } else {
            // try to find minutes container if 'HtmlList' is used
            var table = $get(calendarId + "_MinuteSelectorContainer");
            if (table != null) { // found
                // go throw all rows of the TABLE element
                for (var i = 0; i < table.rows.length; i++) {
                    // current row
                    var itemRow = table.rows[i];
                    // get time value from this row
                    var value = itemRow.cells[0].innerHTML;
                    if (!isNaN(value)) { // number value
                        // go throw all allowed seconds values
                        var j = 0;
                        for (; j < showMinutes.length; j++) {
                            // do we need this row?
                            if (value == showMinutes[j]) { // yes
                                itemRow.style.display = "";
                                break;
                            }
                        }
                        if (j >= showMinutes.length) { // we don't need this row
                            table.deleteRow(i); // remove it
                            i--; // correct the current index
                        }
                    }
                }
            }
        }
    }
     </script>
  </head>
     <body>
        <form id="Form1" runat="server">
           <asp:ScriptManager runat="server" ID="scriptManager" />
           <obout:Calendar runat="server" ID="myCalendar" ShowTimeSelector="true"
                                    TimeSelectorType="DropDownList" ShowSecondSelector="false"/>
        </form>
     </body>
</html>


How it looks: