How to replace all href elements when mouseovers with Javascript

Question

In the Calendar with Add button, 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. The JSFIDDLE below works very well with browsers but it doesn't work with SharePoint 2010.

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');
          }
        );
    });

JSFIDDLE: http://jsfiddle.net/nALMw/

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. For SharePoint 2010 please verify the name of New Item template (in SharePoint 2013: SP.UI.ApplicationPages.CalendarVirtualItem.prototype.$7l_0)

Answer 2

It works on jsfiddle because you have only one link. Look at this example:

$('a[title="Add"]').attr('href', function(i, href) {
    return href = "http://share/Lists/Calendar.aspx?P=P1";
});

JSFiddle example: http://jsfiddle.net/nALMw/1/

Answer 3

I think your problem is a timing issue. I don't believe the Add link is in the DOM that early on, it gets generated when the user is hovering over the date. View source on the page and search for title="Add", you won't find it.

Check out jQuery's .On() method, http://api.jquery.com/on/, as this will capture all events on an object, so attaching that to overarching calendar table should work.

Check out this post for a little more on .On(): http://publicvoidlife.blogspot.com/2014/03/on-on-or-event-delegation-explained.html