We Keep Coding

How to get Google meet link thru google calendar api in javascript?

I want to create a line notify which can send the event detail from my google calendar everyday.
I can get the title, description, location...etc, but I don't see the conference data in calendar API.
I use Google Apps Script to run the code.
Here is my code.
const Now = new Date();
const Start = new Date(new Date().setHours(0, 0, 0, 0));
const End = new Date(new Date().setHours(23, 59, 59, 999));
const calendarData = calendar.getEvents(Start, End);
function Notify() {
var NotifyContents = '';
var i = 1;
calendarData.forEach(item =>{
if (Now <= item.getStartTime()) {
NotifyContents += (item.getTitle() != "") ? ("\n" + i+". "+ item.getTitle() + "\n") : ("\n\nNo Title\n");
NotifyContents += (item.getDescription() != "") ? item.getDescription() + "\n" : "";
NotifyContents += (item.getStartTime() != "" && item.getEndTime() != "") ? "Time：" + item.getStartTime().toLocaleTimeString() + "-" + item.getEndTime().toLocaleTimeString() + "\n": "";
NotifyContents += (item.getconferencedata() != "") ? ("\n" + i+". "+ item.getconferencedata()) : ("No Conference\n");
i++;
}
}
)
if (typeof NotifyContents === 'string' && NotifyContents.length === 0) {
return;
}
NotifyTokens.forEach(function(value){
UrlFetchApp.fetch("https://notify-api.line.me/api/notify", {
"method" : "post",
"payload" : {"message" : NotifyContents},
"headers" : {"Authorization" : "Bearer " + value}
});
});
}
Reference - Calendar API Link

In order to retrieve the meet link from the event, it seems that in the current stage, Calendar API is required to be used. When this is reflected in your script, how about the following modification?
Modified script:
Before you use this script, please enable Calendar API at Advanced Google services.
From:
var NotifyContents = '';
var i = 1;
calendarData.forEach(item => {
if (Now <= item.getStartTime()) {
NotifyContents += (item.getTitle() != "") ? ("\n" + i + ". " + item.getTitle() + "\n") : ("\n\nNo Title\n");
NotifyContents += (item.getDescription() != "") ? item.getDescription() + "\n" : "";
NotifyContents += (item.getStartTime() != "" && item.getEndTime() != "") ? "Time：" + item.getStartTime().toLocaleTimeString() + "-" + item.getEndTime().toLocaleTimeString() + "\n" : "";
NotifyContents += (item.getconferencedata() != "") ? ("\n" + i + ". " + item.getconferencedata()) : ("No Conference\n");
i++;
}
}
)
To:
const eventList = Calendar.Events.list(calendar.getId(), { timeMin: Start.toISOString(), timeMax: End.toISOString(), maxResults: 2500 }).items.reduce((o, e) => (o[e.id] = e.conferenceData.entryPoints.map(({ uri }) => uri).join(","), o), {});
var NotifyContents = '';
var i = 1;
calendarData.forEach(item => {
if (Now <= item.getStartTime()) {
NotifyContents += (item.getTitle() != "") ? ("\n" + i + ". " + item.getTitle() + "\n") : ("\n\nNo Title\n");
NotifyContents += (item.getDescription() != "") ? item.getDescription() + "\n" : "";
NotifyContents += (item.getStartTime() != "" && item.getEndTime() != "") ? "Time：" + item.getStartTime().toLocaleTimeString() + "-" + item.getEndTime().toLocaleTimeString() + "\n" : "";
var eventId = item.getId().split("#")[0];
NotifyContents += eventList[eventId] != "" ? ("\n" + i + ". " + eventList[eventId]) : ("No Conference\n");
i++;
}
});
In this modification, it supposes that calendar has already been declaread. Please be careful about this.
Reference:
Events: list

Script does not show original image

