Previously, I shared about how to create a color coded calendar, and then taking that calendar a little further and jazzing it up with some color. One issue that has been identified with this method, and using calendar overlays in general, is the fact that the events open in a whole new window. Not cool.
I’ve toyed around with some custom JavaScript that can fix this, but haven’t found a solution, until now. Actually, until Kevin commented on my post and pointed me over to this MSDN forum thread.
After reading through the thread, I’ve compiled the follow block of code. You can throw this in the same web part that contains your CSS.
NOTE A few people have reported this doesn’t work in SharePoint 2013. I’ll find a solution. ;)
// load our function to the delayed load list _spBodyOnLoadFunctionNames.push('calendarEventLinkIntercept'); // hook into the existing SharePoint calendar load function. function calendarEventLinkIntercept() { if (SP.UI.ApplicationPages.CalendarNotify.$4a) { var OldCalendarNotify = SP.UI.ApplicationPages.CalendarNotify.$4a; SP.UI.ApplicationPages.CalendarNotify.$4a = function () { OldCalendarNotify(); bindEventClickHandler(); } } if (SP.UI.ApplicationPages.CalendarNotify.$4b) { var OldCalendarNotify = SP.UI.ApplicationPages.CalendarNotify.$4b; SP.UI.ApplicationPages.CalendarNotify.$4b = function () { OldCalendarNotify(); bindEventClickHandler(); } } // future service pack change may go here! // if (SP.UI.ApplicationPages.CalendarNotify.???) } function bindEventClickHandler() { $('.ms-acal-mdiv a, .ms-acal-ddiv a, .ms-acal-sdiv a').click(function(){EditLink2(this,'WPQ2');return false;}); $('a.ms-cal-nav').attr("href", "javascript:bindEventClickHandler(); void(0);"); }
NOTE: Update the first line to your jQuery file if you have it somewhere on your network/site already.
Happy SharePointing!
Awesome. The JS Code works like charm.
Thanks a lot for sharing.
Ok this is now just weird. I will send you the HTML but noticed a few things that might help. I am now not getting any errors when adding the calendar script under IE8 document mode, change it IE9 document mode and I get the Object doesn’t support property or method ‘SPServices’ that’s referencing the slider. If i remove the calendar script, the slider runs fine, no SPServices error for the announcement slider on either Document mode IE8 or IE9.
After all this the calendar script does work, its opening up my calendar overlay in modal but its stuffing up my announcement slider :/
Seems as though it doesn’t like this line from my announcement slider
var heightTemp = 0;
I should mention that even though i dont get any script errors under IE8 document mode, the slider still displays nothing
Hi David, the SPServices js file is there as it runs the announcement slider and works fine. As soon as I add the calendar script then this error pops up and then stops displaying the slider. Leaves me to believe it causes some kind of conflict between the two
Agreed. Email me your HTML output, and your calendar script if it’s not inline and I’ll take a look
Hi David, curious as to whether this script can affect others that are on the same site? Reason being is that even though this script does work its affecting some other scripts on my main site. To further explain, I’ve added the script on the Calendar list page as a CEWP and its all good. On my main site, im using the calendar as a web part so want to be able to utilise this script here also but have a few other modifications utilising java. The one that has stopped working is my announcement slide show modification (http://sympmarc.com/2013/07/19/spservices-stories-14-create-a-slide-show-in-sharepoint-2010-using-an-announcements-list-and-spservices)
There’s obviously some kind of conflict, any ideas as to where to look for it and possibly how to resolve it?
Cheers
Sanchez
Ok so some further investigation found that Developer tools has displayed a script error.
SCRIPT438: Object doesn’t support property or method ‘SPServices’
If it cannot find SPServices, then it sounds like the SPServices JS file isn’t being loaded correctly. View the page source (right click > View Source) and search the page for your SPServices JS file, is it still there? Is it near the JS for this post? If you want, email me your HTML and I’ll take a look, david.lozzi at slalom dot com.
Thanks,
David
Hi, this is great. However, I just wondered whether you’d had any luck with the Day and Week views yet and my calendar needs to default to Day view
This is on my list of things to do, you’re not the first to ask however I have not had a chance to try it yet.
Fixed it! Check out the new code, notably line 33.
Thank you so much for this!
Has anyone found a solution for the SharePoint 2013 issue with SP.UI.ApplicationPages.CalendarNotify. If so, please let me know what solution you used.
Thanks!
Hi, thank you for this. However it did not work for me. I inserted it into the calendar.aspx, and replaced the location of the jquery file to that of my own. However, items continue to load in a new tab. I’m running SharePoint 2010. Any help would be greatly appreciated. Thank you.
Take a look at the developer toolbar and see if there are any script errors. See http://davidlozzi.com/2013/05/15/a-non-developers-intro-to-the-developer-toolbar-scripting/ for more details on how.
No errors, but only this:
SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited.
Thanks,
Phil
Hmmm that won’t help. Can you confirm the code is in there correctly? Are you familiar with JavaScript?
I’m not familiar with JavaScript. Here’s the calendar.aspx code, copied from SharePoint Designer. I downloaded your script instead of copying/pasting, and I inserted the code just below the webpart tag. Thanks for your help:
–
// load our function to the delayed load list
_spBodyOnLoadFunctionNames.push(‘calendarEventLinkIntercept’);
// hook into the existing SharePoint calendar load function.
function calendarEventLinkIntercept()
{
if (SP.UI.ApplicationPages.CalendarNotify.$4a)
{
var OldCalendarNotify = SP.UI.ApplicationPages.CalendarNotify.$4a;
SP.UI.ApplicationPages.CalendarNotify.$4a = function ()
{
OldCalendarNotify();
bindEventClickHandler();
}
}
if (SP.UI.ApplicationPages.CalendarNotify.$4b)
{
var OldCalendarNotify = SP.UI.ApplicationPages.CalendarNotify.$4b;
SP.UI.ApplicationPages.CalendarNotify.$4b = function ()
{
OldCalendarNotify();
bindEventClickHandler();
}
}
}
function bindEventClickHandler() {
$(‘.ms-acal-mdiv a’).click(function(){EditLink2(this,’WPQ2′);return false;});
$(‘.ms-acal-sdiv a’).click(function(){EditLink2(this,’WPQ2′);return false;});
$(‘a.ms-cal-nav’).attr(“href”, “javascript:bindEventClickHandler(); void(0);”);
}
Admissions Interviews Calendar
Default
true
2
Normal
true
true
true
true
true
true
true
/administrative/admissions/Lists/AdmissionsInterviewsCalendar
Modeless
Default
Cannot import this Web Part.
false
00000000-0000-0000-0000-000000000000
g_0b2a345b_9a23_497b_a6af_16988af5e74e
00000000-0000-0000-0000-000000000000
<View Name=”{0B2A345B-9A23-497B-A6AF-16988AF5E74E}” DefaultView=”TRUE” MobileView=”TRUE” MobileDefaultView=”TRUE” Type=”CALENDAR” TabularView=”FALSE” Scope=”Recursive” RecurrenceRowset=”TRUE” DisplayName=”Calendar” Url=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/calendar.aspx” Level=”1″ BaseViewID=”2″ ContentTypeID=”0x” MobileUrl=”_layouts/mobile/viewdaily.aspx” ImageUrl=”/_layouts/images/events.png”><ViewFields><FieldRef Name=”EventDate”/><FieldRef Name=”EndDate”/><FieldRef Name=”Title”/><FieldRef Name=”fRecurrence” Explicit=”TRUE”/></ViewFields><CalendarViewStyles><CalendarViewStyle Title='Day' Type='day' Template='CalendarViewdayChrome' Sequence='1' Default='TRUE' /><CalendarViewStyle Title='Week' Type='week' Template='CalendarViewweekChrome' Sequence='2' Default='FALSE' /><CalendarViewStyle Title='Month' Type='month' Template='CalendarViewmonthChrome' Sequence='3' Default='FALSE' /></CalendarViewStyles><Query><Where><And><DateRangesOverlap><FieldRef Name=”EventDate”/><FieldRef Name=”EndDate”/><FieldRef Name=”RecurrenceID”/><Value Type=”DateTime”><Month/></Value></DateRangesOverlap><IsNull><FieldRef Name=”Category”/></IsNull></And></Where></Query><Aggregations Value=”Off”/><RowLimit>0</RowLimit><Mobile MobileItemLimit=”3″/><Toolbar Type=”Standard”/><CalendarSettings><AggregationCalendars><AggregationCalendar Id=”{87b5911d-8411-48f8-9b49-4eb729ed8dbe}” Type=”SharePoint” Name=”Other (Default) Calendar” Description=”” Color=”9″ AlwaysShow=”False” CalendarUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/Other Events.aspx”><Settings WebUrl=”https://sharepoint.thehill.org/administrative/admissions” ListId=”{47312f5c-0949-4db7-857b-3ce23e4ef567}” ViewId=”{eb28be18-1354-4789-8a2b-18b5e2d47c9d}” ListFormUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/DispForm.aspx”/></AggregationCalendar><AggregationCalendar Id=”{f1a639c0-da58-464e-9660-2673a1ed7d71}” Type=”SharePoint” Name=”Meeting Calendar” Description=”” Color=”5″ AlwaysShow=”False” CalendarUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/Meeting.aspx”><Settings WebUrl=”https://sharepoint.thehill.org/administrative/admissions” ListId=”{47312f5c-0949-4db7-857b-3ce23e4ef567}” ViewId=”{7f46506c-20bd-4db2-a23b-8fe47a389109}” ListFormUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/DispForm.aspx”/></AggregationCalendar><AggregationCalendar Id=”{11b23423-ee2b-4475-aa7f-4824ca035d7a}” Type=”SharePoint” Name=”Off-Campus Interview Calendar” Description=”” Color=”2″ AlwaysShow=”False” CalendarUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/OffCampus Interview.aspx”><Settings WebUrl=”https://sharepoint.thehill.org/administrative/admissions” ListId=”{47312f5c-0949-4db7-857b-3ce23e4ef567}” ViewId=”{a3dd61cf-d387-47d9-8b6e-be02a38c0cb8}” ListFormUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/DispForm.aspx”/></AggregationCalendar><AggregationCalendar Id=”{2a4ae41a-44a3-455e-8565-b014880e7a22}” Type=”SharePoint” Name=”Phone Interview Calendar” Description=”” Color=”6″ AlwaysShow=”False” CalendarUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/Phone Interview.aspx”><Settings WebUrl=”https://sharepoint.thehill.org/administrative/admissions” ListId=”{47312f5c-0949-4db7-857b-3ce23e4ef567}” ViewId=”{6ebd0a90-a2a0-4f73-b96b-6c66846d3d95}” ListFormUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/DispForm.aspx”/></AggregationCalendar><AggregationCalendar Id=”{0a4eabfc-2074-4592-ab5d-ae7119999b5f}” Type=”SharePoint” Name=”Skype Interview Calendar” Description=”” Color=”4″ AlwaysShow=”False” CalendarUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/Skype Interview.aspx”><Settings WebUrl=”https://sharepoint.thehill.org/administrative/admissions” ListId=”{47312f5c-0949-4db7-857b-3ce23e4ef567}” ViewId=”{b7bcc10a-ca8e-41cb-beab-8e9dd0ca9437}” ListFormUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/DispForm.aspx”/></AggregationCalendar><AggregationCalendar Id=”{af56f3b3-54e8-4060-a1ee-c7bed628c46c}” Type=”SharePoint” Name=”Tour and Chat Calendar” Description=”” Color=”3″ AlwaysShow=”False” CalendarUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/Tour and Chat.aspx”><Settings WebUrl=”https://sharepoint.thehill.org/administrative/admissions” ListId=”{47312f5c-0949-4db7-857b-3ce23e4ef567}” ViewId=”{e7b6b80a-730f-4813-9475-3dc57d1c96f2}” ListFormUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/DispForm.aspx”/></AggregationCalendar><AggregationCalendar Id=”{ae4bf888-0480-4437-a533-d3002ce5fb43}” Type=”SharePoint” Name=”Travel Calendar” Description=”” Color=”7″ AlwaysShow=”False” CalendarUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/Travel.aspx”><Settings WebUrl=”https://sharepoint.thehill.org/administrative/admissions” ListId=”{47312f5c-0949-4db7-857b-3ce23e4ef567}” ViewId=”{b05a2535-e1ea-452f-88e9-2de6990c1d1d}” ListFormUrl=”/administrative/admissions/Lists/AdmissionsInterviewsCalendar/DispForm.aspx”/></AggregationCalendar></AggregationCalendars></CalendarSettings><ViewHeader/><ViewBody/><ViewFooter/><ViewEmpty/><ParameterBindings><ParameterBinding Name=”NoAnnouncements” Location=”Resource(wss,noXinviewofY_LIST)”/><ParameterBinding Name=”NoAnnouncementsHowTo” Location=”Resource(wss,noXinviewofY_DEFAULT)”/></ParameterBindings><ViewData><FieldRef Name=”Title” Type=”CalendarMonthTitle”/><FieldRef Name=”Title” Type=”CalendarWeekTitle”/><FieldRef Name=”Location” Type=”CalendarWeekLocation”/><FieldRef Name=”Title” Type=”CalendarDayTitle”/><FieldRef Name=”Location” Type=”CalendarDayLocation”/></ViewData></View>
{47312F5C-0949-4DB7-857B-3CE23E4EF567}
47312f5c-0949-4db7-857b-3ce23e4ef567
PAGE_DEFAULTVIEW
27799553
Html Recursive RecurrenceRowset Calendar FilesOnly Mobile DefaultMobile
0x
.ms-bodyareaframe {
padding: 0px;
}
That didn’t paste cleanly, can you email me the entire ASPX page (view source on the page). My email is david.lozzi at slalom.com.
Just sent it to you. Thanks again.
Thanks again for all your help via email in helping me learn a little more about JavaScript and the HTML Forms web part. For all who may not know, like myself, add an HTML Forms web part to the page, edit the web part, and use the “source editor…” button to paste the script.
Lastly, it appears that only all-day appointments open within the current tab when viewing the calendar in day or week view. I have to be the one whose users just so happened to request their calendar be set to default in day view! Any help is greatly appreciated.
Thanks for the feedback. I’ll look into the weekly and daily calendar views this week!
How are you making out? Just checking in so I don’t forget about this myself.
Thanks,
Phil
Thanks for the reminder. It slipped off my plate. I’m aiming to get to it by the end of the week.
Hi Phil,
Sorry for the delay, but it’s been fixed, should work on week and day views. New code in post above, specifically line 33. Let me know how it goes!
Regards,
David
It works! Thank you so much David, it is much appreciated.
-Phil
Excellent!
Worked first time.
SP2010 – 4 Overlays
Thanks !
Thanks it Works!!!!
Great, thanks for sharing!!
I tried dropping this into a Script Editor WebPart and also an HTML Forms Webpart but after saving all AJAX stops working on the page. I used the script from the text download. Not sure what I am doing wrong.
I’m assuming you’re on SP2013? I haven’t tried this with 2013, but it sounds like there may be a conflict. Oh the joys of upgrading. I’ll check it out.
Yes, Foundation 2013. Sorry.
It looks like this script does not work on SP2013. I’ll work on another solution.
Thanks so much for this post, David. I have been using some similar code that I found on the internet to stop my overlay calendar items from opening in new tabs.
Just recently I hit a snag which occurred when a particular day had too many items to show in month view. The “1 more item” link was failing to expand and show all items. Instead, I got a message to say “Internet Explorer cannot display the webpage”.
My knowledge of Javascript is limited, and my jscript knowledge is non-existent, but the code I had been using referred only to “.ms-acal-rootdiv” in the bindEventClickHandler() funtion, whereas your function has 3 elements to it. It seems it may be the modification of the “a.ms-cal-nav” href attribute that has fixed my problem. I’m using your code in a Content Editor web part and my multi-event days are now expanding and collapsing when I click the links.
Thanks again,
Julian.
That’s interesting, can you share what code works for you exactly? I can update my post so we can all benefit. Thanks!
Brilliant Post, thank you very much. However I have noticed a bug,
I think you intended to put the code Avikal supplied, however you have just duplicated
$(‘.ms-acal-mdiv a’).click(function(){EditLink2(this,’WPQ2′);return false;});
I think line 33 should read: $(‘.ms-acal-mdiv a’).attr(‘onclick’,”).unbind(‘click’);
Scratch that post above…
Hi David.. I have similar problem as Jimmy, actually, the script works perfect for all the other items, but not for the native items (items created for the same overlay on which the other overlays are created) because the default modal popup works for native items so when u click on such item, it opens a modal popup and over it again opens another modal popup. First the default one and the second is due the script.
So for this I have updated the script a bit. Have placed:
$(‘.ms-acal-mdiv a’).attr(‘onclick’,”).unbind(‘click’);
Before this line:
$(‘.ms-acal-mdiv a’).click(function(){EditLink2(this,’WPQ2′);return false;});
So it will unbind first all the onclick attributes and then will bind with required one, so that only one onclick will function.
Thanks,
Avikal
Awesome, thanks Avikal for the code, I’ll get my script updated!
I read everything you publish D-lo. Thanks for the great contributions to sharepoint land.
Thanks Steve, I appreciate it!
In what section of SharePoint Designer 2010 would you copy the above code to?
You can throw it towards the bottom of the page, or even right above tag. You can also use a web part instead, which might be easier? HTH
Would this be in the Calendar.aspx page? Also, I tried a HTML and content editor web part but it did not work. I uploaded a jquery file to a docoument library I created called Scripts and pasted the code below after tag.
// load our function to the delayed load list
_spBodyOnLoadFunctionNames.push(‘calendarEventLinkIntercept’);
// hook into the existing SharePoint calendar load function.
function calendarEventLinkIntercept()
{
if (SP.UI.ApplicationPages.CalendarNotify.$4a)
{
var OldCalendarNotify = SP.UI.ApplicationPages.CalendarNotify.$4a;
SP.UI.ApplicationPages.CalendarNotify.$4a = function ()
{
OldCalendarNotify();
bindEventClickHandler();
}
}
if (SP.UI.ApplicationPages.CalendarNotify.$4b)
{
var OldCalendarNotify = SP.UI.ApplicationPages.CalendarNotify.$4b;
SP.UI.ApplicationPages.CalendarNotify.$4b = function ()
{
OldCalendarNotify();
bindEventClickHandler();
}
}
// future service pack change may go here!
// if (SP.UI.ApplicationPages.CalendarNotify.???)
}
function bindEventClickHandler() {
$(‘.ms-acal-mdiv a’).click(function(){EditLink2(this,’WPQ2′);return false;});
$(‘.ms-acal-sdiv a’).click(function(){EditLink2(this,’WPQ2′);return false;});
$(‘a.ms-cal-nav’).attr(“href”, “javascript:bindEventClickHandler(); void(0);”);
}
Sorry it did not paste correctly. This is after the
// load our function to the delayed load list
_spBodyOnLoadFunctionNames.push(‘calendarEventLinkIntercept’);
// hook into the existing SharePoint calendar load function.
function calendarEventLinkIntercept()
{
if (SP.UI.ApplicationPages.CalendarNotify.$4a)
{
var OldCalendarNotify = SP.UI.ApplicationPages.CalendarNotify.$4a;
SP.UI.ApplicationPages.CalendarNotify.$4a = function ()
{
OldCalendarNotify();
bindEventClickHandler();
}
}
if (SP.UI.ApplicationPages.CalendarNotify.$4b)
{
var OldCalendarNotify = SP.UI.ApplicationPages.CalendarNotify.$4b;
SP.UI.ApplicationPages.CalendarNotify.$4b = function ()
{
OldCalendarNotify();
bindEventClickHandler();
}
}
// future service pack change may go here!
// if (SP.UI.ApplicationPages.CalendarNotify.???)
}
function bindEventClickHandler() {
$(‘.ms-acal-mdiv a’).click(function(){EditLink2(this,’WPQ2′);return false;});
$(‘.ms-acal-sdiv a’).click(function(){EditLink2(this,’WPQ2′);return false;});
$(‘a.ms-cal-nav’).attr(“href”, “javascript:bindEventClickHandler(); void(0);”);
}
Hi Christy,
Did you copy and paste the script from the post above? If you did, download the script file instead, links above and below the code. I see some invalid characters in your code, not sure if that just happened or if it exists in your original:
(‘calendarEventLinkIntercept’)
should be
(‘calendarEventLinkIntercept’)
the apostrophes get converted.
HTH
Looks like WordPress comments converts the apostrophes too. So, try the script from the file. If that doesn’t work, email me your script and I can test on my end, david.lozzi at slalom.com.
Hi David, I’m not seeing where I can download the code from. Can you help me out?
The code is in the post itself, no download, more of a copy/paste
Hi David,
For some reason, the script it not working. I’ve checked the jquery source and it’s not blocked by our firewall so unsure what’s going on. Is it possible to send you the script to see if it works on your end?
Yes, you can email me at david.lozzi at slalom.com. Thanks.
Copying the code form wordpress does some weird stuff. Specifically, the quotes and apostrophes are incorrect. Copied as ” should be “, ‘calendarEventLinkIntercept’ should be ‘calendarEventLinkIntercept’. I emailed you your updated code. Let me know how it goes.
I’ll update my post to use a text file instead of embedding the code in the page.
Hi David
I tried using your code in my calendar inside Content Editor webpart but its not working.
Acctually i dont have access to any of the master page files on the server i am having admin access to the site and all that i can do is to write any script and try to resolve this issue by stoping it to open in new window when i am editing the event in calendar.
David can u help he out how to add this code in the page, I need to resolve it ASAP.
Can you try a HTML Forms web part instead? I find these work better. Also, can you email me your entire script, and I’ll give it a whirl on my side, david.lozzi at slalom.com. Thanks
David, there is a bug with this solution, and I was wondering if you could help me out. I’m using this code. I have a SharePoint calendar, and using it to force a calendar overlay event to open in a modal dialog. Basically, it forces them to open in a modal dialog via this code:
$(‘.ms-acal-ddiv a’).click(function(){EditLink2(this,’WPQ2′);return false;});
The problem is that there are already “native” events on the calendar which open with this code, and what is happening is that when you click on it, the events open TWICE with a modal dialog, thus rendering the page unusable.
I’m not savvy with writing jquery or javascript. How can I write the javascript to look for that code, and prevent it from running if the link already executes with that?
Thanks for the help in advance.
Can you email me your full script and I can try it out on my end. My email is david.lozzi at slalom.com. Thanks
Jimmy, try the new script file I included above in the post. Copying the script from the page carries over invalid characters which may be conflicting in the browser. LMK
Hi David,
The code works fine, nice job.