Date Specific New Record Links In Weekly Calendar

[skauntey]

Hi,

 

I found Caspio's tech tip on adding a date specific new record to calendar quite useful and handy. Which can be found on the attached link below,

 

http://howto.caspio.com/tech-tips-and-articles/common-customizations/how-to-create-date-specific-new-record-links-in-calendar-datapages/

 

However the Java script used within script is only customised to Monthly calendar. I wonder if anybody has tried to alter this script for weekly calendar? 

 

I think weekly calendar would offer some clarity and less cluttered space in scheduling appointments and events.

 

Thanks in advance.

 

Script:

 

<script>

var month = "";

var allSpanTags = document.getElementsByTagName("span");

for (i=0; i<allSpanTags.length; i++) {

if (allSpanTags.className == "cbResultSetCalendarCaption"){

month = allSpanTags.innerHTML;

}

}

month = month.replace(/January /gi,"1/Day/");

month = month.replace(/February /gi,"2/Day/");

month = month.replace(/March /gi,"3/Day/");

month = month.replace(/April /gi,"4/Day/");

month = month.replace(/May /gi,"5/Day/");

month = month.replace(/June /gi,"6/Day/");

month = month.replace(/July /gi,"7/Day/");

month = month.replace(/August /gi,"8/Day/");

month = month.replace(/September /gi,"9/Day/");

month = month.replace(/October /gi,"10/Day/");

month = month.replace(/November /gi,"11/Day/");

month = month.replace(/December /gi,"12/Day/");

var allHTMLTags = new Array();

 

//Create Array of All HTML Tags

var allHTMLTags = document.getElementsByTagName("div");

 

//Loop through all tags using a for loop

for (i=0; i<allHTMLTags.length; i++) {

 

//Get all tags with the specified class name.

if (allHTMLTags.className == "cbResultSetCalendarField") {

var transfer = month.replace(/Day/gi,allHTMLTags.innerHTML);

 

/*Begin Add New Link Section*/

allHTMLTags.innerHTML = allHTMLTags.innerHTML +'<br><a style="text-decoration:none;" href="URL?Date='+transfer+'">Add New</a>';

 

/*End of Add New Link Section*/

}

}

 

</script>

 

 

 

 

 

[scribblemilk]

I need this too, i spoke to the support team they gave me an additional piece of code, that date sends through ok apart from if within the week you are looking at you are crossing over months, if that is the case the new month sends across the correct date but previous month, i.e. you are looking at a week covering 27th June to the 3rd July, you click on 2nd of July but the parameter sent is 2/6/2016 instead of 2/7/2016.

 

The piece of code they added is ad follows:

var monthArr = month.split(" ");
if( monthArr.length > 2 ){
month = monthArr[1] + " " + monthArr[2];
}

This is added in prior to the line below:

month = month.replace(/January /gi,"1/Day/");

If anyone can get this to work for cross over weeks i'd be ever so greatful.

[MayMusic]

Code below should work for both weekly and monthly

<script>
var month = "";
var allSpanTags = document.getElementsByTagName("span");
for (i=0; i<allSpanTags.length; i++) {
if (allSpanTags[i].className == "cbResultSetCalendarCaption"){
month = allSpanTags[i].innerHTML;
}
}

var monthArr = month.split(" ");
if( monthArr.length > 2 ){
month = monthArr[1] + " " + monthArr[2];
}

month = month.replace(/January /gi,"1/Day/");
month = month.replace(/February /gi,"2/Day/");
month = month.replace(/March /gi,"3/Day/");
month = month.replace(/April /gi,"4/Day/");
month = month.replace(/May /gi,"5/Day/");
month = month.replace(/June /gi,"6/Day/");
month = month.replace(/July /gi,"7/Day/");
month = month.replace(/August /gi,"8/Day/");
month = month.replace(/September /gi,"9/Day/");
month = month.replace(/October /gi,"10/Day/");
month = month.replace(/November /gi,"11/Day/");
month = month.replace(/December /gi,"12/Day/");
var allHTMLTags = new Array();

//Create Array of All HTML Tags
var allHTMLTags = document.getElementsByTagName("div");

//Loop through all tags using a for loop
for (i=0; i<allHTMLTags.length; i++) {

//Get all tags with the specified class name.
if (allHTMLTags[i].className == "cbResultSetCalendarField") {
var transfer = month.replace(/Day/gi,allHTMLTags[i].innerHTML);

/*Begin Add New Link Section*/
allHTMLTags[i].innerHTML = allHTMLTags[i].innerHTML +'<br><a style="text-decoration:none;" href="URL?Date='+transfer+'">Add New</a>';

/*End of Add New Link Section*/
}
}

</script>

 

[scribblemilk]

Hi Thanks so much for responding, your script appears to work in part, it works for the monthy adding links to only the days in that month and transfering the correct date for that month via the URL parameter method.

However for the week calendar it only works for those links where the date in question is the first month, if you click a link for the second month in question the parameter sent sends the correct day of the month but not the correct month, going back to my example before if you are looking at a week covering 27th June to the 3rd July, and you click on 2nd of July the parameter sent is 2/6/2016 instead of 2/7/2016.

For a weekly calender this is a problem as you do need to be able to process dates from two months in cross over weeks (see attached), in the monthly calendar it doesn't matter as you really only need to process dates in the month in question.

I can't think of a way to identify cross over weeks and then just add a month to the parameter being sent for those dates <6 days into the month.

Weekly Calendar Link Error.docx

[Darryl]

The code as provided by MayMusic seems to work ...except that the date in variable "transfer" is not passing to my submitting form. (I have other parameters that are passed OK...suggestions)?

