Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Select Week instead of Day without using UseRowHeadersAsSelectors

10 Answers 217 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Lee
Top achievements
Rank 1
Lee asked on 12 Aug 2010, 04:52 PM
I'm trying to have a user be able to hover over the week and it select the week instead of selecting the day.   I'm trying to do this without the UseRowHeadersAsSelectors.  Then take the selected week range for the SelectedWeek. 

I saw this post but it's over 3 years old and it is WinForms so is there a work around for asp.net ajax?

http://www.telerik.com/community/forums/winforms/calendar-and-datetimepicker/row-selection-only.aspx

Thanks in advance

10 Answers, 1 is accepted

Sort by
0
Lee
Top achievements
Rank 1
answered on 12 Aug 2010, 10:10 PM
0
Tsvetina
Telerik team
answered on 17 Aug 2010, 03:55 PM
Hi Lee,

You could try the same approach as used in order to deselect currently selected dates in the SelectWholeWeek() method from the CodeLibrary which you provided a linko to:

var calendar = $find("<%= RadCalendar1.ClientID %>");
calendar.unselectDates(calendar.get_selectedDates());

I hope this helps.

Greetings,
Tsvetina
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Lee
Top achievements
Rank 1
answered on 17 Aug 2010, 05:48 PM
where would i happen to add that code snippet in the javascript?
0
Tsvetina
Telerik team
answered on 18 Aug 2010, 10:54 AM
Hello Lee,

That depends on your requirements. If the code works correctly in your project, from what I see, when you click another cell all the currently selected ones will get deselected and the new week will be selected. In what other case do you want the previously selected week to be deselected?

Sincerely yours,
Tsvetina
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Lee
Top achievements
Rank 1
answered on 18 Aug 2010, 03:32 PM
their seems to be two issues.....

one. when you select a week of august that is located in the september calendar and then select a week lets say in the august calendar it keeps the selected single date on the september calender.

two. when you select a week and you want to click on the same week to unselect it only unselects the single date instead of the entire week.  

here is my code.  I tried to incorporate a unselectweek function but doesn't seem to work....
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication1.WebForm1" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function AddEvent(e) {
                var calendar = $get("<%=RadCalendar1.ClientID %>");
                if (typeof (calendar.addEventListener) != "undefined") //gecko browsers
                {
                    calendar.addEventListener("mouseover", HighlightWholeWeek, false);
                    calendar.addEventListener("mouseout", UnHighlight, false);
                }
                else if (calendar.attachEvent) //IE
                {
                    calendar.attachEvent("onmouseover", HighlightWholeWeek);
                    calendar.attachEvent("onmouseout", UnHighlight);
                }
                //               
                //                    if (typeof (calendar.addEventListener) != "undefined") //gecko browsers
                //                    {
                //                        calendar.addEventListener("click", SelectWholeWeek, false);
                //                    }
                //                    else if (calendar.attachEvent) //IE
                //                    {
                //                        calendar.attachEvent("onclick", SelectWholeWeek);
                //                    }
 
                if (typeof (calendar.addEventListener) != "undefined") //gecko browsers
                {
                    if (va = "false") {
                        calendar.addEventListener("click", SelectWholeWeek, false);
                        var va = "true";
                    }
                    else if (va = "true") {
                        calendar.addEventListener("click", UnSelectWholeWeek, false);
                        var va = "false";
                    }
                }
                else if (calendar.attachEvent) //IE
                {
                    if (va = "false") {
                        calendar.attachEvent("onclick", SelectWholeWeek);
                        var va = "true";
                    }
                    else if (va = "true") {
                        calendar.attachEvent("onclick", UnSelectWholeWeek);
                        var va = "false";
                    }
                }
            }
 
            function SelectWholeWeek(args) {
                var target = FindTarget(args); //find the clicked cell   
                if (target.DayId && target.className)//if the clicked cell is a date cell it has a DayId
                {
 
                    if ((target.className == "radCalSelect_Default") || (target.className == "rcSelected")) {
                        var calendar = $find("<%= RadCalendar1.ClientID %>");
                        calendar.unselectDates(calendar.get_selectedDates());
 
                        var row = target.parentNode;
                        while (row.tagName != "TR") {
                            row = row.parentNode;
                        }
                        var rowCells = row.getElementsByTagName("td"); //get all the cells of the row
                        for (var i = 0; i < rowCells.length; i++)
                            if (rowCells[i].DayId) //if the cell is a selectable Date cell it has DayId 
                            {
                                var date = GetDateFromID(rowCells[i].DayId);
                                calendar.selectDate(date);
                            }
                            else {
                                var rowCells = row.getElementsByTagName("td"); //get all the cells of the row
                                var calendar = $find("<%= RadCalendar1.ClientID %>");
                                calendar.unselectDates(calendar.get_selectedDates());
                            }
                }
            }
        }
 
        function UnSelectWholeWeek(args) {
            var target = FindTarget(args); //find the clicked cell   
            if (target.DayId && target.className)//if the clicked cell is a date cell it has a DayId
            {
                if ((target.className == "radCalSelect_Default") || (target.className == "rcSelected")) {
                    var calendar = $find("<%= RadCalendar1.ClientID %>");
                    calendar.unselectDates(calendar.get_selectedDates());
 
                    var row = target.parentNode;
                    while (row.tagName != "TR") {
                        row = row.parentNode;
                    }
                    var rowCells = row.getElementsByTagName("td"); //get all the cells of the row
                    for (var i = 0; i < rowCells.length; i++)
                        if (rowCells[i].DayId) //if the cell is a selectable Date cell it has DayId 
                        {
                            var calendar = $find("<%= RadCalendar1.ClientID %>");
                            calendar.unselectDates(calendar.get_selectedDates());
                        }
            }
        }
    }
 
    function HighlightWholeWeek(args) {
        //find the clicked cell
        var target = FindTarget(args);
        if (target != null && (target.className == "radCalHover_Default" || target.className == "rcHover") && target.DayId) //if the highlighted cell is a date cell it has a DayId
        {
            var row = target.parentNode;
 
            //get all the rows to unhighlight first
            var rows = row.parentNode.getElementsByTagName("tr");
            UnhighlightRows(rows);
            //highlight our row cells
            var rowCells = row.getElementsByTagName("td");
            for (var i = 0; i < rowCells.length; i++) {
                //don't highlight other month or selected days
 
                var oldSkins = target.className.indexOf("rc") != 0 ? true : false; //flag that indicates whether the version is earlier than Q1 2009.
                if (target.className == "") {
                    oldSkins = false;
                }
                if (oldSkins && rowCells[i].className != "otherMonth_Default" && rowCells[i].className != "radCalSelect_Default") {
                    rowCells[i].className = "radCalHover_Default";
                }
                else if ((!oldSkins) && rowCells[i].className != "rcOtherMonth" && rowCells[i].className != "rcSelected") {
                    rowCells[i].className = "rcHover";
                }
            }
        }
    }
 
    //unhighlight the lastly highlighted week on mouse out of the calendar
    function UnHighlight() {
        var calendar = document.getElementById("RadCalendar1_Top");
        //get the rows of the calendar table
        var rows = calendar.getElementsByTagName("tr");
        UnhighlightRows(rows);
    }
 
    function UnhighlightRows(rows) {
        for (var i = 0; i < rows.length; i++) {
            //get the cells of the current row
            var rowCells = rows[i].getElementsByTagName("td");
            for (var j = 0; j < rowCells.length; j++) {
                //unhighlight the row cells
                if (rowCells[j].className == "radCalHover_Default") {
                    rowCells[j].className = "radCalDefault_Default";
                }
                else if (rowCells[j].className == "rcHover") {
                    rowCells[j].className = "";
                }
            }
        }
    }
 
    function FindTarget(e) {
        var target;
        if (e && e.target) //other browsers
        {
            target = e.target;
        }
        else if (window.event && window.event.srcElement) //IE
        {
            target = window.event.srcElement;
        }
 
        if (!target) {
            return null;
        }
 
        while (target != null && target.tagName != null) {
            if (target.tagName.toLowerCase() == 'td') {
                break;
            }
            target = target.parentNode;
        }
 
        if (target == null || target.tagName == null || target.tagName.toLowerCase() != 'td') {
            return null;
        }
        return target;
    }
 
    function GetDateFromID(ID) {
 
        var name = ID.split("_");
        var date = [parseInt(name[1]), parseInt(name[2]), parseInt(name[3])];
        return date;
    }        
        </script>
    </telerik:RadCodeBlock>
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <telerik:RadCalendar ID="RadCalendar1" runat="server" AutoPostBack="true" MultiViewColumns="3"
                    ShowOtherMonthsDays="true" ShowColumnHeaders="true" UseRowHeadersAsSelectors="false"
                    ShowRowHeaders="false" UseColumnHeadersAsSelectors="false" MultiViewRows="1"
                    EnableMultiSelect="true" CalendarTableStyle-Font-Size="10px" CalendarTableStyle-Width="130px"
                    EnableViewSelector="true">
                    <ClientEvents OnLoad="AddEvent" />
                </telerik:RadCalendar>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

