Develop Reference

Convert This to a document.write Alternative Solution?

The following script works well on a page by itself. However, when embedding it, the document.write takes over, thus rendering the rest of the page into oblivion. I would like an alternative solution to building the required links via variables. I have little to no experience with anything beyond document.write for these kinds of things. Any help/guidance is greatly appreciated.
<script language="javascript" type="text/javascript">
Today = new Date();
TodayDay = Today.getDate();
TodayMon = Today.getMonth();
TodayYear = Today.getYear();
if (TodayYear < 2000) TodayYear += 1900;
escNextYear = TodayYear;
escTwoYears = TodayYear;
if (TodayMon == 0) { TodayMonth = "January"; escNextMonth = "February"; escTwoMonths = "March"; }
else if (TodayMon == 1) { TodayMonth = "February"; escNextMonth = "March"; escTwoMonths = "April"; }
else if (TodayMon == 2) { TodayMonth = "March"; escNextMonth = "April"; escTwoMonths = "May"; }
else if (TodayMon == 3) { TodayMonth = "April"; escNextMonth = "May"; escTwoMonths = "June"; }
else if (TodayMon == 4) { TodayMonth = "May"; escNextMonth = "June"; escTwoMonths = "July"; }
else if (TodayMon == 5) { TodayMonth = "June"; escNextMonth = "July"; escTwoMonths = "August"; }
else if (TodayMon == 6) { TodayMonth = "July"; escNextMonth = "August"; escTwoMonths = "September"; }
else if (TodayMon == 7) { TodayMonth = "August"; escNextMonth = "September"; escTwoMonths = "October"; }
else if (TodayMon == 8) { TodayMonth = "September"; escNextMonth = "October"; escTwoMonths = "November"; }
else if (TodayMon == 9) { TodayMonth = "October"; escNextMonth = "November"; escTwoMonths = "December"; }
else if (TodayMon == 10) { TodayMonth = "November"; escNextMonth = "December"; escTwoMonths = "January"; }
else if (TodayMon == 11) { TodayMonth = "December"; escNextMonth = "January"; escTwoMonths = "February"; }
else { TodayMonth = TodayMon; }
if (TodayMon == 11) {escTwoYears = TodayYear+1};
if (TodayMon == 11) {escNextYear = TodayYear+1};
if (TodayMon == 10) {escTwoYears = TodayYear+1};
escdate = TodayMon+1 + "/01/" + TodayYear;
escNextMon = TodayMon+2 + "/01/" + TodayYear; //Vinnie
if (escNextMon > 12) {escNextMon = escNextMon - 12};
escTwoMon = TodayMon+3;
if (escTwoMon > 12) {escTwoMon = escTwoMon - 12};
escdatenext = escNextMon + "/01/" + escNextYear;
escdatetwo = escTwoMon + "/01/" + escTwoYears;
// document.write(escdate);
// document.write(TodayMonth + " " + TodayDay + ", " + TodayYear);
html = '<center>Please click on the month to view<br />the Professional Development Calendar for<br />' +
'<strong>' + TodayMonth + '</strong>, ' +
'<strong>' + escNextMonth + '</strong>, and ' +
'<strong>' + escTwoMonths + '</strong>' +
'<p><div style="border: 3px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 736px;">' +
'<iframe scrolling="yes" src="https://www.escweb.net/ar_esc/catalog/coopcalendar.aspx?location=2464&mode=weekly" style="border: 0px none; height: 600px; width: 100%;"></iframe>';
document.write(html);
</script>

It looks like the reason your page is being rendered "into oblivion" is because there are HTML tags that aren't being closed. Try this:
html = '<center>Please click on the month to view<br />the Professional Development Calendar for<br />' +
'<strong>' + TodayMonth + '</strong>, ' +
'<strong>' + escNextMonth + '</strong>, and ' +
'<strong>' + escTwoMonths + '</strong>' +
'<p><div style="border: 3px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 736px;">' +
'<iframe scrolling="yes" src="https://www.escweb.net/ar_esc/catalog/coopcalendar.aspx?location=2464&mode=weekly" style="border: 0px none; height: 600px; width: 100%;"></iframe>' +
'</div></p></center>';

