Jump to content

Date Specific New Record Links In Weekly Calendar


Recommended Posts

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>

 

 

 

 

 

Link to comment
Share on other sites

  • 2 months later...

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.

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 4 years later...

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.  :) 

image.png

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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

weekly issue.PNG

Link to comment
Share on other sites

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

weekly issue.PNG

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') {

image.png.747c21e58aae0b7f7c0b8301d6434893.png

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();

image.png.e136660bc354cfb605ba263fe456db73.png
 

 

Get Appkey by clicking properties
image.png.8ad219197b7b0262b126a9eb18050209.png

 

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.

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...