Booking Calendar Contact Form Blog

Reservation / Booking forms solution for WordPress websites.

Blog / Displaying a bookings list in the public website

Displaying a bookings list in the public website

You can use the Frontend lists add-on to display lists of the bookings into the front-end pages of the website, public or private pages.


To get it working the first step is to enable the add-on in the add-on settings area:

Assign users to calendar

When enabled, you can paste a shortcode like the following in a page or post of your website:

[CP_BCCF_LIST calendar="1" showdelete="1"
columnlabels="ID,Calendar,Startdate,Enddate,field1 label,field2 label,Status,Cost"
columns="id,calendar,startdate,enddate,fieldname1,fieldname2,status,totalcost"]

The parameter calendar="0" means all calendars and calendar="owner" means all the calendars assigned to the user currently logged in.

The parameter showdelete="1" means to display a delete option for each listed booking.

The parameter columnlabels="..." are the columns labels to be used in the table header row.

The parameter columns="..." are the data columns to be generated in the table. These are the fields IDs oin addition to the special IDs: "id" (submission id), "calendar" (calendar name), "startdate" and "enddate" (start and end dates of the booking), "status" (indicates future,current or expired based in the dates), "totalcost" (calculated cost of the booking). Other supported tags area "coupon", "discount", "service". The field IDs are usually "fieldname1", "fieldname2", "fieldname3"... and can be checked when clicking the field in the form builder.

The additional parameters datefrom="today" and dateto="today +30 days" can be optionally used to limit the booking dates in the list.

You can use the following styles to customize the table:

     .bccftable { 
       /* styles for the whole table */
     }
     
     .bccftable th {
         /* styles for the table header cells */
     }
     
     .bccftable td{
         /* styles for the table data cells */
     }
     
     .bccfheader1 {
         /* styles for the table header column #1, same exists for column #2, #3, ... */
     }
     
     .bccfcol1 {
         /* styles for the table data cell column #1, same exists for column #2, #3, ... */
     }

You can add the styles into the CSS customization areas explained at in the styles customization article.

The result of the shortcode will be a list generated based in the parameters indicated in the shortcode, the following is a sample list:

Assign users to calendar