digitalZo
asked on
Remove Hyperlink from ASP.NET Calendar
I have an ASP.Net Calendar. I'd like the Calendar to display the dates without the hyperlink and when the user hovers a date it should show the hyperlink. I tried CSS it didnt work, i tried coding it in the Day_Render event, that didnt work either.
This is the code:
Protected Sub Calendar1_DayRender(ByVal sender As Object, ByVal e As System.Web.UI.WebControls. DayRenderE ventArgs) Handles Calendar1.DayRender
e.Cell.Style.Add("textDeco ration", "none")
End Sub
the rendered html:
</td><td class="calendar" align="center" style="color:DarkGray;font -size:7.5p t;width:14 %;textDeco ration:non e;"><a href="javascript:__doPostB ack('Calen dar1','306 8')" style="color:DarkGray" title="May 26">26</a>
This is the code:
Protected Sub Calendar1_DayRender(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.
e.Cell.Style.Add("textDeco
End Sub
the rendered html:
</td><td class="calendar" align="center" style="color:DarkGray;font
ASKER
Nope doesn't work. Nothing happens. it still gives the same output:
<td class="calendar" align="center" style="font-size:7.5pt;wid th:14%;tex tDecoratio n:none;">< a href="javascript:__doPostB ack('Calen dar1','307 5')" style="color:#006699" title="June 02">2</a></td>
<td class="calendar" align="center" style="font-size:7.5pt;wid
digitalZo,
Try this and let me know how it goes:
Add a style in the head of your page. Also, add class="day" to each applicable anchor element.
Try this and let me know how it goes:
Add a style in the head of your page. Also, add class="day" to each applicable anchor element.
<style type="text/css">
td.calendar a.day
{
text-decoration: none !important;
}
td.calendar a.day:hover
{
text-decoration: underline !important;
color: #0000FF !important;
}
</style>
If you mean that text output is not changed - this is correct behaviour. If you would like to get rid of this, you would have to change it in code somewhere hmm... could be difficult. I just provided you code from CSS that will not display it. If you want trully erase this you have two choices - changing hard coded script, or do a workover in Javascript, that after creating this element - finds correct one and remove it by using .removeChild. Second might be more easy to do, but both are difficult. If you dont know how to do this just stick with CSS and everything will be OK i think... Hope it helps
ASKER
<<Add a style in the head of your page. Also, add class="day" to each applicable anchor element.
>>
How do I add the day class to the anchor element? The anchor element is rendered during run time.
This is the ASP.Net calendar code:
<asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#006699" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="#006699" Height="159px" Width="165px" NextMonthText="" PrevMonthText="">
<SelectedDayStyle BackColor="#76ACC8" Font-Bold="True" ForeColor="White" />
<SelectorStyle BackColor="#006699" ForeColor="White" />
<WeekendDayStyle BackColor="#006699" ForeColor="White" />
<OtherMonthDayStyle ForeColor="DarkGray" />
<NextPrevStyle Font-Size="8pt" ForeColor="White" />
<DayHeaderStyle BackColor="#76ACC8" ForeColor="White" Height="1px" Font-Size="7.5pt" />
<TitleStyle BackColor="#006699" BorderWidth="1px" Font-Bold="True" Font-Size="8pt"
ForeColor="White" Height="25px" />
<DayStyle Font-Size="7.5pt" CssClass="day" />
</asp:Calendar>
wilq32:
<<<If you mean that text output is not changed - this is correct behaviour. >>>>
Sorry, I meant it's not displaying the Calendar without hyperlinks even when I added your code
>>
How do I add the day class to the anchor element? The anchor element is rendered during run time.
This is the ASP.Net calendar code:
<asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#006699" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="#006699" Height="159px" Width="165px" NextMonthText="" PrevMonthText="">
<SelectedDayStyle BackColor="#76ACC8" Font-Bold="True" ForeColor="White" />
<SelectorStyle BackColor="#006699" ForeColor="White" />
<WeekendDayStyle BackColor="#006699" ForeColor="White" />
<OtherMonthDayStyle ForeColor="DarkGray" />
<NextPrevStyle Font-Size="8pt" ForeColor="White" />
<DayHeaderStyle BackColor="#76ACC8" ForeColor="White" Height="1px" Font-Size="7.5pt" />
<TitleStyle BackColor="#006699" BorderWidth="1px" Font-Bold="True" Font-Size="8pt"
ForeColor="White" Height="25px" />
<DayStyle Font-Size="7.5pt" CssClass="day" />
</asp:Calendar>
wilq32:
<<<If you mean that text output is not changed - this is correct behaviour. >>>>
Sorry, I meant it's not displaying the Calendar without hyperlinks even when I added your code
Hmmm it might be because of javascript styling overwrites CSS styles, in that case you have two choices - do a routine in JS, or look inside ASP libary, both options are ... stupid.. i know, but what to do ?. You could do something like this:
in onload event just fire your routine in javascript, that will localise this anchor element and remove it from calendar via .removeChild, for example:
<div> some container:
<a href="blabla" id="removeME"> some anchor </a>
</div>
<script type="text/javascript">
document.getElementById('r emoveME'). parentNode .removeChi ld(documen t.getEleme ntById('re moveME'));
</script>
in onload event just fire your routine in javascript, that will localise this anchor element and remove it from calendar via .removeChild, for example:
<div> some container:
<a href="blabla" id="removeME"> some anchor </a>
</div>
<script type="text/javascript">
document.getElementById('r
</script>
ASKER
<<<<<div> some container:
<a href="blabla" id="removeME"> some anchor </a>
</div>>>>>>>
the anchor tag is generated during runtime. how do i add the ID in that case?
<a href="blabla" id="removeME"> some anchor </a>
</div>>>>>>>
the anchor tag is generated during runtime. how do i add the ID in that case?
ASKER
personally tho, wilq32, removing the anchor tag is not the right solution i feel. if the anchor tag is removed it wont select the date and do a postback will it?
anchor is only a control element. You could fire its event in other way (of course if you want to). What .js you include in your html ASP.NET ?? I think that i will have to look into their libary to remove this anchor... But do you really need to remove it? maybe some other option would be good?
ASKER CERTIFIED SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
.classNameForYourCalendar a
{
display:none;
}
IF you want only to turn off this A, you could add ID parameter for this element like <a href="..." id="turnMeOff"> </a> and then turn it off from CSS:
#turnMeOff
{
display:none
}
You could turn it off from JS too, but I think that you dont need that :)
hope it helps