1

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/

4

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)

  • Thank you for your comment. I am attempting that. Please tell me where I can get the SP.UI.ApplicationPages.CalendarVirtualItem.prototype.$7l_0 – PMay 1903 Apr 24 '14 at 1:35
  • It is declared in sp.ui.applicationpages.calendar.js file (located under layouts folder), but in case of SharePoint 2010 the name of template ($7l_0 in SharePoint 2013) could be different. Let me know in case of any issues. I've tested the specified code in SharePoint 2013 and it works properly. – Vadim Gremyachev Apr 24 '14 at 8:32
  • I got this SP.UI.ApplicationPages.CalendarVirtualItem.prototype={$4Y_0:"ms-acal-vitem",$0_0:null,$C_0:null,$A_0:null,$g_0:null,$1a_0:null,$W_0:null,$3Y:function(b,c){ULSvSp:;if(this.$C_0.$1Y())return; In this case, Am I right if I use SP.UI.ApplicationPages.CalendarVirtualItem.prototype.$4Y_0 ? – PMay 1903 Apr 24 '14 at 8:58
  • I cant confirm since i don't have access to SP 2010 currently, could you please verify the variable that contains "<a evtid=\"new_item\" ... What is the name of that variable? – Vadim Gremyachev Apr 24 '14 at 9:43
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/

  • 1
    I have tested already, but it didn't work at all... Do you have any suggestion for me? – PMay 1903 Apr 24 '14 at 1:38
  • Pls have a look on the JSFiddle link added – Salvatore Di Fazio Apr 24 '14 at 8:01
1

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

  • Thank you for your comment. As I have tested already, my JS runs before the Calendar loads. Thus, I will try with .On() and if I have any problem please help me. – PMay 1903 Apr 24 '14 at 1:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.