Add hours, minutes and seconds to date via Javascript then display on title

I have a simple script that is supposed to show you the current date and supposed to leave a message based on the date. I am trying to get it so that I can display it, but also show that because the next month is upcoming, lets say the 25th and later, it would say that the next month is coming up. I am also not sure how to use a setinterval() to make the time look like its counting.
So far, this is what I have:
var message1 = "Have a nice week!";
var message2 = "The weekend is almost here!";
var message3 = "Enjoy the weekend !";
var dateText = "";
function output() {
var today = new Date();
var dd = today.getDate();
dayValue = today.getDay();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
todaysDate = (mm + "/" + dd + "/" + yyyy);
if (dayValue == 0) {
dateText += "Sunday";
document.write("Today is: " + dateText + " " + todaysDate + " " + message3);
}
if (dayValue == 1) {
dateText += "Monday";
document.write("Today is: " + dateText + " " + todaysDate + " " + message1);
}
if (dayValue == 2) {
dateText += "Tuesday";
document.write("Today is: " + dateText + " " + todaysDate + " " + message1);
}
if (dayValue == 3) {
dateText += "Wednesday";
document.write("Today is: " + dateText + " " + todaysDate + " " + message1);
}
if (dayValue == 4) {
dateText += "Thursday";
document.write("Today is: " + dateText + " " + todaysDate + " " + message2);
}
if (dayValue == 5) {
dateText += "Friday";
document.write("Today is: " + dateText + " " + todaysDate + " " + message2);
}
if (dayValue == 6) {
dateText += "Saturday";
document.write("Today is: " + dateText + " " + todaysDate + " " + message3);
}
}
<body onLoad="output()" ;></body>
Thank you.

You could use setInterval to call your output function periodically, and then call that function onload.
Find the solution in the attached snippet.
var message1 = "Have a nice week!";
var message2 = "The weekend is almost here!";
var message3 = "Enjoy the weekend !";
function setOutput(){
setInterval(output, 3000);
}
function output() {
var today = new Date();
var dd = today.getDate();
var dayValue = today.getDay();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
var hh= today.getHours();
var MM= today.getMinutes();
var ss= today.getSeconds();
var dateText = "";
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
var todaysDate = (mm + "/" + dd + "/" + yyyy + " "+hh+":"+MM+":"+ss);
var titleElement = document.getElementById("title");
if (dayValue == 0) {
dateText += "Sunday";
titleElement.innerHTML = "Today is: " + dateText + " " + todaysDate + " " + message3;
}
if (dayValue == 1) {
dateText += "Monday";
titleElement.innerHTML ="Today is: " + dateText + " " + todaysDate + " " + message1;
}
if (dayValue == 2) {
dateText += "Tuesday";
titleElement.innerHTML ="Today is: " + dateText + " " + todaysDate + " " + message1;
}
if (dayValue == 3) {
dateText += "Wednesday";
titleElement.innerHTML ="Today is: " + dateText + " " + todaysDate + " " + message1;
}
if (dayValue == 4) {
dateText += "Thursday";
titleElement.innerHTML ="Today is: " + dateText + " " + todaysDate + " " + message2;
}
if (dayValue == 5) {
dateText += "Friday";
titleElement.innerHTML ="Today is: " + dateText + " " + todaysDate + " " + message2;
}
if (dayValue == 6) {
dateText += "Saturday";
titleElement.innerHTML ="Today is: " + dateText + " " + todaysDate + " " + message3;
}
}
<body onLoad="setOutput()" ;>
<div id="title"></div>
</body>

