Re: cc1:CalendarExtender month/year only?

xlfg — Fri, 06 Nov 2009 03:20:53 GMT

what's the function pageload() usage? It will run automatically on page load?

Re: cc1:CalendarExtender month/year only?

tomkleijkers — Fri, 02 Oct 2009 12:05:55 GMT

Thanks Zhi-Qiang! It helped me too.

Re: cc1:CalendarExtender month/year only?

Lee Harvey — Tue, 29 Sep 2009 09:32:32 GMT

Hello,

Would you possible know how to add week number to the calendar? Have tried to modify the CalendarBehavior.js by calculating the week number and setting the dayCell.title with no success.

Thankful for any help.

Re: cc1:CalendarExtender month/year only?

sparco01 — Fri, 24 Jul 2009 04:24:45 GMT

aghausman12:

Hey, That works too but it is little lengthy as well as on body unload it is also giving an error to me. How ever, I got the exact idea from your post. So thanks alot Zhi-Qiang Ni

and see this post : http://www.aghausman.net/asp/how-to-show-and-select-monthyear-in-calendar-extender.html

cheers

Hi,

Your solution is good and is working perfectly . Thanks and keep up the good work

Cheers.

Re: cc1:CalendarExtender month/year only?

aghausman12 — Sat, 30 May 2009 22:18:42 GMT

Hey, That works too but it is little lengthy as well as on body unload it is also giving an error to me. How ever, I got the exact idea from your post. So thanks alot Zhi-Qiang Ni

and see this post : http://www.aghausman.net/asp/how-to-show-and-select-monthyear-in-calendar-extender.html

cheers

Re: cc1:CalendarExtender month/year only?

mongoose_za — Thu, 20 Nov 2008 08:08:33 GMT

Your fantastic!! Xiexie ^_^

I don't know how you knew what to do.. But your genius.

Re: cc1:CalendarExtender month/year only?

Zhi-Qiang Ni - MSFT — Thu, 20 Nov 2008 05:02:42 GMT

Hi,

From your description, I understand that there are two TextBoxes bound to the CalendarExtender. Both of the Calendar should only be selected in the Year/Month mode. The From Calendar has a default date as the first day of selected month. In contrast, the To Calendar has the last day of selected month as the default date.