[RuisiHansamu]

Hello there, I also tried this on my application and referred to this article from Caspio: https://howto.caspio.com/tech-tips-and-articles/common-customizations/how-to-create-date-specific-new-record-links-in-calendar-datapages/ Along with this, I noticed that it is not working. However, when I reached out to Caspio support and they asked me to double check the script that is included in the documentation. As I checked, I haven't placed my URL link/DataPage on the designated place. I wanted to share this comparison and I attached a screenshot for any one that may need this in the future.   

[TellMeWhy]

16 hours ago, Darryl said:

The code as provided by MayMusic seems to work ...except that the date in variable "transfer" is not passing to my submitting form. (I have other parameters that are passed OK...suggestions)?

Try this, this should work on both Monthly and weekly 

I added if else in the beginning part since the li.cbResultSetCalendarCaption > time only exists on the Month Variation, else, it would go Weekly Variation.

Just change the URL at the last part with your proper URL

<script>

document.addEventListener('DataPageReady', function (event) {
event.stopImmediatePropagation();
var month = "";

if(document.querySelector("li.cbResultSetCalendarCaption > time")){

    var allSpanTags = document.querySelector("li.cbResultSetCalendarCaption > time");
    month = allSpanTags.innerHTML;
}

else{

var allSpanTags = document.querySelector("li.cbResultSetCalendarCaption");
    month1 = allSpanTags.innerHTML;

var year = month1.substr(month1.length - 4);

var month2 = month1.split(" ")[1];

var month = month2 + ' ' + year;

console.log(year);
console.log(month2);
console.log(month);
}
month = month.replace(/January /gi,"1/Day/");

month = month.replace(/February /gi,"2/Day/");

month = month.replace(/March /gi,"3/Day/");

month = month.replace(/April /gi,"4/Day/");

month = month.replace(/May /gi,"5/Day/");

month = month.replace(/June /gi,"6/Day/");

month = month.replace(/July /gi,"7/Day/");

month = month.replace(/August /gi,"8/Day/");

month = month.replace(/September /gi,"9/Day/");

month = month.replace(/October /gi,"10/Day/");

month = month.replace(/November /gi,"11/Day/");

month = month.replace(/December /gi,"12/Day/");

var allHTMLTags = new Array();

 

//Create Array of All HTML Tags

var allHTMLTags = document.getElementsByTagName("div");

 

//Loop through all tags using a for loop

for (i=0; i<allHTMLTags.length; i++) {

//Get all tags with the specified class name.

if (allHTMLTags[i].className == "cbResultSetCalendarField") {

var transfer = month.replace(/Day/gi,allHTMLTags[i].innerHTML);

 

/*Begin Add New Link Section*/

allHTMLTags[i].innerHTML = allHTMLTags[i].innerHTML +'<br><a style="text-decoration:none;" href="URL?Date='+transfer+'">Add New</a>';

 

/*End of Add New Link Section*/

}
}

});
</script>

 

[Darryl]

Briliant work by TellMeWhy....works in both my weekly and Monthly calendar. I have noticed one issue that is beyond my skills to fix. If I use the back button to return to my weekly calender then the "add New" link is duplicated. I even got it tripled up in one case but I am not sure how. I am assuming that the code runs again if you use the back button? A minor issue at this point but if there is an easy fix?

****Added Thought, my monthly calendar is the only data page on the web page, while the weekly is one of three data pages, just wondered if that might be a contributing factor.

Thanks

[TellMeWhy]

1 hour ago, Darryl said:

Briliant work by TellMeWhy....works in both my weekly and Monthly calendar. I have noticed one issue that is beyond my skills to fix. If I use the back button to return to my weekly calender then the "add New" link is duplicated. I even got it tripled up in one case but I am not sure how. I am assuming that the code runs again if you use the back button? A minor issue at this point but if there is an easy fix?

****Added Thought, my monthly calendar is the only data page on the web page, while the weekly is one of three data pages, just wondered if that might be a contributing factor.

Thanks

Yes it actually is! DataPageReady reads ALL DataPages, if you have 3, 3 DataPages will be 'ready' so it will do that 3 times. 

There's a fix using example 2 here https://howto.caspio.com/datapages/ajax-loading/

Just add this  after DataPageReady

if (event.detail.appKey == 'APPKEY') {

Don't forget a closing bracket before the last closing bracket and parenthesis, try adding the following as well

EDIT: I forgot there is one already in the original I provided, so you can omit the line here, just add the bracket.

event.stopImmediatePropagation();

 

 

Get Appkey by clicking properties

 

Note that this does NOT work in PREVIEW MODE, as preview mode assigns a different AppKey per preview. You can only check if this works once you click Finish.

 

[Darryl]

Works!

Thanks again.

[DaveS]

Ok team - I might be upping the ante, but trying to get to hh:mm level with this so it can be used for selecting an appt.  I'm trying to use a sample app from this Caspio LiveStream.  I can't seem to get from page 2 (calendar) to page 3 (complete your booking) - which seems to be very similar to the problem you are solving here.  I've copied the sample code (my javascript skills are bordering on non-existent), gotten the add appt link to show up  at the DAY level (not the time level) and now that I've figured out how to hard-code a timestamp in the javascript format, I can get to the next page.  

What I'm currently not able to do is:

1. Select a specific time (they appear on the page, but don't seem to be recognized by the Javascript which is operating at day level); and

2.  Convert the selected time into a Javascript DateTime (YYYY-MM-DDThh:mm:ss:sssZ)

3.   Make the times that appear in the html hyperlinks that call my URL and pass that DateTime parameter (along with several other parameters that the page receives on the way in).

Any suggestions would be massively appreciated.