0
Lee
Top achievements
Rank 1
answered on 18 Aug 2010, 03:39 PM
i found out the solutions to the first issue when copying over the code to a sample project i realized that in my main project the radcalendar was assigned to a RadAjaxManager.  When I remove that it seems to work better. 

still the click on selected week i want to unselect the week instead of the single date....
0
Tsvetina
Telerik team
answered on 23 Aug 2010, 03:36 PM
weekselection.zip
Hello Lee,

This approach can actually be replaced with a more straight forward one, using the methods and properties exposed in later versions of RadControls than the one used in the Code Library which you linked to.

I am attaching a project with the new approach which I tested under different browsers and covers the desired functionality which you described in all of them.

Greetings,
Tsvetina
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Brad
Top achievements
Rank 1
answered on 15 Oct 2010, 09:36 PM
I had to modify GetDateFromID(ID) as follows to account for complex ASP.NET control names:

function GetDateFromID(ID) {
    var name = ID.split("_");
    var date = [parseInt(name[name.length - 3]), parseInt(name[name.length - 2]),
        parseInt(name[name.length - 1])];
    return date;
}
0
Sonia
Top achievements
Rank 1
answered on 09 Jul 2014, 11:14 AM
Hi Tsvetina,

I have tested your simple and it works, but if i insert the code in a contentplaceholder of a masterpage it does not work and i do not why.

Any idea?
Thank you,
Sonia.
0
Sonia
Top achievements
Rank 1
answered on 09 Jul 2014, 11:26 AM
I answer myself.
If you want it works also on a contentplaceholder change function GetDateFromID such as Brad says:

function GetDateFromID(ID) {
var name = ID.split("_");
var date = [parseInt(name[name.length - 3]), parseInt(name[name.length - 2]), parseInt(name[name.length - 1])];
return date;
}


Tags
Calendar
Asked by
Lee
Top achievements
Rank 1
Answers by
Lee
Top achievements
Rank 1
Tsvetina
Telerik team
Brad
Top achievements
Rank 1
Sonia
Top achievements
Rank 1
Share this question
or