Guys I have a script that shows blogger articles, only the images of the articles are of poor quality.
Looking at the script the only part that refers to the image is this
// Get the post thumbnails
postimg = ("media$thumbnail" in entry) ? entry.media$thumbnail.url : imgBlank;
// Build the post template
output += '<div class="itemposts">';
output += '<h6>' + posttitle + '</h6>';
output += '<div class="iteminside"><img src="' + postimg + '" />';
output += '<span class="summary">' + postsumm + '</span></div>';
output += '<div style="clear:both;"></div><div class="itemfoot">' + timepub + replies + '<a class="itemrmore" href="' + posturl + '">' + rmoreText + '</a></div>';
output += '</div>';
css code:
.itemposts img {
float:left;
height:90px;
width:200px;
margin:2px 10px 2px 0px;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
background-color:#fafafa;
border:1px solid #dcdcdc;
padding:4px;
}
Does anyone know which part of the code needs to be changed to show the image with the original quality?
added full code full code
<script>
var showPostDate = true,
showComments = true,
idMode = true,
sortByLabel = false,
labelSorter = "Games",
loadingText = "Loading...",
totalPostLabel = "Jumlah posting:",
jumpPageLabel = "Halaman",
commentsLabel = "Komentar",
rmoreText = "Selengkapnya ►",
prevText = "Sebelumnya",
nextText = "Berikutnya",
siteUrl = "https://elfenliedbrazil.blogspot.com/",
postPerPage = 6,
numChars = 370,
imgBlank = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC";
</script>
<script type='text/javascript'>
//<![CDATA[
// -----------------------------------------------------------------------------------------
//
// Original:
// Modified by Taufik Nurrohman
//
// -----------------------------------------------------------------------------------------
var minpage = 6; // Minimum number to display the page
var maxpage = 10; // The maximum number of pages to display
var firstpage = 0; // Detect the first time it is executed
var pagernum = 0; // Contain the page number where we
var postsnum = 0; // Start the first page
var actualpage = 1; // Starting value of the current page (it will change if you click the pagination).
// This is the container template that will be used to insert the posts template, pagination and the posts count
document.write('<div id="toc-outer"><div id="results"></div><div id="itempager" style="position:relative;"><div id="pagination"></div><div id="totalposts"></div><a title="Taufik Nurrohman" style="display:block!important;visibility:visible!important;opacity:1!important;position:absolute;bottom:10px;right:14px;font:normal bold 8px Arial,Sans-Serif!important;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.1);text-decoration:none;" href="http://hompimpaalaihumgambreng.blogspot.com/2012/03/daftar-isi-blogger-dengan-navigasi.html" target="_blank">►TN</a></div></div>');
var _results = document.getElementById('results');
var _pagination = document.getElementById('pagination');
var _totalposts = document.getElementById('totalposts');
// Build the table of contents framework
function showPagePosts(json) {
var entry, posttitle, posturl, postimg, postsumm, replies, monthnames, timepub, output = "";
if (pagernum === 0) {
postsnum = parseInt(json.feed.openSearch$totalResults.$t);
pagernum = parseInt(postsnum / postPerPage) + 1;
}
for (var i = 0; i < postPerPage; i++) {
if ("entry" in json.feed) {
if (i == json.feed.entry.length) break;
entry = json.feed.entry[i];
posttitle = entry.title.$t; // Get the post title
// Get rel="alternate" for truly post url
for (var k = 0, elen = entry.link.length; k < elen; k++) {
if (entry.link[k].rel == "alternate") {
posturl = entry.link[k].href; // This is your real post URL!
break;
}
}
// Get the comments count
for (var l = 0, clen = entry.link.length; l < clen; l++) {
if (entry.link[l].rel == "replies" && entry.link[l].type == "text/html") {
var commentsnum = entry.link[l].title.split(" ")[0]; // This is your comments count
break;
}
}
// If the Blogger-feed is set to SHORT, then the content is in the summary-field
postsumm = ("summary" in entry) ? entry.summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "") : ""; // Get the post summary
// Reduce post summaries to "numChars" characters.
// "numChars" is a variable. You determine the value
if (postsumm.length > numChars) {
postsumm = (numChars > 0 && numChars !== false) ? postsumm.substring(0, numChars) + '...' : "";
}
// Get the post date (e.g: 2012-02-07T12:56:00.000+07:00)
var _postdate = entry.published.$t,
_cdyear = _postdate.substring(0, 4), // Take 4 characters from the "postdate" beginning, it means the year (2012)
_cdmonth = _postdate.substring(5, 7), // Take 2 character 5 step from "postdate" beginning, it mean the month (02)
_cdday = _postdate.substring(8, 10); // Take 2 character 8 step from "postdate" beginning. it means the day (07)
// Month array template
monthnames = (idMode) ? ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agt", "Sep", "Okt", "Nov", "Des"] : ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
// The final product of the post date = (07 Feb 2012) (cdday monthnames cdyear)
timepub = (showPostDate) ? _cdday + ' ' + monthnames[parseInt(_cdmonth, 10) - 1] + ' ' + _cdyear + ' - ' : '';
// The final product of the comments count & comments label (10 Komentar) (commentsnum commentsLabel)
replies = (showComments) ? commentsnum + ' ' + commentsLabel : '';
// Get the post thumbnails
postimg = ("media$thumbnail" in entry) ? entry.media$thumbnail.url : imgBlank;
// Build the post template
output += '<div class="itemposts">';
output += '<h6>' + posttitle + '</h6>';
output += '<div class="iteminside"><img src="' + postimg + '" />';
output += '<span class="summary">' + postsumm + '</span></div>';
output += '<div style="clear:both;"></div><div class="itemfoot">' + timepub + replies + '<a class="itemrmore" href="' + posturl + '">' + rmoreText + '</a></div>';
output += '</div>';
}
}
// Put the whole template above into <div id="results"></div>
_results.innerHTML = output;
_create_pagination();
}
// Build the pagination
function _create_pagination() {
output = "";
var starter = 0;
output += ((actualpage > 1) ? '<a title="' + prevText + '" class="prevjson" href="javascript:_init_script(' + (actualpage - 1) + ')">' + prevText + '</a>' : '<span class="prevjson hidden">' + prevText + '</span>') + '<em style="font:inherit;color:inherit;" class="pagernumber">';
if (pagernum < (maxpage + 1)) {
for (starter = 1; starter <= pagernum; starter++) {
output += (starter == actualpage) ? '<span class="actual">' + starter + '</span>' : '' + starter + '';
}
} else if (pagernum > (maxpage - 1)) {
if (actualpage < minpage) {
for (starter = 1; starter < (maxpage - 2); starter++) {
output += (starter == actualpage) ? '<span class="actual">' + starter + '</span>' : '' + starter + '';
}
output += ' ... ';
output += '' + parseInt(pagernum - 1) + '';
output += '' + pagernum + '';
} else if (pagernum - (minpage - 1) > actualpage && actualpage > (minpage - 1)) {
output += '1';
output += '2';
output += ' ... ';
for (starter = actualpage - 2; starter <= actualpage + 2; starter++) {
output += (starter == actualpage) ? '<span class="actual">' + starter + '</span>' : '' + starter + '';
}
output += ' ... ';
output += '' + parseInt(pagernum - 1) + '';
output += '' + pagernum + '';
} else {
output += '1';
output += '2';
output += ' ... ';
for (starter = pagernum - (minpage + 1); starter <= pagernum; starter++) {
output += (starter == actualpage) ? '<span class="actual">' + starter + '</span>' : '' + starter + '';
}
}
}
output += '</em>' + ((actualpage < starter - 1) ? '<a title="' + nextText + '" class="nextjson" href="javascript:_init_script(' + (actualpage + 1) + ')">' + nextText + '</a>' : '<span class="nextjson hidden">' + nextText + '</span>');
_pagination.innerHTML = output;
_totalposts.innerHTML = totalPostLabel + ' ' + postsnum + ' - ' + jumpPageLabel + ' ' + ((actualpage * postPerPage) - (postPerPage - 1)) + ((actualpage < starter - 1) ? ' - ' + (actualpage * postPerPage) : "");
}
// Functions to remove and append the callback script that has been manipulated in the `start-index` parameter
function _init_script(n) {
var parameter = (n * postPerPage) - (postPerPage - 1), old, s,
head = document.getElementsByTagName('head')[0],
url = (sortByLabel) ? siteUrl + '/feeds/posts/summary/-/' + labelSorter + '?start-index=' + parameter : siteUrl + '/feeds/posts/summary?start-index=' + parameter; // Optional: Sort posts by a specific label
if (firstpage == 1) {
// Jump to top
document.documentElement.scrollTop = _results.offsetTop - 30;
document.body.scrollTop = _results.offsetTop - 30;
// Remove the old callback script
old = document.getElementById("TEMPORAL");
old.parentNode.removeChild(old);
}
_results.innerHTML = '<div id="loadingscript">' + loadingText + '</div>';
_pagination.innerHTML = '';
_totalposts.innerHTML = '';
s = document.createElement('script');
s.type = 'text/javascript';
s.src = url + '&max-results=' + postPerPage + '&orderby=published&alt=json-in-script&callback=showPagePosts';
s.id = 'TEMPORAL';
head.appendChild(s);
firstpage = 1;
actualpage = n;
}
// Execute the _init_script() function with parameter as `1` on page load
// So it will show the first page.
window.onload = function() {
_init_script(1);
};
//]]>
</script>