For this you can use moment js. In moment js, it is providing so many method for customisation like format, date, weekday and so many methods are available.
You can use on basis your requirements.
Here is below, I have created a demo, I hope this will help/guide you to achieve your requirement.
var msg = ["Have a nice week!", "The weekend is almost here!", "Enjoy the weekend !"], // As per your reuirement I have just only put into array.
weekDays = moment.weekdays(), //it will return all the weekname
date = moment(); //this will return today date
//this function will return text basis of week day number
function getMsg(d) {
let weekMsg = '';
switch (d.day()) {
case 1:
case 2:
case 3:
weekMsg = msg[0];
break;
case 4:
case 5:
weekMsg = msg[1];
break;
default:
weekMsg = msg[2];
}
return weekMsg;
}
//this function will put log on console..
function putConsole(d) {
console.log(`Today is : ${weekDays[d.day()]}, ${d.format("DD MMMM YYYY hh:mm:ss a")} ${getMsg(d)}`);
}
document.getElementById('title').innerHTML = `Today is : ${weekDays[date.day()]}, <b id="timer">${date.format("DD MMMM YYYY hh:mm:ss a")}</b> ${getMsg(date)}`
setInterval(function() {
date.add(1, 'seconds');
document.getElementById('timer').innerHTML = date.format("DD MMMM YYYY hh:mm:ss a");
}, 1000)
putConsole(moment('2018-03-11')); //For Sunday
putConsole(moment('2018-03-12')); //For Monday
putConsole(moment('2018-03-14')); //For Wednesday
putConsole(moment('2018-03-15')); //For Thursday
putConsole(moment('2018-03-16')); //For Friday
putConsole(moment('2018-03-17')); //For Saturday
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js"></script>
<div id="title"></div>

To add a different message at the end of the month, you just need to get the date using getDate and do a comparison, (new Date()).getDate() >= 25. As for creating a clock, you just create a function that updates the time on the page and then call it with setInterval. setInterval is really easy to use, you just pass a function to run, and an interval (in milliseconds). It returns the id of the timer that it creates, which you can store if you want to later stop the timer using clearInterval. In the example below, I am using toLocaleString to format the date instead of building up a string like your code does or using a library like moment.js like another answer suggested. document.write should be avoided, instead I am creating a separate element on the page for the message and the date/time and updating them independently when needed.
// the updateTimer variable will hold a function
// that is returned by this IIFE
const updateTimer = (function () {
let lastDate;
const elMotd = document.getElementById('motd');
const elDateTime = document.getElementById('datetime');
const dateOptions = {
weekday: 'long',
year: 'numeric',
month: 'numeric',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric'
};
// return the function that will be stored in the global
// updateTimer variable.
// the `now` parameter defaults to a date object representing
// the current time/date if updateTimer is not passed any arguments.
return function updateTimer (now = (new Date())) {
let currentDate = now.getDate();
// only update the message of the day if
// the date has changed (or this is the first run
if (currentDate !== lastDate) {
lastDate = currentDate;
let motd;
// using a switch instead of multiple if/then statments
// can make things much simpler and easier to read
switch (now.getDay()) {
// Thur - Fri
case 4:
case 5:
motd = "The weekend is almost here!";
break;
// Sat - Sun
case 6:
case 0:
motd = "Enjoy the weekend!";
break;
// Mon - Wed
default:
motd = "Have a nice week!";
}
if (currentDate >= 25) {
motd = 'It is almost a new month. ' + motd;
}
elMotd.textContent = motd;
}
elDateTime.textContent = now.toLocaleString('en-US', dateOptions);
}
}());
// run updateTimer immediately so we don't have to wait one second
// for the first update
updateTimer();
// start a timer to update once a second
let timer = setInterval(updateTimer, 1000);
// the stuff below here is just here for the example
document.getElementById('first').addEventListener('click', () => {
clearInterval(timer);
let d = new Date();
d.setDate(1);
updateTimer(d);
}, false);
document.getElementById('twentysixth').addEventListener('click', () => {
clearInterval(timer);
let d = new Date();
d.setDate(26);
updateTimer(d);
}, false);
div {
margin: 1em;
padding: 1em;
border: #ccc solid 1px;
}
Today is: <span id="datetime"></span> <span id="motd"></span>
<!--the stuff below here is just here for the example -->
<div>
Stop timer and...
<button type="button" id="first">Set date to the first of the month</button>
<button type="button" id="twentysixth">Set date to the 26th of the month</button>
</div>

