none
Multiday Calendar view doesn't have respect our business hours RRS feed

  • Question

  • We have tasks that begin on one day and complete on another day.  For example, we start a 4 hour task at 3pm March 8, stop at 5pm, then restart at 8am March 9 and end it 10am.  We don't work over night.  SharePoint calendar shows the task running all night for a total of 19 hours.  This makes our Calendar view ugly and misleading.  How can we get SharePoint to respect our normal work hours.  In other words, only show Mar 8, 3pm to 5pm, and Mar 9, 8am to 10am?  Thanks.

    Wednesday, March 8, 2017 7:29 PM

Answers

  • Hi,

    Try this:

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                ProcessCalendarLayout();
            })
            function ProcessCalendarLayout() {
                var firstRow = $('tr.ms-acal-hour00').eq(8);
                var lastRow = $('tr.ms-acal-hour00').eq(17);
                var top = $('tr.ms-acal-week-top');
                //setTimeout(function () {
                $('div.ms-acal-item').each(function () {
                    var currentDiv = $(this);
                    if (currentDiv.offset().top > firstRow.offset().top && currentDiv.offset().top + currentDiv.height() > lastRow.offset().top) {
                        var maxHeight = lastRow.offset().top - currentDiv.offset().top;
                        currentDiv.css('height', '' + Math.round(maxHeight) + 'px');
                    }
                    if (currentDiv.offset().top < firstRow.offset().top && currentDiv.offset().top + currentDiv.height() > firstRow.offset().top) {
                        var distance = firstRow.offset().top - top.offset().top;
                        var decrese = firstRow.offset().top - currentDiv.offset().top;
                        var maxHeight = currentDiv.height() - decrese;
                        //alert("firstRow.offset.top" + firstRow.offset().top + "--top.offset.top" + top.offset().top);
                        //currentDiv.appendTo('div.ms-acal-rootdiv');
                        currentDiv.css('top', '' + Math.round(distance + $('div.ms-acal-header').height() + 20) + 'px')
                            .css('height', '' + Math.round(maxHeight) + 'px');
                    }
                    //more logic here
    
                })
                //alert('processing');
                //}, 1500)
            }
            //Start Execution
            ExecuteOrDelayUntilScriptLoaded(CustomizeCalendarEvents, "SP.UI.ApplicationPages.Calendar.js");
            function CustomizeCalendarEvents() {
                //refreshItems  onItemsSucceed($p0, $p1)
                var _onItemsSucceed = SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed;
                //var _refreshItems = SP.UI.ApplicationPages.CalendarStateHandler.prototype.refreshItems;
                //var CalendarStateHandlerPrototype = SP.UI.ApplicationPages.CalendarStateHandler.prototype;
                SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed = function ($p0, $p1) {
                    if (this.$K_1.$8G_0()) {
                        this.$28_1();
                        return;
                    }
                    this.$41_1 = false;
                    if (this.$3G_1) {
                        this.$D_1.$4T_1();
                        this.$3G_1 = false;
                    }
                    if (SP.UI.ApplicationPages.SU.$2(this.$39_1[this.$j_1])) {
                        this.$39_1[this.$j_1] = [];
                    }
                    Array.addRange(this.$39_1[this.$j_1], $p0);
                    this.$D_1.$7S_1(this.$j_1, this.$v_1, $p1, this.$39_1[this.$j_1]);
                    this.$j_1++;
                    this.$1h_1();
                    //alert('callback');
                    //location.reload();
                    ProcessCalendarLayout();
                }
            }
        </script>

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com


    Wednesday, March 29, 2017 8:17 AM

