Paige Cook
Top achievements
Rank 2
Rank 2
Paige Cook
asked on 11 Dec 2007, 03:50 PM
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.
Thanks.
2 Answers, 1 is accepted
0
Paige Cook
Top achievements
Rank 2
Rank 2
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.
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> |
0
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
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