SharePoint Calendar - End Time being overwritten by SharePoint script

Question

I am using the SharePoint content type Schedule and Reservations to set up a rather customised calendar in a SharePoint Online environment. One of the Client's requirements is to set the Start time and End time to 8:00 and 16:00, respectively.

I am using this Jquery code, but it is only working for the Start time case. The End time seems to be always taking the value of the Start Time and increment it by 1.

var startHours = $("#" + $("label:contains('Start Date Required Field Hours')").attr("for"));
var startMinutes = $("#" + $("label:contains('Start Date Required Field Minutes')").attr("for"));

startHours.val("08:");
startMinutes.val("00");

var endHours = $("#" + $("label:contains('End Time Required Field Hours')").attr("for"));
var endMinutes = $("#" + $("label:contains('End Time Required Field Minutes')").attr("for"));

endHours .val("16:");
endMinutes .val("00");

Logic tells me that since the code for the Start Time works, the code for the End Time should also be correct, but some Calendar Javascript is managing to run after my code and revert the value from 16:00 to 08:00 + 1, i.e. 09:00.

I am using the _spBodyOnLoadFunctionNames functionality (as demonstrated below) to ensure that the code is run after the body loads completely, but the End Time still manages to revert to Start Time + 1.

_spBodyOnLoadFunctionNames.push("ready");

function ready(){
   //code goes here
}

Any help?

Answer 1

First off, i wonder why you have a space in your code?

endHours .val("16:");
endMinutes .val("00");

You could try to wrap the end time in a setTimeOut Function to delay it slightly. I'm using a script similar to your's and have a delay of 0.2 seconds, and it work's for me. 1000 is one second.

<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("ready");

function ready(){
var startHours = $("#" + $("label:contains('Start Date Required Field Hours')").attr("for"));
var startMinutes = $("#" + $("label:contains('Start Date Required Field Minutes')").attr("for"));

startHours.val("08:");
startMinutes.val("00");

var endHours = $("#" + $("label:contains('End Time Required Field Hours')").attr("for"));
var endMinutes = $("#" + $("label:contains('End Time Required Field Minutes')").attr("for"));

setTimeout(function() {
    endHours.val("16:");
    endMinutes.val("00");
}, 200);
};
</script>