HTML5 Tips: How to Add a Calendar to Your Website

Designing with Wix | July 23rd 2012

Music joints, open-air cinemas, yoga studios, stand-up comedy clubs, evening schools, circuses, art galleries – what do they all have in common? They all post their event calendars online, inviting the public to join their activities.

If your business is like that as well, you need to get your calendar online. By adding a calendar to your website, you invite your website visitors to see and take an interest in your future events in the easiest way possible.

With the recently introduced calendar add-on, integrating a calendar into your Wix HTML5 website is easier than ever before. Just follow these steps and you’re good to go!

 How to Add an Event Calendar to Your HTML5 Website

1. Set up a Google calendar and add all relevant events that you’d like to share online. If you already have a Google calendar – see item 2.

2. Open your HTML5 template in the Wix website builder.

Open your HTML5 template in the Wix website builder

Open your HTML5 template in the Wix website builder

3. You can decide now whether you’d like to create a unique page for the calendar, or add it to an existing page. We recommend you create a new page for it.

4. Once you picked the spot, click “Add” and choose “AddOn”.

Click “Add” and choose “AddOn”

Click “Add” and choose “AddOn”

5. In the “AddOn” menu, choose “Event Calendar”.

 Choose “Event Calendar”


Choose “Event Calendar”

6. Click “Add to Page” to approve the app.

 Click “Add to Page” to approve the app


Click “Add to Page” to approve the app

7. Now that the calendar has been added to your website, you can customize it. Start by clicking “App Settings” in the Event Calendar box.

Start by clicking “App Settings” in the Event Calendar box

Start by clicking “App Settings” in the Event Calendar box

8. Click “Connect Account” to integrate your Google calendar. This process is completely safe. Wix will NOT have access to your Google password.

Click “Connect Account”

Click “Connect Account”

9. A “Google Accounts” window will pop up and request that you authorize the process. If you have multiple Google accounts, you will be asked to choose which would you like to connect and then click “Allow Access”.

Click “Allow Access”

Click “Allow Access”

10. Back in the Wix editor, you can now customize the looks of your calendar. You can choose the view mode, background colors and text colors.

Customize the looks of your calendar

Customize the looks of your calendar

11. You can always click “disconnect account” if you want to remove the Google calendar info from your website.

12. As always, you can move it around the page or play with its size by dragging and dropping the calendar.

 You can play with the location and size of the calendar

You can play with the location and size of the calendar

And that’s it! Enjoy your new gorgeous calendar page.

 


Tagged with: . . .