All replies

  • Hi,

    Could you provide details scenario(screenshots) so we could get your issue more clearly and do research?

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Thursday, March 9, 2017 6:18 AM
  • Here's what it looks like.  As you can see from the lighter background, our normal work hours are 8am to 5pm.  But the calendar shows the 4 hour task running from 3pm all the way to 11:59pm, and then continuing from midnight the next day to 10am.  We don't work through the night and want the calendar to show 3pm to 5pm, then start again the next day at 8am to 10am.  Thanks for your help.

    This site is saying my account is not verified yet and won't let me Submit if there are images.  I've verified both the forums email and the Microsoft account.  What does it need from me?

    Can I email the image to you?  Send me an email and I'll reply with the image.  Thanks.

    Thursday, March 9, 2017 6:24 PM
  • Hi,

    The validation for forum account may need serval days, you could upload your screenshots to other site so we could try to check by link.

    Thanks for your understanding.

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Friday, March 10, 2017 6:17 AM
  • Here's the image.  Note that our regular hours are 8am to 5pm.  So we want to show only those times for our tasks, i.e. 3pm to 5pm, and then 8am to 10am the next day.  Which is 4 hours.  And not have it shown as going overnight, as a 19 hour task.  Thanks.

    Tuesday, March 14, 2017 4:33 PM
  • Hello Lee,

    Did you see the screen shot?  Do you have any questions?  I'm really stuck on this and need a solution.  Thanks very much.

    Billy

    Thursday, March 16, 2017 5:06 PM
  • Hi,

    I’ve seen the screenshot you provided, I’ll try to research this and get back.

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Friday, March 17, 2017 1:27 PM
  • Hi,

    Here is the workaround for your reference.

    I just draft a little logic for this, you need add more logic to process different scenarios( including previous/next button).

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">
            $(function () {            
                var firstRow = $('tr.ms-acal-hour00').eq(8);
                var lastRow = $('tr.ms-acal-hour00').eq(17);
                $('div.ms-acal-item').each(function () {
                    var currentDiv = $(this);
                    if (currentDiv.offset().top > firstRow.offset().top && currentDiv.offset().top + currentDiv.height() > lastRow.offset().top) {
                        var maxHeight = lastRow.offset().top - currentDiv.offset().top;
                        currentDiv.css('height', '' + Math.round(maxHeight) + 'px');
                    }
                    //more logic here
                })            
            })
        </script>

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Tuesday, March 21, 2017 8:17 AM
  • Hello Lee,

    I'm a SharePoint novice and wasn't sure where to put that code.  So I tried adding a web part to the calendar page, but that was outside of the calendar web part and had no effect.

    Then I used SP Designer to add your code into the calendar web part.  But that gave a error, "Web Part Error: The file you imported is not valid.  Verify that the file is a Web Part description file (*.webpart or *.dwp) and that it contains well-formed XML."  It didn't like the logical AND, "&&" in the if statement.  It stopped complaining when I replaced it with a logical OR.  But it didn't have any effect on calendar display.  I thought it would change too many tasks, but nothing changed. 

    I then tried moving the code outside of the calendar web part, but that also had no effect.  I'm at a lost on what to try next.  How did you test the code?  Thanks.

    One more thing.  I'm using jquery-1.11.1.min.js as it's the newest approved version for us.  That should be fine, right?

    Bill

    Wednesday, March 22, 2017 12:00 AM
  • Hi,

    Here are my test steps for your reference.

    Calendar uses Week view as default view.

    I create a multiday event so it will look like this.

    Then, click site settings->Edit page->Add a web part->script editor, then insert above jQuery code to it and save the page.

    Here is the result.

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Wednesday, March 22, 2017 7:19 AM
  • Hello Lee,

    Thanks for the details.  I've added the code for the midnight to Start time, but I don't know how to set the top correctly.  I tried this,

    currentDiv.css('top', '' + firstRow.offset().top + 'px');

    but it's always 3+ hours too late.  What's the correct way to set the top?

    Also we only want to show the time from Start Time to End Time.  Not midnight to midnight.  How do I restrict the time range the Start Time to End Time?  Thanks again.

    Thursday, March 23, 2017 1:39 AM
  • Hello Lee,

    Thanks again for your help.

    Perhaps it would be better to limit the displayed time range to start exactly at Start Time, and end exactly at End Time?  This would also fix the problem with the setting the Top to the Start Time. And would eliminate the display of the hours before and after work which are still displayed with the change to the task size.

    Also this week, when I opened the calendar, the script would not execute when I scroll back to last week, i.e. the task height went all the way to midnight.  Last week is where I had put the multi-day tasks.  But when I moved a multi-day task to this week, the script executed correctly.  But when I moved back to last week or any previous week, the script would not execute. Refreshing the page also did not cause the script to execute.

    Thanks for your help.  I really appreciate it.

    Tuesday, March 28, 2017 12:39 AM
  • Hi,

    Try this:

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                ProcessCalendarLayout();
            })
            function ProcessCalendarLayout() {
                var firstRow = $('tr.ms-acal-hour00').eq(8);
                var lastRow = $('tr.ms-acal-hour00').eq(17);
                var top = $('tr.ms-acal-week-top');
                //setTimeout(function () {
                $('div.ms-acal-item').each(function () {
                    var currentDiv = $(this);
                    if (currentDiv.offset().top > firstRow.offset().top && currentDiv.offset().top + currentDiv.height() > lastRow.offset().top) {
                        var maxHeight = lastRow.offset().top - currentDiv.offset().top;
                        currentDiv.css('height', '' + Math.round(maxHeight) + 'px');
                    }
                    if (currentDiv.offset().top < firstRow.offset().top && currentDiv.offset().top + currentDiv.height() > firstRow.offset().top) {
                        var distance = firstRow.offset().top - top.offset().top;
                        var decrese = firstRow.offset().top - currentDiv.offset().top;
                        var maxHeight = currentDiv.height() - decrese;
                        //alert("firstRow.offset.top" + firstRow.offset().top + "--top.offset.top" + top.offset().top);
                        //currentDiv.appendTo('div.ms-acal-rootdiv');
                        currentDiv.css('top', '' + Math.round(distance + $('div.ms-acal-header').height() + 20) + 'px')
                            .css('height', '' + Math.round(maxHeight) + 'px');
                    }
                    //more logic here
    
                })
                //alert('processing');
                //}, 1500)
            }
            //Start Execution
            ExecuteOrDelayUntilScriptLoaded(CustomizeCalendarEvents, "SP.UI.ApplicationPages.Calendar.js");
            function CustomizeCalendarEvents() {
                //refreshItems  onItemsSucceed($p0, $p1)
                var _onItemsSucceed = SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed;
                //var _refreshItems = SP.UI.ApplicationPages.CalendarStateHandler.prototype.refreshItems;
                //var CalendarStateHandlerPrototype = SP.UI.ApplicationPages.CalendarStateHandler.prototype;
                SP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed = function ($p0, $p1) {
                    if (this.$K_1.$8G_0()) {
                        this.$28_1();
                        return;
                    }
                    this.$41_1 = false;
                    if (this.$3G_1) {
                        this.$D_1.$4T_1();
                        this.$3G_1 = false;
                    }
                    if (SP.UI.ApplicationPages.SU.$2(this.$39_1[this.$j_1])) {
                        this.$39_1[this.$j_1] = [];
                    }
                    Array.addRange(this.$39_1[this.$j_1], $p0);
                    this.$D_1.$7S_1(this.$j_1, this.$v_1, $p1, this.$39_1[this.$j_1]);
                    this.$j_1++;
                    this.$1h_1();
                    //alert('callback');
                    //location.reload();
                    ProcessCalendarLayout();
                }
            }
        </script>

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com


    Wednesday, March 29, 2017 8:17 AM
  • Hello Lee,

    Thanks so much for that.  Now both the start and end times are correct and the script runs as I move to different dates.

    But can you explain the code after the comment, "//Start Execution".  What are all those calls doing? 

    Lastly, I have two more questions, that I will be happy to add as new questions, if you prefer.

     I'm sure someone will ask why the time displayed is from 12AM to 12PM.  Can we restrict the time displayed to our work hours?  Is there an API for the calendar?

    And can we keep Saturday and Sunday from being used?  E.g. When we start a multi-day task on Friday afternoon, and finish it Monday morning, it's listed as taking alll weekend. 

    Thanks very much.

    Thursday, March 30, 2017 12:36 AM
  • Hi,

    For ExecuteOrDelayUntilScriptLoaded, here is a good thread talks about this.

    https://www.red-gate.com/simple-talk/blogs/key-points-to-know-when-using-sp-sod-executefunc-and-sp-sod-executeordelayuntilscriptloaded/

     

    CustomizeCalendarEvents used for overwrite OOB onItemsSucceed function, we need reuse OOB logic(otherwise it won’t work) so I add our custom/extend logic in bottom of the logic(ProcessCalendarLayout();).

    For display format(12am~12pm), I think it’s by design action.

     

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Thursday, July 13, 2017 1:54 AM