If I have not misunderstood you, please refer to my sample code about this scenario:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestOnlyChangeMonthAndSetDefaultDay.aspx.vb"
    Inherits="SoluTest_CalendarUserControl.TestOnlyChangeMonthAndSetDefaultDay" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript">

        var cal1;
        var cal2;

        function pageLoad() {
            cal1 = $find("calendar1");
            cal2 = $find("calendar2");

            modifyCalDelegates(cal1);
            modifyCalDelegates(cal2);
        }

        function modifyCalDelegates(cal) {
            //we need to modify the original delegate of the month cell.
            cal._cell$delegates = {
                mouseover: Function.createDelegate(cal, cal._cell_onmouseover),
                mouseout: Function.createDelegate(cal, cal._cell_onmouseout),

                click: Function.createDelegate(cal, function(e) {
                    /// <summary> 
                    /// Handles the click event of a cell
                    /// </summary>
                    /// <param name="e" type="Sys.UI.DomEvent">The arguments for the event</param>

                    e.stopPropagation();
                    e.preventDefault();

                    if (!cal._enabled) return;

                    var target = e.target;
                    var visibleDate = cal._getEffectiveVisibleDate();
                    Sys.UI.DomElement.removeCssClass(target.parentNode, "ajax__calendar_hover");
                    switch (target.mode) {
                        case "prev":
                        case "next":
                            cal._switchMonth(target.date);
                            break;
                        case "title":
                            switch (cal._mode) {
                                case "days": cal._switchMode("months"); break;
                                case "months": cal._switchMode("years"); break;
                            }
                            break;
                        case "month":
                            //if the mode is month, then stop switching to day mode.
                            if (target.month == visibleDate.getMonth()) {
                                //this._switchMode("days");
                            } else {
                                cal._visibleDate = target.date;
                                //this._switchMode("days");
                            }
                            cal.set_selectedDate(target.date);
                            cal._switchMonth(target.date);
                            cal._blur.post(true);
                            cal.raiseDateSelectionChanged();
                            break;
                        case "year":
                            if (target.date.getFullYear() == visibleDate.getFullYear()) {
                                cal._switchMode("months");
                            } else {
                                cal._visibleDate = target.date;
                                cal._switchMode("months");
                            }
                            break;

                        //                case "day":                            
                        //                    this.set_selectedDate(target.date);                            
                        //                    this._switchMonth(target.date);                            
                        //                    this._blur.post(true);                            
                        //                    this.raiseDateSelectionChanged();                            
                        //                    break;                            
                        case "today":
                            cal.set_selectedDate(target.date);
                            cal._switchMonth(target.date);
                            cal._blur.post(true);
                            cal.raiseDateSelectionChanged();
                            break;
                    }

                })
            }

        }

        function onCalendarShown(sender, args) {
            //set the default mode to month
            sender._switchMode("months", true);
            changeCellHandlers(cal1);
        }


        function changeCellHandlers(cal) {

            if (cal._monthsBody) {

                //remove the old handler of each month body.
                for (var i = 0; i < cal._monthsBody.rows.length; i++) {
                    var row = cal._monthsBody.rows[i];
                    for (var j = 0; j < row.cells.length; j++) {
                        $common.removeHandlers(row.cells[j].firstChild, cal._cell$delegates);
                    }
                }
                //add the new handler of each month body.
                for (var i = 0; i < cal._monthsBody.rows.length; i++) {
                    var row = cal._monthsBody.rows[i];
                    for (var j = 0; j < row.cells.length; j++) {
                        $addHandlers(row.cells[j].firstChild, cal._cell$delegates);
                    }
                }

            }
        }

        function onCalendarHidden(sender, args) {

            if (sender.get_selectedDate()) {
                if (cal1.get_selectedDate() && cal2.get_selectedDate() && cal1.get_selectedDate() > cal2.get_selectedDate()) {
                    alert('The "From" Date should smaller than the "To" Date, please reselect!');
                    sender.show();
                    return;
                }
                //get the final date
                var finalDate = new Date(sender.get_selectedDate());
                var selectedMonth = finalDate.getMonth();
                finalDate.setDate(1);
                if (sender == cal2) {
                    // set the calender2's default date as the last day
                    finalDate.setMonth(selectedMonth + 1);
                    finalDate = new Date(finalDate - 1);
                }
                //set the date to the TextBox
                sender.get_element().value = finalDate.format(sender._format);
            }
        }

    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        From :
        <asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="Disabled"></asp:TextBox>
        <cc1:CalendarExtender ID="CalendarExtender1" BehaviorID="calendar1" runat="server"
            Enabled="True" Format="yyyy/MM/dd" TargetControlID="TextBox1" OnClientShown="onCalendarShown"
            OnClientHidden="onCalendarHidden">
        </cc1:CalendarExtender>
        To :
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <cc1:CalendarExtender ID="CalendarExtender2" BehaviorID="calendar2" runat="server"
            Enabled="True" Format="yyyy/MM/dd" TargetControlID="TextBox2" OnClientShown="onCalendarShown"
            OnClientHidden="onCalendarHidden">
        </cc1:CalendarExtender>
    </div>
    </form>
</body>
</html>

Have my code helped? Here is another thread which is similar to yours: http://forums.asp.net/t/1342938.aspx.

Best regards,

Zhi-Qiang Ni

cc1:CalendarExtender month/year only?

mongoose_za — Mon, 17 Nov 2008 13:56:02 GMT

Hi,

CalendarExtender to my textbox. However i want to only be able to select month year. Not day month year. The end user should not be able to select dates. Furthermore i'd want by default my "from date" textbox to always select the 1st day of the month and "to date" to always be the last day of the month. I'm sure this is a common requirement of certain systems.

Please help me out. Thanks in advance,

ASP.NET AJAX Control Toolkit

Re: cc1:CalendarExtender month/year only?

Re: cc1:CalendarExtender month/year only?

Re: cc1:CalendarExtender month/year only?

Re: cc1:CalendarExtender month/year only?

Re: cc1:CalendarExtender month/year only?

Re: cc1:CalendarExtender month/year only?

Re: cc1:CalendarExtender month/year only?

cc1:CalendarExtender month/year only?