Select week by clicking on day

3 posts, 0 answers
  1. Paige Cook
    Paige Cook avatar
    57 posts
    Member since:
    Sep 2007

    Posted 11 Dec 2007 Link to this post

    I wanted to find out if there is a way to enable the selection of an entire week, by selecting a day within that week? Basically the same functionality as clicking the week number in the rowheader. I do want to display the row headers, but only want to allow users to select an entire week.

    Thanks.
  2. Paige Cook
    Paige Cook avatar
    57 posts
    Member since:
    Sep 2007

    Posted 11 Dec 2007 Link to this post

    Actually, I found this code library submission that showed how to select a week and I modified the client side code as follows to get my desired functionality. Could you please review the code and let me know if I am doing this in the best possible way.

    Thanks.

    <%@ Page Language="C#"%> 
    <%@ 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"> 
     
    <script runat="server"
    </script> 
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"
        <title>Calendar Demo</title> 
    </head> 
    <body> 
        <form id="form1" runat="server"
            <asp:ScriptManager ID="ScriptManager1" runat="server"
            </asp:ScriptManager> 
        <div> 
        <script type="text/javascript"
            // clear all the selected calendar days 
            ClearAll = function() 
            { 
                var calendar = $find("<%= RadCalendar1.ClientID %>");           
                calendar.UnselectDates(calendar.GetSelectedDates()); 
            } 
                     
            SelectWeek = function(e){ 
                var calendar = $find("<%= RadCalendar1.ClientID %>"); 
                var target = FindTarget(e); 
                var rowCells = target.parentNode.getElementsByTagName("td"); //get all the cells of the row             
     
                //loop through all row cells and select the ones, corresponding to a day cell (i.e. has a DayId) 
                for(var i=0; i<rowCells.length; i++){ 
                    if(rowCells[i].DayId) //if the cell is a Date cell it has DayId                 
                    { 
                        var date = GetDateFromID(rowCells[i].DayId);                         
                        calendar.SelectDate(date); 
                    } 
                }                              
            } 
             
             // attach a click event of the calendar table 
            AddEvent = function() 
            { 
                var calendar = document.getElementById("<%= RadCalendar1.ClientID %>"); 
                if (typeof(calendar.addEventListener)!= "undefined") 
                { 
                    calendar.addEventListener("click", SelectWeek, false); 
                } 
                else if (calendar.attachEvent) 
                { 
                    calendar.attachEvent("onclick", SelectWeek); 
                } 
            } 
     
            // in case there is other controls (e.g. from a day template) inside the cell 
            // we need to get the clicked cell element (i.e. the td)  
            FindTarget = function(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) 
                {       
                    if (target.tagName.toLowerCase() == 'td') 
                    { 
                        break; 
                    }                 
                    targettarget = target.parentNode;                 
                } 
                 
                if (target.tagName.toLowerCase() != 'td') 
                {  
                    return null;  
                }              
                return target; 
            }   
                
            // the cell id is constructed from the day it is concerned with, so we can parse the date from it           
            GetDateFromID = function(ID) 
            { 
                var dateMatch = ID.match(/.*?_(\d+)_(\d+)_(\d+)/); 
                return [dateMatch[1], dateMatch[2], dateMatch[3]]; 
            } 
     
        </script> 
                <telerik:RadCalendar ID="RadCalendar1" runat="server" EnableMultiSelect="true" UseColumnHeadersAsSelectors="false" UseRowHeadersAsSelectors="false" ShowRowHeaders="false" 
                     FirstDayOfWeek="Monday"
                    <ClientEvents OnDateClick="ClearAll" OnLoad="AddEvent"/> 
                </telerik:RadCalendar>     
        </div> 
        </form> 
    </body> 
    </html> 
     

  3. Pavel
    Admin
    Pavel avatar
    904 posts

    Posted 12 Dec 2007 Link to this post

    Hi Paige,

    I suggest you modify the ' Prometheus' version of the Code Library project to ensure everything is easier (if you didn't do that already). Furthermore, I will appreciate if you provide us with more information regarding what result exactly you would like to achieve. Thus we can examine in detail and modify accordingly your code.

    Finally I tried to run the code you posted, but when the script is executed the browser hangs and throws a warning. Have you managed to run it successfully on your machine?

    Best regards,
    Pavel
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Back to Top