I am trying to simplify this code

Can this code be simplified? I am pretty sure it can be achieved by abstracting the variable and using an if else or a switch, each case would be the element ID...I'm having a a difficult time working through this.
function NoTime() {
if (shortTime == "") {
timeFormat = "N/A"
}
}
var shortTime;
var day;
var month;
var year;
var revisionDate = document.getElementById("RevisionDate").value;
shortTime = revisionDate;
day = revisionDate.substring(8, 10);
month = revisionDate.substring(4, 7);
year = revisionDate.substring(11, 15);
var timeFormat = day + " " + month + " " + year;
NoTime();
$("#RevisionDate")
.replaceWith("<div id='RevisionDate' class='col-md-12 margin-bottom-10px pad-L-15px border-1px width-174px pad-LR-3px width-227px' /></div>");
$("#RevisionDate").html(timeFormat);
var supplierPartInformationEffectiveDate = document.getElementById("SupplierPartInformationEffectiveDate")
.value;
shortTime = supplierPartInformationEffectiveDate;
day = supplierPartInformationEffectiveDate.substring(8, 10);
month = supplierPartInformationEffectiveDate.substring(4, 7);
year = supplierPartInformationEffectiveDate.substring(11, 15);
var timeFormat = day + " " + month + " " + year;
NoTime();
$("#SupplierPartInformationEffectiveDate")
.replaceWith("<div id='SupplierPartInformationEffectiveDate' class='col-md-12 margin-bottom-10px pad-LR-3px border-1px pad-LR-3px width-342px' /></div>");
$("#SupplierPartInformationEffectiveDate").html(timeFormat);
var SupplierPartInformationExpirationDate = document.getElementById("SupplierPartInformationExpirationDate")
.value;
shortTime = SupplierPartInformationExpirationDate;
day = SupplierPartInformationExpirationDate.substring(8, 10);
month = SupplierPartInformationExpirationDate.substring(4, 7);
year = SupplierPartInformationExpirationDate.substring(11, 15);
var timeFormat = day + " " + month + " " + year;
NoTime();
$("#SupplierPartInformationExpirationDate")
.replaceWith("<div id='SupplierPartInformationExpirationDate' class='col-md-12 margin-bottom-10px pad-LR-3px border-1px pad-LR-3px width-342px' /></div>");
$("#SupplierPartInformationExpirationDate").html(timeFormat);

var idArray = [ RevisionDate, SupplierPartInformationEffectiveDate, SupplierPartInformationExpirationDate ];
var attrIDArray = ["RevisionDate", "SupplierPartInformationEffectiveDate", "SupplierPartInformationExpirationDate"];
var stringIDArray = ["#RevisionDate", "#SupplierPartInformationEffectiveDate", "#SupplierPartInformationExpirationDate"];
for (i = 0; i < idArray.length; i++) {
var value = document.getElementById(attrIDArray[i]).value;
var day = value.substring(8, 10);
var month = value.substring(4, 7);
var year = value.substring(11, 15);
var timeFormat = day + " " + month + " " + year;
if (value == "") {
timeFormat = "N/A";
}
$(stringIDArray[i]).replaceWith("<div id='" + attrIDArray[i] + "' class='col-md-12 margin-bottom-10px pad-L-15px border-1px pad-LR-3px pad-TB-2px darkgrey-border-1px' /></div>");
if (stringIDArray[i] === "#RevisionDate") {
$("#RevisionDate").css("width", "227px");
} else {
$("#SupplierPartInformationEffectiveDate").css("width", "342px");
$("#SupplierPartInformationExpirationDate").css("width", "342px");
}
$(stringIDArray[i]).html(timeFormat);
}

Calender: Show dates upto next 1 week from current week

