Search the Community

Hello All, Is there anyway in a Calendar Datapage to have the calendar "jump" the week to date of a searched record? I default the calendar to "Today" in a Weekly View. When a user searches for a record, if that record doesn't have a date in the current weekly view, it doesn't appear, although it exists on a future date. If a user searches for a record in the search field, I would like the calendar below to jump to the week of that record. In this example, after clicking search for this Customer's Name, the calendar would jump to the week of January 7, 2024-January 13,2024 because the customer's appointment is on January 9, 2024. Does anyone know if this functionality is possible? Thanks! Chris

In Caspio's template "Appointment Scheduler" there is a calendar (https://apps.caspio.com/demo18/asr/admin/schedule-patients.html) with a "new appointment" button. Is there any idea how could I create a similar button in a calendar?

I wanted to clarify this question from another post here in the hopes a Caspio person will see this and resolve the issue. It would be extremely helpful to be able to push a new calendar event from a Caspio Submit (or Update) datapage to google calendar. I found a post that uses the example below to open Google Calendar and populate a new event's fields with example data. This creates a button that pushes it all in the url: <a class="btn btn-primary btn-xs" href="https://www.google.com/calendar/render?action=TEMPLATE&amp;text=Lunch%20with%20Stripe&amp;dates=20161116T120000Z/20161116T140000Z&amp;details=https%3A%2F%2Flondon.techhub.com%2Fevents%2Ffounders-lunch-5&amp;location=TechHub%20London&amp;sprop=&amp;sprop=name:" id="addToGoogle"><i class="fa fa-google-plus"></i>&nbsp;Google</a> The problem is getting the Caspio fields to populate the data- especially the dates and times. Also on a Submission form it seems to only bring into the url Authenticated fields (maybe because the new record's values aren't saved yet). That's ok if an Update form must be used, to make sure the field's values are pushed into the url. The issue is it doesn't seem to be pushing the values in a way Google Calendar can use it, especially the first 'text=' and the dates. Using the example above as a map, how does the below code need to be modified so google calendar can read it correctly? <a class="btn btn-primary btn-xs" href="https://www.google.com/calendar/render?action=TEMPLATE&amp;text=[@field:mytitletfield]&amp;dates=[@field:CalDate*]/[@field:CalDate*]&amp;details=[@field:myNotesfield]&amp;location=[@field:myLocationfield]&amp;sprop=&amp;sprop=name:" id="addToGoogle"><i class="fa fa-google-plus"></i>&nbsp;Google2</a> I can get all but the first 'text=' and the Dates to work. Any help in figuring this out would be greatly appreciated.

I need to create a reservation system for managing a couple student apartments in different locations. I've created a reservation form and a calendar data page but the calendar doesn't show the data the way I would like it to (most likely because I'm just not sure what I'm doing ). Two questions: 1. If on the reservation form someone reserves Room A from January 1 - January 10... how do I get that person's reservation to show on all of the reserved days (January 1 - January 10) on the calendar instead of just the first day of the reservation (January 1)? 2. Is there a way to color code the calendar based upon a particular field in the reservation form? If I want Room A and B to show as blue because they are part of one apartment and Room C and D to show as green because they are part of a different apartment? Thanks for the guidance!