Thumbnails are reduced-size versions of pictures or videos
https://en.wikipedia.org/wiki/Thumbnail
So you need to get the original image
In some cases you have the size in the url, like in this one at the end of url
https://lh3.googleusercontent.com/mC69w8Asl2c4y8it_gEb0-2CcwxKWUvz1fs4gOwVfxUkvSN7qAAl41VohsqSdVG-dZs=w720-h110-rw
You can simply remove that part and get the full size of the image
https://lh3.googleusercontent.com/mC69w8Asl2c4y8it_gEb0-2CcwxKWUvz1fs4gOwVfxUkvSN7qAAl41VohsqSdVG-dZs
update
In your case you have a url like this
https://1.bp.blogspot.com/xxxxxxx/s72-c/xxxxx.jpg
you can change to
https://1.bp.blogspot.com/xxxxxxx/s640/xxxxx.jpg
This post explain very well how you can use List of all the App Engine images service get_serving_url() URI options

Variable scope issue using Chart.Js

I am using Chart.js in order to render multiple charts in my application.
In each chart I am using a dropdown button with different users and on selection it update the chart. Each chart come with explanations:
model_content = {
0:["fpeofko"+ fName + "fdpfokvf", "fpeofko"+ fName + "fdpfokvf" ],
1:["fpeofko"+ fName + "fdpfokvf","fpeofko"+ fName + "fdpfokvf"],
2:["fpeofko"+ fName + "fdpfokvf","fpeofko"+ fName + "fdpfokvf"],
3:["fpeofko"+ fName + "fdpfokvf","fpeofko"+ fName + "fdpfokvf"]
}
$(".pick-chart").change(function(e) {
e.preventDefault();
var val = $(this).val();
if (val != 0) {
info_process.data.datasets[1].data = info_array[val];
info_process.update();
var name2 = $('option[value='+val+']').text();
var fName = name2.split(' ')[0];
$("#ops-info").empty()
$("#dif-info").empty()
$("#info-head").empty()
ops = opposed_model[val]
dif = differ_model[val]
$("#info-head").append(" with "+ fName);
for(var x = 0; x < ops.length; x++){
text_content = model_content[ops[x]]
if (ops[x] <= 5){
if (complete[ops[x]] > 0){
inner_text_content = text_content[0];
} else {
inner_text_content = text_content[1];
}
$("#ops-info").append(
"<div class='collapsediv' data-toggle='collapse' href='#collapseExample" + ops[x] + "' + 'role=button' aria-expanded='false' aria-controls='collapseExample'>"
+ complete_label[ops[x]] + "<img src='{% static 'images/expand.png' %}' class='float-right'>" + "</div>"+
"<div class='collapse' id='collapseExample" + ops[x]+ "'" + "'><div class='card card-body'>"+ inner_text_content +"</div></div>"
);
}
}
for(var x = 0; x < dif.length; x++){
text_content = model_content[ops[x]]
if (dif[x] <= 5){
if (complete[ops[x]] > 0){
inner_text_content = text_content[0];
} else {
inner_text_content = text_content[1];
}
$("#dif-info").append(
"<div class='collapsediv' data-toggle='collapse' href='#collapseExample" + dif[x] + "' + 'role=button' aria-expanded='false' aria-controls='collapseExample'>"
+ complete_label[dif[x]] + "<img src='{% static 'images/expand.png' %}' class='float-right'>" + "</div>"+
"<div class='collapse' id='collapseExample" + dif[x]+ "'" + "'><div class='card card-body'>"+ inner_text_content +"</div></div>"
);
}
}
} else {
info_process.data.datasets[1].data = [];
$("#info-head").empty()
if (document.getElementById("ops-info") !== null){
document.getElementById("ops-info").innerHTML = "";
}
if (document.getElementById("dif-info") !== null){
document.getElementById("dif-info").innerHTML = "";
}
}
info_process.update();
});
I would like to be able in my model_content to show the name of the user selected which is stored in fName. The thing is since it is outside of my function, it is out of scope.
I could put model_content within the function but I have many charts so it would mean copying/pasting model_content many time ..
edit:
function modelContent(fName){
model_content = {
0:["fpeofko"+ fName + "fdpfokvf", "fpeofko"+ fName + "fdpfokvf" ],
1:["fpeofko"+ fName + "fdpfokvf","fpeofko"+ fName + "fdpfokvf"],
2:["fpeofko"+ fName + "fdpfokvf","fpeofko"+ fName + "fdpfokvf"],
3:["fpeofko"+ fName + "fdpfokvf","fpeofko"+ fName + "fdpfokvf"]
}
return model_content
}