Hello friends I have a calendar with next previous button when user clicks on next button next week schedule will come if again user clicks nothing will happen I want to show dates upto next 1 week
My JavaScript for Next Button
function Next()
{
/*sunday*/
var next_sunday = new Date(current_week.setDate(current_week.getDate() - current_week.getDay()+7));
var sunday = [next_sunday.getDate()];
var smonth = [next_sunday.getMonth() + 1] ;
var syear = [next_sunday.getFullYear()];
var sunday_date= syear + '-' + smonth + '-' + sunday;
alert(sunday_date);
document.getElementById("sunday").innerHTML =sunday;
/*monday*/
var next_monday = new Date(current_week.setDate(current_week.getDate() - current_week.getDay()+1));
var monday = [next_monday.getDate()];
var mmonth = [next_monday.getMonth() + 1] ;
var myear = [next_monday.getFullYear()];
var monday_date= myear + '-' + mmonth + '-' + monday;
alert(monday_date);
document.getElementById("monday").innerHTML =monday;
/*Tuesday*/
var next_tuesday = new Date(current_week.setDate(current_week.getDate() - current_week.getDay()+2));
var tuesday = [next_tuesday.getDate()];
var tmonth = [next_tuesday.getMonth() + 1] ;
var tyear = [next_tuesday.getFullYear()];
var tuesday_date= tyear + '-' + tmonth + '-' + tuesday;
alert(tuesday_date);
document.getElementById("tuesday").innerHTML =tuesday;
/*Wednesday*/
var next_wedday = new Date(current_week.setDate(current_week.getDate() - current_week.getDay()+3));
var wednesday = [next_wedday.getDate()];
var wmonth = [next_wedday.getMonth() + 1] ;
var wyear = [next_wedday.getFullYear()];
var wednesday_date= wyear + '-' + wmonth + '-' + wednesday;
alert(wednesday_date);
document.getElementById("wednesday").innerHTML =wednesday;
/*Thursday*/
var next_thuday = new Date(current_week.setDate(current_week.getDate() - current_week.getDay()+4));
var thursday = [next_thuday.getDate()];
var thmonth = [next_thuday.getMonth() + 1] ;
var thyear = [next_thuday.getFullYear()];
var thursday_date= thyear + '-' + thmonth + '-' + thursday;
alert(thursday_date);
document.getElementById("thursday").innerHTML =thursday;
/*friday*/
var next_friday = new Date(current_week.setDate(current_week.getDate() - current_week.getDay()+5));
var friday = [next_friday.getDate()];
var fmonth = [next_friday.getMonth() + 1] ;
var fyear = [next_friday.getFullYear()];
var friday_date= fyear + '-' + fmonth + '-' + friday;
alert(friday_date);
document.getElementById("friday").innerHTML =friday;
/*saturday*/
var next_satday = new Date(current_week.setDate(current_week.getDate() - current_week.getDay()+6));
var saturday = [next_satday.getDate()];
var samonth = [next_satday.getMonth() + 1] ;
var sayear = [next_satday.getFullYear()];
var saturday_date= sayear + '-' + samonth + '-' + saturday;
document.getElementById("saturday").innerHTML =saturday;
alert(saturday_date);
$("#date").datepicker("setDate", new Date(next_monday));
var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var week_month = months[next_satday.getMonth()] ;
var week_year = [next_satday.getFullYear()];
document.getElementById("endDate").innerHTML =week_month +' '+ saturday + ',' + ' ' + week_year;
}
please suggest somthing