This is my solution to fixed date squares for the Calendar. I find the calendar looks odd when it adjusts it's size to fit data, as many squares are different dimensions. The code is at the bottom of this post. Note: The calendar will not appear square in the preview section, you will need to save the style and apply it to a datapage. To make size edits to the code: EXPLANATION: 1. For the *-width styles, using a percentage value (1/7 = 14.28...%) will always result in fixed-proportion yet responsive widths. 2. For the *-height columns, Having a value of 180px, as obtained from the browser inspector, gives the best compromise, achieving an almost perfect square cell appearance. If making edits, you will most likely want to make edits in the every section where you see the code: min-width: 14.28%; width: 14.28%; max-width: 14.28%; min-height: 180px; height: 180px; max-height: 180px; Copy and Paste Code under Calendar Layout Source: .cbResultSetCalendar { /*Results Page Calendar Attributes*/ border-collapse: collapse; border-spacing: 0px; width: 100%; margin: 6px; border: 1px solid #e8e8e8; -webkit-box-shadow: 0px 0px 0px 6px #f9f9f9; -moz-box-shadow: 0px 0px 0px 6px #f9f9f9; box-shadow: 0px 0px 0px 6px #f9f9f9; margin: 6px; } .cbResultSetCalendarCellspacing { border-spacing:0px; } .cbResultSetCalendarCaptionTable { /*Results Page Calendar Caption Table Attributes*/ width: 100%; margin: 6px; } .cbResultSetCalendarCaptionTableCellspacing { border-spacing:0px; } .cbResultSetCalendarCaptionCell { /*Results Page Calendar Caption Cell Attributes*/ text-align: center; vertical-align: middle; padding: 7px 10px 7px 10px; white-space: nowrap; } .cbResultSetCalendarCaption { /*Results Page Calendar Caption Attributes*/ color: #222222; font-size: 14px; font-family: Arial, sans-serif; font-style: normal; font-weight: bold; } .cbResultSetCalendarHeader { /*Results Page Calendar Header Attributes*/ background-color: #313131; } .cbResultSetCalendarHeader_hover { /*Results Page Calendar Header Hover Attributes*/ background-color: #313131; } .cbResultSetCalendarHeaderCell { /*Results Page Calendar Header Cell Attributes*/ text-align: center; vertical-align: top; padding: 10px 10px 10px 10px; white-space: normal; background: #fafafa; color: #222222; border-color: #e8e8e8; border-style: solid; border-width: 1px 0px 1px 0px; } .cbResultSetCalendarTableRow { /*Results Page Calendar Odd Rows Attributes*/ } .cbResultSetCalendarOddCell { /*Results Page Calendar Odd Cell Attributes*/ text-align: left; vertical-align: top; min-width: 14.28%; width: 14.28%; max-width: 14.28%; min-height: 180px; height: 180px; max-height: 180px; white-space: normal; background: #ffffff; border-color: #e8e8e8; border-style: solid; border-width: 1px; padding: 0px; } .cbResultSetCalendarEvenCell { /*Results Page Calendar Even Cell Attributes*/ text-align: left; vertical-align: top; min-width: 14.28%; width: 14.28%; max-width: 14.28%; min-height: 180px; height: 180px; max-height: 180px; white-space: normal; background: #ffffff; border-color: #e8e8e8; border-style: solid; border-width: 1px; padding: 0px; } .cbResultSetCalendarOddCell_hover { /*Results Page Calendar Odd Cell Hover Attributes*/ text-align: left; vertical-align: top; min-width: 14.28%; width: 14.28%; max-width: 14.28%; min-height: 180px; height: 180px; max-height: 180px; white-space: normal; background: #ffffff; border-color: #e8e8e8; border-style: solid; border-width: 1px; padding: 0px; } .cbResultSetCalendarEvenCell_hover { /*Results Page Calendar Even Cell Hover Attributes*/ text-align: left; vertical-align: top; min-width: 14.28%; width: 14.28%; max-width: 14.28%; min-height: 180px; height: 180px; max-height: 180px; white-space: normal; background: #ffffff; border-color: #e8e8e8; border-style: solid; border-width: 1px; padding: 0px; } .cbResultSetCalendarTableNowCell { /*Results Page Calendar Today Cell Attributes*/ text-align: left; vertical-align: top; min-width: 14.28%; width: 14.28%; max-width: 14.28%; min-height: 180px; height: 180px; max-height: 180px; white-space: normal; background: #F8F8F8; border-color: #e8e8e8; border-style: solid; border-width: 1px; padding: 3px; } .cbResultSetCalendarField { /*Results Page Calendar Data Attributes*/ text-align: right; padding: 0px; color: #000000; font-family: Arial; font-size: 12px; } .cbResultSetCalendarFieldInactiveDate { /*Results Page Calendar Inactive Data Attributes*/ text-align: right; padding: 0px; color: #AAAAAA; font-family: Arial; font-size: 12px; } .cbResultSetPanelBaseContainer{} .cbResultSetPanelDataContainer { padding: 10px 11px 10px; } .cbResultSetPanelCalendarRAContainer { /*Results Page Record Action Container Attributes*/ text-align: left; vertical-align: middle; white-space: nowrap; background-color: #fafafa; padding: 2px 3px; opacity: 0.8; filter:alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; overflow: hidden; } .cbResultSetPanelCalendarRAContainer_hover { /*Results Page Record Action Container Attributes*/ text-align: left; vertical-align: middle; white-space: nowrap; background-color: #fafafa; padding: 2px 3px; opacity: 1; filter:alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; overflow: hidden; }

