Appointment Booking Calendar

Frequently Asked Questions

Questions


Answers

For centering the calendar open the CSS file "TDE_AppCalendar\all-css.css" in any text editor and add these CSS rules into that file:

.appContainer{text-align:center;}
.appContainer2{margin-left:auto;margin-right:auto;width:200px}

After that be sure to refresh the page or clear your browser cache to be sure that the browser is loading the updated CCS styles file.

Please check if after receiving the payment at Paypal the appointment appears registered in the calendar (some time slot unavailable) or if it appears in the bookings list:

  • If yes, then the problem is that you server has some additional configuration requirements to send emails from PHP. The plugin uses the settings specified into the WordPress website to deliver the emails, if your hosting has some specific requirements like a fixed "from" address or a custom "SMTP" server those settings must be configured into the WordPress website.

  • If the purchase isn't registered, then check if the payment appears as "completed" at Paypal (no red flags, no pending mark). Check also if your Paypal account is setup to automatically accept payments in the selected currency. The payment must be marked as "completed" at PayPal in order to get the complete IPN notification.

  • If you already verified both of the above points, then probably there is a configuration in the payment preferences into your Paypal account that is preventing the IPN notification (check the status of your PayPal IPN configuration).

    Note also that "localhost" websites cannot receive automatic IPN notifications from PayPal, the website must be reachable through Internet.
To delete an appointment locate it into the calendar in the settings area, clear the title (there is a button for that) and save it. This action will delete the appointment (even if the content wasn't cleared).

You can specify the size of the calendar's cells, that way the complete calendar width and height can be controlled.

Open the file "appointment-booking-calendar\TDE_AppCalendar\all-css.css" and about line #139 modify the "padding" applied to the cells:

.yui-calendar td.calcell {
    padding:.3em .4em;
    border:1px solid #E0E0E0;
    text-align:center;
    vertical-align: top;
}
The "acknowledgment / thank you message" shown to the user after submitting the form should be placed at the page indicated in the field "URL to return after successful payment". Note that after the submission the user is redirected to that page even if the Paypal feature isn't used.

Open the file "wp-content/plugins/appointment-booking-calendar/TDE_AppCalendar/all-css.css" ... find this css rule:

.yui-calendar td.calcell.reserveddate { background-color:#B6EA59; }

...and replace the background color that appears there.

In addition to the possibility of editing the email contents you can use the following tags:

  • %CALENDAR%: Calendar related to the appointment.
  • %DATE%: Selected date for the appointment.
  • %TIME%: Selected time for the appointment.
  • %COUPONCODE%: Coupon code entered, if any.
  • %payment_type%: For the selected payment option (PayPal or Pay Later).
  • %SERVICES%: For the additional services / custom settings field.
  • %PRICE%: Price, cost of the booking, if any.
  • %EMAIL%, %PHONE%, %COMMENTS%, %NAME%: Data entered on each field if the Form Builder is disabled.
  • %email%, %subject%, %message%, %fieldname1%, %fieldname2%, ...: Data entered on each field if the Form Builder is enabled.

If the form doesn't appear in the public website (in some cases only the captcha appear) then change the script load method to direct, this is the solution in most cases.

That can be changed in the "troubleshoot area" located below the list of calendars/items.

If you have enabled the form builder (pro version), into the form builder in the administration area, click the "Form Settings" tab. That area is for editing the form title and header text.

It can be used also for different alignment of the field labels.

Note: This FAQ entry applies only if the Form Builder (available in the pro version) has been enabled.

To modify the whole styles of the form fields and labels, edit the styles file "wp-content/plugins/appointment-booking-calendar/css/stylepublic.css" and add these rules at the end of that file:

  • Change all the labels:
        #fbuilder, #fbuilder label, #fbuilder span {
            color: #00f;
        }
    
  • Change all the input, textarea and select fields:
        #fbuilder input[type=text], #fbuilder textarea, #fbuilder select {
            border: 2px solid #00f;
        }
    
  • Change the submit button:
        #fbuilder .pbSubmit {
            color: #00f;
            font-weight: bold;
        }
    
  • Change the "Section Break" field:
        #fbuilder .section_breaks label { font-size:18px; }
        #fbuilder .section_breaks span { font-size:14px; }
    
  • Change the "Instructions Text" field:
        #fbuilder .comment_area label { font-size:18px; }
        #fbuilder .comment_area span { font-size:14px; }
    
  • Change the "next" and "previous" buttons:
        #fbuilder .pbNext,#fbuilder .pbPrevious {
            color: #00f;
            font-weight: bold;
        }
    
  • Change the "form title" and "header description":
        #fbuilder .fform h1 {font-size:32px;}
        #fbuilder .fform span {font-size:16px;}
    

On the other hand to modify only a specific field into the form:

  • Step #1: Into the form editor, click a field to edit its details, there is a setting there named "Add CSS Layout Keywords".

  • Step #2: You can add a class name into that field, so the style specified into the CSS class will be applied to that field.

  • Step #3 (Note): Don't add style rules directly there but the the name of a CSS class.

  • Step #4: You can place the CSS class either into the CSS file of your template or into the file "wp-content/plugins/appointment-booking-calendar/css/stylepublic.css" located into the plugin's folder.

  • Examples: Add a class named "specialclass" into the setting "Add CSS Layout Keywords" and add one of these CSS rules into the mentioned file:

    • Change the field label:
          .specialclass label {
             color: #00f;
          }
      
    • Change the input, textarea or select of the field:
          .specialclass input[type=text],.specialclass textarea,.specialclass select {
              border: 2px solid #00f;
          }
      