A number is converted to NaN after some clicked to show in console - Jquery

I'm making a paging on list of products. When i clicked on "Next" button and show in console value of "tranght" (My code only show value of "tranght") then type of "tranght" is converted to NaN. Help me, i'm newer in Jquery.
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery-1.6.2.js"></script>
<script type="text/javascript">
var ds = [];
var tranght = 1;
var sobanghi = 0;
var sotrang = 0;
$(document).ready(function(){
$('#btnshow').click(function(){
$.ajax({
type : 'GET',
headers : {
Accept : "application/json; charset=utf-8",
"Content-Type" : "application/json; charset=utf-8"
},
url : '${pageContext.request.contextPath }/findall.html',
success : function(result) {
ds = result.dssp;
sobanghi = result.dssp.length;
if ((sobanghi % 3) === 0){
sotrang = Math.floor(sobanghi / 3);
} else {
sotrang = Math.floor(sobanghi / 3) + 1;
}
var s = "";
s = s + "<table border=\"1\"><tr class=\"title\"><td>Ma sp</td><td>Ten sp</td><td>Gia</td><td>So luong</td><td>Ngay sx</td><td>Tinh trang</td><td>Mo ta</td><td>Hinh anh</td><td>Danh muc</td></tr>";
for (var i=0; i<3; i++){
s = s + "<tr><td>" + result.dssp[i].masp + "</td><td>" + result.dssp[i].tensp + "</td><td>" + result.dssp[i].gia + "</td><td>"+ result.dssp[i].soluong +"</td><td>"+ result.dssp[i].ngaysx + "</td><td>"+ result.dssp[i].tinhtrang +"</td><td>"+ result.dssp[i].mota +"</td><td>"+ result.dssp[i].hinhanh +"</td><td>"+ result.dssp[i].danhmuc.tendm +"</td></tr>" ;
}
s = s + "</table>";
$('#result').html(s);
var s1 = "<div class='prev'>Prev</div>";
s1 += "<div class='index clicked'>" + 1 + "</div>";
for (var i=2; i<=sotrang; i++){
s1 += "<div class='index'>" + i + "</div>";
}
s1 += "<div class='next'>Next</div>";
$('#result1').html(s1);
}
});
});
//select a page
$(".index").live('click', function(){
$("#result1 > div").removeClass('clicked');
$(this).addClass('clicked');
tranght = parseInt($(this).html());
var startpoint = (tranght - 1)*3;
var endpoint = startpoint + 3;
sobanghi = ds.length
if (endpoint > sobanghi){
endpoint = sobanghi;
}
var s = "";
s = s + "<table border=\"1\"><tr class=\"title\"><td>Ma sp</td><td>Ten sp</td><td>Gia</td><td>So luong</td><td>Ngay sx</td><td>Tinh trang</td><td>Mo ta</td><td>Hinh anh</td><td>Danh muc</td></tr>";
for (var i=startpoint; i<endpoint; i++){
s = s + "<tr><td>" + ds[i].masp + "</td><td>" + ds[i].tensp + "</td><td>" + ds[i].gia + "</td><td>"+ ds[i].soluong +"</td><td>"+ ds[i].ngaysx + "</td><td>"+ ds[i].tinhtrang +"</td><td>"+ ds[i].mota +"</td><td>"+ ds[i].hinhanh +"</td><td>"+ ds[i].danhmuc.tendm +"</td></tr>" ;
}
s = s + "</table>";
$('#result').html(s);
});
// click "next" button
$(".next").live('click', function(){
console.log("value of tranght: " + tranght);
console.log("Type of: " + typeof tranght);
if (tranght === sotrang){
tranght = sotrang;
console.log("Type of: " + typeof tranght);
} else {
tranght = parseInt(tranght,6) + 1;
console.log("value: " + tranght);
console.log("Type of: " + typeof tranght);
}
});
});
</script>

