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
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
0
Lee
Top achievements
Rank 1
answered on 12 Aug 2010, 10:10 PM
ok managed to get it finding old posts.
http://www.telerik.com/community/forums/aspnet-ajax/calendar/radcalendar-automatic-week-selection-instead-of-the-day-selection.aspx
for the selection
http://www.telerik.com/community/code-library/aspnet-ajax/calendar/highlight-the-entire-week-on-single-date-mouse-hover.aspx
for the highlighting
need to figure out the deselect entire week instead of day.....
http://www.telerik.com/community/forums/aspnet-ajax/calendar/radcalendar-automatic-week-selection-instead-of-the-day-selection.aspx
for the selection
http://www.telerik.com/community/code-library/aspnet-ajax/calendar/highlight-the-entire-week-on-single-date-mouse-hover.aspx
for the highlighting
need to figure out the deselect entire week instead of day.....
0
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:
I hope this helps.
Greetings,
Tsvetina
the Telerik team
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
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
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....
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">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
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....
still the click on selected week i want to unselect the week instead of the single date....
0
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
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.
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;
}
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;
}