Note: Remember that this FAQ entry applies only if the Form Builder (available in the pro version) has been enabled.

A list with the appointments set on the calendar can be displayed by using this shortcode in the page where you want to display the list:

[CPABC_APPOINTMENT_LIST]

... it can be also customized with some parameters if needed, example:

[CPABC_APPOINTMENT_LIST from="today" to="today +30 days" fields="DATE,TIME,NAME" calendar="1"]

... the "from" and "to" are used to display only the appointments / bookings on the specified period. That can be either indicated as relative days to "today" or as fixed dates.

There is also a "group" attribute to join the names of the appointments made on the same time-slot (for time-slots with multiple capacity):

[CPABC_APPOINTMENT_LIST group="yes"]

The "fields" can be used to modify the columns to display, that field accepts the following items (uppercase):

- CALENDAR
- DATE
- TIME
- NAME
- PHONE
- COMMENTS

... however, in most cases, probably you don't want to display the phone or comments.

The styles for the list are located at the end of the file "all-css.css":

.cpabc_field_0, .cpabc_field_1, .cpabc_field_2, ...

Clear the browser cache if the list isn't displayed in a correct way (to be sure it loads the updated styles).

Note: This FAQ entry applies only if the Form Builder (available in the pro version) has been enabled.

Into the form editor click a field and into its settings there is one field named "Add Css Layout Keywords". Into that field you can put the name of a CSS class that will be applied to the field.

There are some pre-defined CSS classes to use align two, three or four fields into the same line. The CSS classes are named:

  • column2
  • column3
  • column4

For example if you want to put two fields into the same line then specify for both fields the class name "column2".

Please read the instructions on this Google page:

https://support.google.com/calendar/answer/37100?hl=en

To get the iCal feed URL right click the "iCal" link on the calendar list and click "Copy Link Address" or "Copy Link Location" (depending of the browser you are using).

Note: This will automatically export the bookings stored in the plugin to the Google Calendar. The inverse process (import the items on Google Calendar into the plugin) isn't currently available.

Open the file "wp-content/plugins/appointment-booking-calendar/TDE_AppCalendar/all-css.css" for edition and add these styles at the end of the file:

.cellReserved
{
  color:#f00;
  background:#ff0;

}

.cell
{
  color:#000;
  background:#afa
}

...and replace the colors that appears on the above sample style.

The form builder of the Developer Version has the following additional fields in the form builder:

  • Line Text DS: An input field that gets its default values from one of following datasources - Database, Posts information, Taxonomies information or Users information.
  • Email DS: An input field for Email address that gets its default values from one of following datasources - Database or Users information.
  • Text Area DS: A text area field that gets its default values from one of following datasources - Database, Posts information.
  • Checkboxes DS: Checkboxes for selecting one or more options into the same field that gets its options from one of following datasources - Database, CSV, Posts information, Taxonomies information or Users information.
  • Radio Btns DS: Radiobuttons for selecting one option between the options available for the field that gets its options from one of following datasources - Database, CSV, Posts information, Taxonomies information or Users information.
  • Drop-down DS: A select / drop down list for selecting one of the values listed that gets its options from one of following datasources - Database, CSV, Posts information, Taxonomies information or Users information.
  • Hidden DS: A hidden field that gets its value from one of following datasources - Database, Posts information, Taxonomies information, or Users information.
Screenshot: Form builder in the Developer Version.

The Developer Version has an optional feature for automatically converting the time-slots to the user timezone. It can be configured in the following settings field:

Screenshot: Automatic time zone conversion settings in the Developer version.

You can test it from a computer with other timezone or by changing the timezone of your own computer.

If you are using a webkit based browser for the test (Safari or Google Chrome) note that you have to restart the browser in order to get the updated timezone, otherwise it will keep cached the initial timezone set when the page was opened.

The Developer Version has the following additional pre-built styles for the form fields:

Screenshot: Additional pre-built styles in the Developer Version.

The following shortcodes are available in the Developer Version for showing the current user bookings and a read-only calendar:

[CPABC_APPOINTMENT_CALENDAR_CURRENT_USER_BOOKINGS]: Supports the same parameters used for the calendar lists.

[CPABC_APPOINTMENT_CALENDAR_READ_ONLY]: Supports the same parameters than the booking calendar shortcode (ex: the calendar ID).

Add this CSS rule at the end of the file "wp-content/plugins/appointment-booking-calendar/css/stylepublic.css":

#cp_contactformpp_pform .yui-calcontainer{width:98%}

Installation Instructions:

  1. If you already have installed the free version or an old version of the pro version then delete it before installing the new pro version.
  2. Install the pro version via the Plugins area >> Add New >> Upload

Note: The above is a safe process, the plugin's data and settings won't be lost during the process and will appear again after installed the pro version.

Alternative Installation Method:

  1. Overwrite (or copy if not previously installed) the plugin files into the WP plugins folder through a FTP connection. This is also a safe process, the plugin's data and settings won't be lost during the process.

Upgrade Instructions:

The upgrade instructions are exactly the same instructions mentioned above but be sure to make a backup copy of your current files if you have made custom modifications to the files or translations since the files will be overwritten.

After upgrading the plugin remember to clear your browser cache.

The free version must be deleted before installing the pro version.

If you are upgrading the pro version to a new version you should also remove the previously installed version.

This is a safe step, the plugin's data and settings won't be lost during the process.

Another alternative is to overwrite the plugin files through a FTP connection. This is also a safe step.