We are missing some code, is the html object with the class 'index' an input? if so, you need to change
tranght = parseInt($(this).html());
to
tranght = parseInt($(this).val());
to capture the value and not the content.

Subfunction Not Working

My function formatMoney works when called from recalculateReservationFee() but my javascript console gives me the error "undefined function" when I try to call formatMoney from a sub function named recalculateGrandTotal() that's inside of recalculateReservationFee(). I don't understand why this is happening, how can I rescope the methods to access formatMoney from recalculateGrandTotal()?
Here's my code:
//money formatter from... http://stackoverflow.com/questions/9318674/javascript-number-currency-formatting
Number.prototype.formatMoney = function(decPlaces, thouSeparator, decSeparator) {
var n = this,
decPlaces = isNaN(decPlaces = Math.abs(decPlaces)) ? 2 : decPlaces,
decSeparator = decSeparator == undefined ? "." : decSeparator,
thouSeparator = thouSeparator == undefined ? "," : thouSeparator,
sign = n < 0 ? "-" : "",
i = parseInt(n = Math.abs(+n || 0).toFixed(decPlaces)) + "",
j = (j = i.length) > 3 ? j % 3 : 0;
return sign + (j ? i.substr(0, j) + thouSeparator : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thouSeparator) + (decPlaces ? decSeparator + Math.abs(n - i).toFixed(decPlaces).slice(2) : "");
};
function recalculateReservationFee() {
var vacationRentalPrice = parseFloat( <? php echo $vacationRentalPrice; ?> );
var TaxRate = parseFloat(document.getElementById("priceDisplayTaxRate").textContent);
var CleaningFee = parseFloat(document.getElementById("priceDisplayCleaningFee").textContent);
var PoolHeating = parseFloat(document.getElementById("priceDisplayPoolHeating").textContent);
var PetFee = parseFloat(document.getElementById("priceDisplayPetFee").textContent);
var PropertyDamageProtection = parseFloat(document.getElementById("priceDisplayPropertyDamageProtection").textContent);
var reservationFeeTarget = vacationRentalPrice + TaxRate + CleaningFee + PoolHeating + PetFee + PropertyDamageProtection;
var theNewReservationFee = parseFloat(( <? php echo $theReservationFeePercentage; ?> * reservationFeeTarget) / 100);
var formattedNewReservationFee = theNewReservationFee.formatMoney(2, ',', '.'); // example "$3,543.76"
document.getElementById("priceDisplayReservationFee").innerHTML = formattedNewReservationFee;
//document.write('<br/>The Vars: <br/>' + vacationRentalPrice + '<br/>' + CleaningFee + '<br/>' + TaxRate + '<br/>' + PoolHeating + '<br/>' + PetFee + '<br/>' + PropertyDamageProtection + '<br/>--<br/>' + reservationFeeTarget + '<br/>' + formattedNewReservationFee);
function recalculateGrandTotal() {
var theGrandTotal = vacationRentalPrice + <? php echo $theRefundableDamageDepositRounded; ?> +TaxRate + CleaningFee + PoolHeating + PetFee + PropertyDamageProtection + formattedNewReservationFee;
var formattedGrandTotal = theGrandTotal.formatMoney(2, ',', '.'); // example "$3,543.76"
document.getElementById("priceDisplayVacationPackageTotal").innerHTML = formattedGrandTotal;
document.getElementById("priceDisplayVacationPackageGrandTotal").innerHTML = formattedGrandTotal;
}
recalculateGrandTotal();
}
function clearFee(theNamedFee, theNamedClass) {
document.getElementById(theNamedFee).innerHTML = '0.00';
var elems = document.getElementsByClassName(theNamedClass);
for (var i = 0; i < elems.length; i++) {
elems[i].disabled = true;
}
recalculateReservationFee();
}
function showFee(theNamedFee, someFee, theNamedClass) {
document.getElementById(theNamedFee).innerHTML = someFee;
var elems = document.getElementsByClassName(theNamedClass);
for (var i = 0; i < elems.length; i++) {
elems[i].disabled = false;
}
recalculateReservationFee();
}

The line
var theGrandTotal = vacationRentalPrice + .... + formattedNewReservationFee;
^^^^^^^^^^^^^^^^^^^^^^^^^^
formattedNewReservationFee sounds like it is a string. number + "string" = "numberstring".