Creating Date Specific New Record Links in Calendar DataPages

You can 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 iframe and Direct from Caspio deployment models.

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

1. Create a Submission Form DataPage

Create a Submission Form DataPage using the same source table as your Calendar DataPage. Be sure to enable advanced options and parameters.

2. Configure the date field to receive a parameter

In the Configure Fields screen select your date field in the DataPage Elements panel. Click on the Advanced Tab and choose the Receive Parameter radio button. 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.

3. Set the destination to be the Calendar DataPage

On the Destination and Triggers screen choose the Go to this page (URL): option and type in the address of the webpage that is hosting your Calendar DataPage.

4. Deploy the DataPage and note the URL

You can now deploy your Submission Form DataPage. Be sure to note the URL of your Submission Form as it will be needed later.

5. Add a header and footer to the results page of the Calendar

In the DataPages view, Select your Calendar DataPage and open the DataPage wizard by clicking the Edit button. Proceed to the Configure Results Page Fields screen. Using the Insert button at the lower right of the DataPage Elements panel add header and footer sections.

6. Add the JavaScript to the footer

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 Direct from Caspio 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 press submit in the Submission 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:

//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>

Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge's 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.