How to replace all href elements when mouseovers with Javascript

Question

I would like to replace all href="javascript:void(0)" to href="http://google.com" when mouseover the image caladd.gif with Javascript and jQuery.

Summary: That means whenever the mouse is over the image, it will trigger the Javascript or jQuery to change the href to another link.

HTML:

<div id="AsynchronousViewDefault_CalendarView">
<div class="ms-acal-header">
<div>
    <table class="ms-acal-month">
    </table>
    <div class="ms-acal-vlink">
        <table>
            <tbody>
                <tr>
                    <td><a href="javascript:void(0)" title="Add" evtid="new_item">
                        <img border="0" src="/_layouts/images/caladd.gif">Add</a></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Javascript:

$(document).ready(function () {
        var abc = $("#AsynchronousViewDefault_CalendarView").find('a[title="Add"][evtid="new_item"]').hover(
          function () {
              $(this).attr('href', 'http://share/Lists/Calendar.aspx?P=P1');
          }
        );
    });

Answer 1

The main issue with the specified approach that Calendar view is not yet generated when an event handler is bound to the mouseover JavaScript event.

It is recommended to take a look at a different approach, where instead of modifying DOM of Calendar, you could customize the Calendar control behavior and properties.

How to customize Calendar New Item link

Rendering template for New Item link is defined in sp.ui.applicationpages.calendar.js:

<a evtid=\"new_item\" title=\"{1}\" href=\"javascript:void(0)\"/><span class=\"ms-addcolumn-span\"><img class=\"ms-addcolumn-icon\" border=\"0\" src=\"{2}\"/></span>{0}</a>

Rendering template could be overridden and the following code sample demonstrates how to set Calendar New Item href attribute to https://www.google.com/calendar/render

function setNewItemUrl(url)
{
   //get New Item template      
   var newItemTemplate = SP.UI.ApplicationPages.CalendarVirtualItem.prototype.$7l_0;
   //override template
   SP.UI.ApplicationPages.CalendarVirtualItem.prototype.$7l_0 = newItemTemplate.replace('javascript:void(0)',url);
}

function registerAddItemLink() 
{           
   setNewItemUrl('https://www.google.com/calendar/render');
}
ExecuteOrDelayUntilScriptLoaded(registerAddItemLink,"SP.UI.ApplicationPages.Calendar.js");

Usage:

• Add CEWP on Calendar page
• Insert the specified JavaScript code into Content property

Note: Have been tested in SharePoint 2013