Roll multiple calendars at the same time

Question

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

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

Thanks in advance!

Answer 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.

Answer 2

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