Add Javascript To Month Navigation - Calendar Control!
In this blog post, i will explain how to execute javascript function when navigating monthly in the calendar control. As you may know, When the calendar control is rendered to HTML, the ">" and "<" are rendered as anchors HTML control. This is so important to know how to get this control using javascript and add its onclick event handler.
Below is a javascript code to be inserted inside the <head> tag of the HTML page.
<script language="javascript">
function AlertMessage()
{
var elements = document.getElementsByTagName('a');
for(i=0;i<elements.length;i++)
{
if(elements[i].title == "Go to the next month")
{
elements[i].onclick = function(){ alert('Next Month'); return false}
}
if(elements[i].title == "Go to the previous month")
{
elements[i].onclick = function(){ alert('Previous Month'); return false}
}
}
}
</script>
The above code will get all the anchors controls (<a>) inside the body and loop through this collection, check if its title is equal to either "Go to the next month" which is the ">" link or "Go to the previous month" which is the "<" link. when the title match one of these, we set it's onlick event to display just an alert message.Of course you can extend this to achieve whatever functionality you want!!.
Now on page_load event all you have to do is to call that method using
C#:
Page.ClientScript.RegisterStartupScript(this.GetType(), "as", "AlertMessage();", true);
VB.NET:
Page.ClientScript.RegisterStartupScript(me.GetType(), "as", "AlertMessage();", true)
Hope this helps,
Regards,