Is there any way to restrict the possible date range of a calendar popup? I found a post that showed how to validate the element and show an alert, but what I'd like to be able to do is actually restrict the dates the user can select in the popup. Thanks, Andrew

Hi all, I am using the code to make a datapage more responsive, and while it works wonderfully, I don't know how to make the calendar popup larger to be usable on mobile. When I click on the calendar it shows up but it is way to small to be mobile friendly. Below is what I have for the responsive code. I've been searching styles to try and find out how to change the popup but have been unsuccessful. Any and all help is much appreciated! <!-- Responsive Code Begin --> <style> /* Change max-width to what size you want the form to change at */ @media (max-width: 767px) { #datapage-form table { width: 100% !important; margin-top: 1px !important; } #datapage-form td { display: block; } img[alt~="Calendar"] { position: relative; top: -5px; } } </style> <div id="datapage-form" > <!-- Responsive Code End -->

Hi, Does anyone know if/how to change the responsive setting for 'tablet' view from the 1024px to something lower like 800px? A calendar datapage is really not good in responsive mode because it changes from full view to a slim list when less than 1024px. This gives a bad UX because you might have a screen 1050px or so and the calendar goes responsive from full month view with blocks to a mobile 'list' that the user has to scroll a lot to see the entire date range. LOTS of white space to scroll past, with this method. It would be great if one could change the setting for 'tablet view' from < 1024px to something like < 800px. I don't see anywhere in the Styles to do this--is it possible? Thanks for any help-

This thread has parts and answers in other threads, but none of them solve doing this in a Submission form so I thought a new thread that unified this info would be helpful to anyone who needs this kind of solution. @Meekeee has posted a really cool solution for pushing calendar events via download from Caspio to Google, Apple, MS calendars, which is extremely beneficial: https://jekuer.github.io/add-to-calendar-button/ and https://github.com/jekuer/add-to-calendar-button. There's a few issues in using this solution with Caspio, though, that I haven't been able to figure out--mostly when it's deployed in a submission form. The issue is you need to get the user's input from the submission form to populate the values for the exported event's name, description, BeginDateTime, EndDateTime, and Location. On a Details page it's fairly straightforward, using [@field:BeginDate], etc. But the [@field:..] method isn't available on a Submission form, only Authentication fields can be used that way. I've tried using variables to get the field values (and testing with a 'dead' button and alert box confirmed that the values were captured correctly). The problem is I don't know how to use those variables in the event export code that goes into the datapage (there are other files, css, js, etc. that are referenced from elsewhere). This is the code that gets the values and coverts the date/time field to ISO formatting for the export: function getevent(){ var v_name = document.getElementById('InsertRecordTasksTimeline_Title').value; var v_note = document.getElementById('InsertRecordTasksTimeline_Notes').value; var v_location = document.getElementsByName('InsertRecordTasksTimeline_Location')[0].value; Stamp = new Date(document.getElementById('InsertRecordTasksTimeline_CalDate').value); Hours = Stamp.getHours() Mins = Stamp.getMinutes(); v_BeginDate=('' + Stamp.getFullYear() +"-"+ (Stamp.getMonth()+1) + "-" + Stamp.getDate() +"T"+ Hours + ":" + Mins); Stamp2 = new Date(document.getElementById('InsertRecordTasksTimeline_CalEnd').value); Hours = Stamp2.getHours() Mins = Stamp2.getMinutes(); v_EndDate=('' + Stamp2.getFullYear() +"-"+ (Stamp2.getMonth()+1) + "-" + Stamp2.getDate() +"T"+ Hours + ":" + Mins); } This is @Meekeee's code (there's variations, I'm using one that uses a normal button to call it) that creates the button with the event download options: <button id="default-button" name="submitevent">Save/Close</button> <script type="application/javascript"> const config = { "name": "tile of event", "description": "notes for the event", "startDate" : "2022-05-21T10:15", "endDate": "2022-05-21T12:30", "location":"location of event", options: ["Google", "Apple","Microsoft365"], timeZone: "currentBrowser", trigger: "click", iCalFileName: "Reminder-Event", } const button = document.querySelector('#default-button') button.addEventListener('click', ()=> atcb_action(config, button) ) </script> The issue is getting the variable values into the " " part of the code. For example, "name": "tile of event", will work with "name": "[@authfield:Company]", but I can't figure out how to use the variables. It would be something like this (but it doesn't work, though): <button id="default-button" name="submitevent">Save/Close</button> <script type="application/javascript"> const config = { var v_name = document.getElementById('InsertRecordTasksTimeline_Title').value; var v_note = document.getElementById('InsertRecordTasksTimeline_Notes').value; var v_location = document.getElementsByName('InsertRecordTasksTimeline_Location')[0].value; Stamp = new Date(document.getElementById('InsertRecordTasksTimeline_CalDate').value); Hours = Stamp.getHours() Mins = Stamp.getMinutes(); v_BeginDate=('' + Stamp.getFullYear() +"-"+ (Stamp.getMonth()+1) + "-" + Stamp.getDate() +"T"+ Hours + ":" + Mins); Stamp2 = new Date(document.getElementById('InsertRecordTasksTimeline_CalEnd').value); Hours = Stamp2.getHours() Mins = Stamp2.getMinutes(); v_EndDate=('' + Stamp2.getFullYear() +"-"+ (Stamp2.getMonth()+1) + "-" + Stamp2.getDate() +"T"+ Hours + ":" + Mins); "name": "v_name", "description": "n_note", "startDate" : "v_BeginDate", "endDate": "v_EndDate", "location":"v_location", options: ["Google", "Apple","Microsoft365"], timeZone: "currentBrowser", trigger: "click", iCalFileName: "Reminder-Event", } const button = document.querySelector('#default-button') button.addEventListener('click', ()=> atcb_action(config, button) ) </script> Does anyone know how to integrate the variables with the event export code? This would be a really great solution if it can be worked out.

Hi, Does anyone know if there's a way to tweak a Calendar datapage that shows the full month for full screen (meaning a large rectangle with a panel for each day) to show only the current week when showing in tablet or mobile format? I have a calendar that is full size on the 'main' page but is also used in smaller displays (falls into the tablet range) for specific related records and in those instances I need to show just the current week, or at least have it start with the current day so the user doesn't have this super long list for each day of the month (most of which will be blank). I'm basically trying to use the same Calendar datapage for a full-view (laptop/desktop in responsive) and a narrowed dataset for current week or starting with current day when in tablet or mobile view. I can't find a way to do this in the Style section--if anyone has an idea how to do this I'd really appreciate it!

I have a form that has a few scripts already running in it to control some fields where I need to format numbers as currency. I'm good to go on those and they are running fine - A great big thank you to those who are posting solutions here in the forums! - It's been a great help to me and I would not be able to do some of the great things I'm accomplishing without those wonderful individuals who post solutions and code here in the forums. But I now need to control 2 date fields. I have the calendar picker set up for each field, but was hoping for the "Start Date" field, I could somehow restrict it by year, so that it would only start in 2015, and then for the "End Date" field, if there is anyway to control that so that it would only allow the date entered to be AFTER the "Start Date"? I have seen some other solutions in the forums here that refer specifically to making the dates be today or after today, but nothing with year or where a second date field is dependent on the date entered in the first or where year is the only control.... I've got to get this working soon so if anyone can help me, I would appreciate it so much! Thank you in advance!

Has anybody successfully integrated Caspio Calendar with the Google Calendar and/or Microsoft outlook. I am building a platform for users to offer/ showcase their services to potential clients. I expect them schedule multiple appointments and register for events using calendar provided, which is Caspio super-powered weekly calendar Once user enter information, I would like an automated email sent out to their personal email along with the links. - By clicking these links user can automatically add event data to calendar of their choice either Google or Microsoft or both. I was wondering if anybody on the forum has created similar work flow, or an alternative solution to the similar problem. Please note I come from a non-techie background. Any heads up! greatly appreciated. Best,

I am running a calendar data page which shows different code for service types in a day. Would like the all elements of the service type background to be certain colors. I found this link in the forum but is not working.

I have set up a calendar report with multiple records on each date. Some of the entries have pending status, others are scheduled. I would like the pending records to have the status field's font color as red. This would make it much faster to find lessons that need to be scheduled. I cannot schedule the same lesson at the same time for different teachers, so there is a lot of juggling involved. The calendar view is critical so we can easily see the other lessons for the same day and week. The field name is LessonStatus, the value of field is either archived, cancelled, scheduled or pending Any help would be appreciated! Thanks

When I try to preview my Calendar DataPage, I am getting the following error: "System error. (Caspio Bridge error) (80004003)" I haven't been able to find any information on what this means. I copied this DataPage from a working DataPage and all I changed was Configure Fields for Calendar, but now, no matter how I change things, I keep getting the same error. My Configure Fields has been reduced to simply a header, which I didn't change and only has CSS in it, one list field, and an empty footer and still I'm getting that error. Can anyone point me to where the problem might be or what that error might mean?

In my application I want users to be able to edit fields for events that are associated with the current calendar year, but not past years. I am using a Calendar DataPage that displays the events based on the filtered Year and other variables. Each event has a link that routes to a webpage that displays the event's details. I have two links, one that directs to an editable DataPage and the other to a non-editable DataPage. I only want to show one link per event, which is dependent on the filtered calendar year. I followed the directions in the following forum post, but the link does not hide as expected on the filtered year: Calculated field (CalcField): CASE WHEN [@field:Event_AY] = '2022-2023' THEN 'show' ELSE 'hide' END First HTML Block contains URL: <a href="#" id="link-id-[@field:Event_Table_ID]" target="_blank">Details</a> Second HTML Block contains script: <script> var link = document.getElementById("link-id-[@field:Event_Table_ID]"); var htmlBlock = link.parentElement; var entry = htmlBlock.parentElement; var calcFieldIndex = 4; var calcField = entry.getElementsByClassName("cbResultSetData")[calcFieldIndex - 1]; if (calcField.value !== show) { htmlBlock.style.display = "none"; } </script> I know the calculation is working, the show/hide link just isn't working. Any insights would be appreciated.

Hi All, i am working with a project where in i need to display it in a monthly calendar view but i can edit it each day to update the records is this possible? I know other options like i can include details page but i want it to be editable on the first page without clicking the details page.

Hello I have two fields in my submission form - date and day. The customer selects date (via calendar pop up text field). I need the day field to automatically be populated by the day of the week from the date input (so someone inputs 25/12/2013 and the day field automatically says 'Wednesday' or whatever). Currently, I'm tackling this in a very roundabout way, by passing a long date to a report data page and then using rules (if date contains 'Monday' then hide section 1 etc). This is laborious and requires the user to click again on a url link. There must be an easier way. Does anyone know how? Ideally some javascript to just take the day of the week from the date field would be good. If that's not possible, then javascript that basically says "if [@field:date] contains 'Monday' then go to data page XXXXXXX" All help appreciated. Thanks Duncan

Hi, I have a Calendar/Tasks table that stores a date for either an appointment or a task due date. I need to add a few functions and was hoping someone might have an idea of the best way to do this: 1) I need to add a Time selection for a calendar event. Meaning the user selects a date like normal (using the date picker) to put into a date/time field (the 'Event_Date' field in this case) but ALSO can select a time for the event (like a normal calendar like iCal or Google Cal). I know I can create a text field and use a lookup table for all the times (like 2pm, 2:15pm, 2:30pm, 2:45pm, etc.) and store it that way. My question is, can I use a text field that stores a time like this (i.e. "2:45pm") to perform calculations in a formula to get how many days/hours/minutes the current date/time is from that stored date/time? Or does that time data need to be in a specific format or included in the 'Event_Date' value (which is a date/time field). 2) What I'm trying to do is allow the user to do something like set an appointment for a date/time like 4/15/2020 1:30pm and also select a 'notify me' value like "2 days before" or "3 hours" before and then use the Automated Tasks feature to send an email/sms reminder to the user. 3) The last issue is how to store the date/time of the event because Tasks runs on UTC time and my users are all over the globe. So if a user in California puts in "4/15/2020 1:30pm" it's not the same date/time value as someone in Australia, in terms of the Tasks trigger firing. Maybe convert the users local time to UTC after they input it? Not sure of the best approach but to the user, it needs to be viewed/entered as local time (not UTC values) so it's understandable. I wish Caspio had a full calendar like this, built in, as these features are an integral part of most user needs. But if I can build it myself that'd still be great. The first 2 issues to me are the most important, though, so if anyone has some advice on this, or how to get the result I need (a normal calendar with times and notification choices) I'd really appreciate it.

