This is a migrated thread and some comments may be shown as answers.

[Solved] Select week by clicking on day

2 Answers 226 Views

Calendar

This is a migrated thread and some comments may be shown as answers.

2 Answers, 1 is accepted

answered on 11 Dec 2007, 06:27 PM

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> 
 

answered on 12 Dec 2007, 08:43 AM

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