1

I'm working on a page to book meetings rooms. We have 6 rooms, so I made one calendar for each and overlayed them all. I want to do a daily view with all the rooms on the same page, so I inserted all calendars in one page(on day view) and it's perfect. The only problem is that I cannot change the day of them all at the same time and that can be confusing for the user. Is there a way to do that?

Here's a picture screenshot

The ideal would be to remove the buttons from each calendar and create a new one that switches all of them.

Thanks in advance!

1

Give this a whirl:

<style type="text/css">
a[title='Next Day'] { display:none}
a[title='Previous Day'] { display:none}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
    <a href='#' id='newPrevDay'>Previous Day</a> &nbsp; 
    <a href='#' id='newNextDay'>Next Day</a>
</div>

<script type="text/javascript">
$(document).ready(function(){

    ExecuteOrDelayUntilScriptLoaded(overrideButtons,"SP.UI.ApplicationPages.Calendar.js");

    function overrideButtons() {
        $("#newPrevDay").click(function() {
            console.log("previous");
            $("a[title=\"Previous Day\"]").each(function() {
                eval($(this).attr("href"));
            });
        });

        $("#newNextDay").click(function() {
            console.log("next");
            $("a[title=\"Next Day\"]").each(function() {
                eval($(this).attr("href"));
            });
        });
    }
});
</script>

Couple of notes:

  • This is quick and dirty, but should work fine.
  • I tested this with 2 differing calendars on the same page, should work with more, let me know.
  • If you click too fast on the new links, you cals may become out of sync. There might be another way to handle this if that's a problem.
  • Thank you! But I don't know where to put this code, I tried in several places but couldn't get it to work. The buttons appear but they do not work. – user3568868 Apr 29 '14 at 12:55
  • You can put this in a snippet web part on the page – David Lozzi May 2 '14 at 0:37
0

You could write a javascript (likley Jquery based) function that can do this. It would go something to the tune of (this is not real code, just a framework):

$(AnyNextButton).on('click', function() {
    $(EveryOtherNextButton).click();
});
  • Same idea I was heading, but the .click() wouldn't work. Works from the toolbar console, but once in the code like below, it wouldn't click. I had to eval the href. Really weird, and I haven't tested it on other instances/browsers yet. – David Lozzi Apr 25 '14 at 16:17

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.