Begin Update. January 18, 2024:
TLDR: When manually entering the Start Date and End Date in the CMS, the format must be exact. The month is the first 3 letters with the first capitalized (i.e. Feb, Jul, Sep, etc.), add a single space then the date as one or two digits with no leading zero (i.e. 5, 23, etc.), add a comma and a space then the year as four digits. A full example would be: Feb 6, 2024.
Background: Wix recently changed the behavior of the CMS Date field such that it no longer works for the Booking Calendar. The last time Wix changed the behavior of the CMS which affected the Booking Calendar, the change was reverted a few days later. In this case, I decided to change the CMS Date field to a Text field as I feel there is less chance of that causing problems in the future. The downside is that users must now precisely enter the date values for them to be correctly parsed by the Booking Calendar.
End Update.
For this basic usage example of the Booking Calendar, we will create a rental website for a single apartment. From the original Wix templates page, under the category Apartments & Hostels, we will pick the Loft City template for our website. We want to use the original Basic Calendar on the Home page and the Booking Calendar on the Contact page which we plan to change to a Book Now page.
Add a new blank section near the end of the Home page, then add the Booking Calendar to this section. First click Add Apps and search for "calendar" in the App Market. Click on the "Booking Calendar" app to install it. After it's installed, if the widget doesn't automatically appear, click Add Elements (+), App Widgets, Calendar, Desktop Preset, to add it to the Home page.
Next, we will add it on the Contact page. Switch to this page and delete the existing content on the page then add the Booking Calendar widget here as well. By default, the Basic Calendar view of the widget appears. In order to get the Booking Calendar view you will need to upgrade the App. Select the widget such that the Settings icon along with the other icons appear. Click the "Upgrade Now" icon and complete your payment for either the yearly or monthly payment plan option.
You should now see the upgraded Booking Calendar widget (with green boxes) on both the Home page and Contact page. We want to revert the one on the Home page back to the Basic Calendar view. Select the widget such that the Settings icon appears. Click Settings, then turn on the Basic option and close Settings. Click Preview to confirm the Basic Calendar view has been restored on the Home page, while the Contact page still has the Booking Calendar view.
Next, we will configure some days in the Booking Calendar to be unavailable for booking. Return to the editor and click CMS, Add to Site, Your Collections, bookings, Add Item. Set the Item Id to 1. It will always be 1 since we have only one apartment to rent. If we had more apartments, each one would need to have their own unique Item Id. Set the Start and End Dates to the range of dates you want to make unavailable. Set State to the word "unavailable" and close the CMS. Preview the website and verify that your unavailable date range now appears with grey boxes and can't be selected for booking in the Booking Calendar. Try booking some available dates and adding your contact information, then verify that everything was recorded correctly in the CMS.
Optionally, the images used for available, unavailable and reserved dates can be customized to anything you like. They just need to be square images of 300 x 300 pixels each. Here are some examples:
These images were created using the GIMP app. Here are all the images in the GIMP xcf file format which you can modify as you like:
To change an image, click Layers, the go to Page, Section, Calendar. Open the 2nd Repeater, 1st Container Box, and you should see 3 Images. Click Image and the Settings icon will appear. Open Settings and click Change to choose a new image to display. Repeat for all 3 images as desired.
The final step is to configure the Mobile Preset for both the Basic Calendar on the Home page and the Booking Calendar on the Contact page. In the editor, switch to the Mobile view, select the Calendar such that the Settings icons appear. Click the Design icon, and select the second design preset shown. The check mark should move to the new preset and the display should now appear correct. Close this window and once both calendars have been updated you can Preview the result.
After recording this video I added some additional finishing touches to the website. Here is the completed website for you to try out the Booking Calendar.
コメント