Hi, I would like to change the beginning of the week to Sunday (dimanche in french canada) instead of Monday (lundi). It does so in localization in English, but I need it in French also. I looked in the Define Localization Settings, but there is no setting for the beginning of the week for the calendar. Any Ideas? Thanks, André Couturier

Is there a way to warn a user if a record already exists for the username and date when adding or updating a record in a form or report data sheet? We don't require unique records, but would like to see a warning showing that there could potentially be a double booking.

I've just been trying to resolve an issue with the local settings for time zone and date format ... but can't seem to get the DB to respond. I've set the time zone to Europe, Madrid and the date for mate to UK (day/month/year) but when I use the DB and try to amend an entry for instance ... the date ... the drop down calendar whilst showing the correct date (ie 3rd November 2019) when selected the data appears as 11/03.2019. Is there a way to alter this behaviour as it's causing problems ???? Thanks

As it is right now, a data page with a calendar only has 2 options, monthly and weekly. Is there a way to create a calendar that only shows 3 Days at a time? Sincerely, Jared

Hello, I am creating a calendar data page in the "monthly" view. There are often weeks where there are no events, but aesthetically, I think it looks odd if these weeks are collapsed to be much smaller than the weeks that contain events. I changed padding = 20px in the ResultSetCalendarField element to make the empty rows slightly larger (see below). But this element also affects rows with events, so the discrepancy is still large (see screen shot). Is there any element to change that would make the default size of these empty cells larger? .cbResultSetCalendarField { /*Results Page Calendar Data Attributes*/ text-align: right; padding: 20px; color: #555555; font-size: 11px; font-family: 'Roboto', Arial, sans-serif; font-weight: 400; }

I'd like to create a patient appointment/scheduling calendar for a doctor's office. The calendar datapage is not suited for this type of application. The time slots need to be fixed on the side like Google Calendar or Outlook's calendar. Does Caspio have an instant app for this? Have any Caspio user developed such an app they would be willing to share? Is there an opensource option I could integrate with Caspio? If I have a 3rd party develop it, how will it integrate with my Caspio database? via web services? Thanks.