It is possible to add a date specific new record link to your monthly style Calendar DataPages.  This link allows you to click on any visible day and add a record associated with that date.  This feature makes your DataPage function like a date picker tool and can help increase the efficiency and accuracy of entering in new date structured records like events and tasks.  You will need a Submission Form DataPage to add records to your Calendar’s source table.

This article assumes that you have already created a Monthly style Calendar DataPage.

Note: This solution only works with Frame and URL Caspio deployment methods.


Steps to adding a date specific new record link to your Calendar DataPage:

Create a Submission Form DataPage

  • To create a Submission Form, click New DataPage.
  • Use the same source table as your Calendar DataPage.
  • You can configure the date field to receive a parameter. In the Configure Fields screen select your date field in the DataPage Elements panel. Click the Advanced Tab and select External Parameters from the On load assign default value or parameter dropdown. Add a parameter called Date in the field provided. Be sure that it uses the correct parameter format: [@Date].

Note: If you use a different fieldname in this parameter be sure to note it and change the “Date” fieldname in the query string used in the JavaScript.

Next, set the destination to be the Calendar DataPage. On the Destination and Emails screen choose the Go to a new page option and type in the address of the webpage that is hosting your Calendar DataPage. Click Finish.
DataPages, Date Specific New Record Links, Screenshot
You can now deploy your Submission Form DataPage.  Be sure to note the URL of your Submission Form as it will be needed later.

Edit Calendar Datapage

  1. From the DataPages listing, select your Calendar DataPage and click Edit.
  2. Proceed to the Configure Results Page Fields screen. Using the Insert button at the lower right of the DataPage Elements panel add Header & Footer sections.
  3. Paste the JavaScript code included in this article into the DataPage footer.  Find the URL near the end of the script and replace it with the URL from your Submission Form in step four.  Be sure not to replace the query string (?Date=) at the end of the URL.

Note: If you are using a URL generated from the URL deployment method replace the question mark with an and symbol (&).

Testing and Formatting

Test this application by clicking the Add New link generated in your Calendar DataPage.  You should be directed to your Submission Form.  The date field should be visible in your Submission Form and have received the correct date from the Calendar DataPage.  Once you submit the Form you should be redirected to the Calendar DataPage and see the new record added to the day you originally clicked.

Once you are sure the Submission Form and Calendar DataPage are correctly linked you can hide the Date field in your Submission Form and the field will still receive the parameter.

You can change the link text directly in the JavaScript or replace it with another piece of HTML such as an image.

Note: You cannot use single quotes (apostrophes) in your linked HTML object.

JavaScript Reference:

Note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio standard feature set. These solutions are provided “as is” without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.

document.addEventListener('DataPageReady', function (event) {
if (event.detail.appKey == 'APPKEY') {
var month = "";
if(document.querySelector("li.cbResultSetCalendarCaption > time")){
    var allSpanTags = document.querySelector("li.cbResultSetCalendarCaption > time");
    month = allSpanTags.innerHTML;
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;
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*/