I got the answer I used if else loop first I have captured current week last date mean Saturday date and then compared with next saturday
Javascript
function Next()
{
// get current week saturday
var textbox_value=document.getElementById("date").value;
var current_week = new Date(textbox_value);
var next_satday = new Date(current_week.setDate(current_week.getDate() - current_week.getDay()+6));
var current_satday = [next_satday.getDate()];
//alert(current_satday);
// last week saturday as per my requirement
// you can modify as per your requirement
var curr = new Date;
var firstday = new Date(curr.setDate(curr.getDate() - curr.getDay()));
var lastday = new Date(curr.setDate(curr.getDate() - curr.getDay()+6));
var last_satday = [lastday.getDate()];
//alert(last_satday);
if(current_satday <= last_satday){
//alert('success');
/*sunday*/
var next_sunday = new Date(current_week.setDate(current_week.getDate() - current_week.getDay()+7));
var sunday = [next_sunday.getDate()];
var smonth = [next_sunday.getMonth() + 1] ;
var syear = [next_sunday.getFullYear()];
var sunday_date= syear + '-' + smonth + '-' + sunday;
//alert(sunday_date);
document.getElementById("sunday").innerHTML =sunday;
/*monday*/
var next_monday = new Date(current_week.setDate(current_week.getDate() - current_week.getDay()+1));
var monday = [next_monday.getDate()];
var mmonth = [next_monday.getMonth() + 1] ;
var myear = [next_monday.getFullYear()];
var monday_date= myear + '-' + mmonth + '-' + monday;
//alert(monday_date);
document.getElementById("monday").innerHTML =monday;
/*Tuesday*/
var next_tuesday = new Date(current_week.setDate(current_week.getDate() - current_week.getDay()+2));
var tuesday = [next_tuesday.getDate()];
var tmonth = [next_tuesday.getMonth() + 1] ;
var tyear = [next_tuesday.getFullYear()];
var tuesday_date= tyear + '-' + tmonth + '-' + tuesday;
//alert(tuesday_date);
document.getElementById("tuesday").innerHTML =tuesday;
/*Wednesday*/
var next_wedday = new Date(current_week.setDate(current_week.getDate() - current_week.getDay()+3));
var wednesday = [next_wedday.getDate()];
var wmonth = [next_wedday.getMonth() + 1] ;
var wyear = [next_wedday.getFullYear()];
var wednesday_date= wyear + '-' + wmonth + '-' + wednesday;
//alert(wednesday_date);
document.getElementById("wednesday").innerHTML =wednesday;
/*Thursday*/
var next_thuday = new Date(current_week.setDate(current_week.getDate() - current_week.getDay()+4));
var thursday = [next_thuday.getDate()];
var thmonth = [next_thuday.getMonth() + 1] ;
var thyear = [next_thuday.getFullYear()];
var thursday_date= thyear + '-' + thmonth + '-' + thursday;
//alert(thursday_date);
document.getElementById("thursday").innerHTML =thursday;
/*friday*/
var next_friday = new Date(current_week.setDate(current_week.getDate() - current_week.getDay()+5));
var friday = [next_friday.getDate()];
var fmonth = [next_friday.getMonth() + 1] ;
var fyear = [next_friday.getFullYear()];
var friday_date= fyear + '-' + fmonth + '-' + friday;
//alert(friday_date);
document.getElementById("friday").innerHTML =friday;
/*saturday*/
var next_satday = new Date(current_week.setDate(current_week.getDate() - current_week.getDay()+6));
var saturday = [next_satday.getDate()];
var samonth = [next_satday.getMonth() + 1] ;
var sayear = [next_satday.getFullYear()];
var saturday_date= sayear + '-' + samonth + '-' + saturday;
document.getElementById("saturday").innerHTML =saturday;
//alert(saturday_date);
$("#date").datepicker("setDate", new Date(next_monday));
var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var week_month = months[next_satday.getMonth()] ;
var week_year = [next_satday.getFullYear()];
document.getElementById("endDate").innerHTML =week_month +' '+ saturday + ',' + ' ' + week_year;
}

Adding Google Calendar event end time to script

I have a script which lists Google Calendar events with the start time, name and description but I would like to have the end time too so it reads;
5:00pm - 6:00pm - Event title - event description
Rather than just what it has at the moment which is just the start time and not the end time.
This is the script I have:
$(document).ready(GCalEvents());
function GCalEvents() {
var datenow = new Date();
var curyear = datenow.getFullYear();
var curmonth = datenow.getMonth() + 1;
var curdate = datenow.getDate();
var curhour = datenow.getHours();
var curmin = datenow.getMinutes();
var curtz = datenow.getTimezoneOffset();
//curtz = -480;
var plusmin = "-";
if (curtz <= 0) {
plusmin = "%2B";
}
curtz = Math.abs(curtz);
var curtzmin = curtz % 60;
curtz = parseInt(curtz / 60);
if (curtzmin < 10) { curtzmin = "0" + curtzmin; }
if (curtz < 10) { curtz = "0" + curtz; }
datenow = curyear + "-" + curmonth + "-" + curdate + "T" + curhour + "%3A" + curmin + "%3A00" + plusmin + curtz + "%3A" + curtzmin;
var url = "https://www.googleapis.com/calendar/v3/calendars/{calendarid}/events?alwaysIncludeEmail=false&maxResults=2&orderBy=startTime&showDeleted=false&showHiddenInvitations=false&singleEvents=true&timeMin=" + datenow + "&fields=items(start%2Csummary%2Cdescription)%2CtimeZone&key={key}";
// var url = "https://www.googleapis.com/calendar/v3/calendars/{calendarid}/events?alwaysIncludeEmail=false&maxResults=2&orderBy=startTime&showDeleted=false&showHiddenInvitations=false&singleEvents=true&timeMin=" + datenow + "&fields=items(start%2Csummary%2Cdescription)%2CtimeZone&key={key}";
$.getJSON(url, function(data) {
var event_start_date_new = new Date();
event_start_date_new.setDate(event_start_date_new.getDate() - 1);
for(i in data['items']) {
item = data['items'][i];
// event title
var event_title = item.summary;
var event_description = item.description;
// event start date/time
var event_start_date = new Date(item.start.dateTime);
// format the date and time
var month = event_start_date.getMonth();
var day = event_start_date.getDay();
var date = event_start_date.getDate();
var daysArr = new Array();
daysArr[0] = "Sunday";
daysArr[1] = "Monday";
daysArr[2] = "Tuesday";
daysArr[3] = "Wednesday";
daysArr[4] = "Thursday";
daysArr[5] = "Friday";
daysArr[6] = "Saturday";
var monthsArr = new Array();
monthsArr[0] = "January";
monthsArr[1] = "February";
monthsArr[2] = "March";
monthsArr[3] = "April";
monthsArr[4] = "May";
monthsArr[5] = "June";
monthsArr[6] = "July";
monthsArr[7] = "August";
monthsArr[8] = "September";
monthsArr[9] = "October";
monthsArr[10] = "November";
monthsArr[11] = "December";
var hour = event_start_date.getHours();
var min = event_start_date.getMinutes();
if (min < 10) { min = "0" + min; }
if (hour < 11) {
var ampm = "am";
if (hour == 0) { hour = 12; }
} else {
var ampm = "pm";
if (hour > 12) { hour = hour - 12; }
}
if (hour < 10) { hour = " " + hour; }
var event_start_str = daysArr[day] + ", " + monthsArr[month] + " " + date;
var event_time_str = hour + ":" + min + " " + ampm;
if (event_start_date.getDate() != event_start_date_new.getDate()) {
event_start_str = "<div class=\"calendar_date\"><strong>" + event_start_str + "</strong></div>";
event_start_date_new = event_start_date;
} else {
event_start_str = "";
};
// Render the event
$("#gcal-events").last().before("<div class=\"calendar_item\"><li>" + event_time_str + " - " + event_title + "<p><small>" + event_description + "</small></p></ul>" + "</li></div>");
}
});
};
If anyone is able to help with that to reversion the current script, that would be great.

The Events resource returns start and end dates as well (JSON format that has date, dateTime, timeZone attributes).
Based on your code, you're not using the end attribute which is why you're not having any values for the end date displayed. Your code for the start date is alright, so you can just re-implement it for the end attribute.
Hope this helps!