How to Add Events Calendar and Widgets to a Wix Website

Share This Posts

With a Timely account, you can promptly and effortlessly incorporate a calendar with events and widgets onto your Wix webpages. Simply copy a code snippet and paste it to the back end of your website. Any changes or updates you make to your calendar and events will show up instantaneously. Furthermore, you have the option to use the online calendar to accept bookings, reservations, and sell tickets to your events. This post will show you how to add an events calendar and widgets to a Wix website.

1. What is Wix?

Wix is a cloud-based web-building platform. It gives you the ability to customize websites through the use of various templates and a simple drag-and-drop HTML5 editor. With Wix, you can utilize various apps, graphics, image galleries, fonts, vectors, animations and more. Moreover, Wix users have the choice to start their website from the scratch.

If you have already established or are intending to create an online calendar for Wix, this post will show you how to add Timely events calendar on a Wix web page. Keep reading to learn more.

2. Full Calendar vs Widgets Embedding

Timely event calendar software is an incredibly convenient and efficient way to organize and promote events on Wix. With a wide variety of calendar views available, you can customize the experience to create a full-scale calendar or opt for a mini calendar widget.

A full-scale calendar usually spans an entire Wix page. Being an expansive calendar version allows room for several calendar functions, such as date and keyword search, calendar subscription, and filters.

print screen of Timely poster board full calendar view
Posterboard full calendar view

The mini calendar widget views are smaller and require less space. Usually they only display a limited number of upcoming events, and have no search or filtering functions.

example of Timely calendar widget stream view or mini calendar
Stream calendar widget view
example of Timely calendar widget stream view or mini calendar
Modern row calendar widget view

Additionally, you can use Timely slider and carousel widgets to further spruce up the design of your Wix site. These widgets can definitely help you showcase your events in an attractive way.

All options can be embedded individually or together to create a seamless experience for your website visitors.

3. How to Add Full Calendar Views to a Wix Page

Before installing Timely calendar on your Wix website, make sure you have the right Wix plan. For optimal results, we recommend installing Timely using Custom Elements, which is a feature only available on Wix Premium plan.

Also, we recommend having your Timely calendar URL handy. You can find your Timely calendar URL by clicking on the Public Calendar shortcut on the right corder of your dashboard. It looks like this: https://events.timely.fun/xxxxxxx/posterboard.

print screen of timely public calendar URL shortcut
Timely Public Calendar URL shortcut

Once you have these initial steps completed, follow the instructions below:

  1. Log in to your Wix account.
  2. Inside Wix Website Editor, select the page you want to embed Timely calendar.
  3. Click on Embed, and then on Custom Embeds. Next, add a Custom Element.
print screen of wix website highlighting where to add a custom element
Custom element embedding on Wix dashboard
  1. Select Choose Source. Then, set the Server URL option with the value: https://events.timely.fun/embed-wix.js
print screen wix custom element
  1. Select Set Attributes and set at least the attribute data-src with your Timely public calendar url (for example, https://events.timely.fun/xxxxxxx/posterboard). For the calendar to be responsive in smaller screens, set the data-width with the value “var(–customElementWidth)”. Also, if you wish, you can stretch the calendar section to full width to improve visibility.
print screen wix elements
  1. Save your changes, and then go to the front end of your Wix site. There you will see that your Timely calendar has been properly installed, according to your embed code settings. If you still don’t see the calendar, try logging out of Wix.

4. How to Add Widgets to a Wix Website

In order to feature a mini calendar widget on your Wix page or website, you must first customize your Timely calendar URL by replacing the last section of the URL with the name of desired calendar view. For example, if you want to create a Stream View calendar widget, the applicable calendar URL is https://events.timely.fun/xxxxxxx/stream.

For slider and carousel, although Wix works with link embedding and not code embedding, first you will need to set up the necessary embed codes for these widgets. If you are unsure how to do so, refer to the instructions outlined on the following user guide posts:

Once the embed codes are ready, you can just modify your public calendar URL by replacing the view name to either carousel or slider. For instance, https://events.timely.fun/xxxxxxx/slider and https://events.timely.fun/xxxxxxx/carousel.

With your widgets URL on hand, follow the same instructions provided in this post above to add them to the desired web page. The only difference is that, when creating the page, you will have to limit the dimensions of the embeddable area in advance. In doing so, you will ensure the widget appears in the correct place on the page.

example of a carousel widget installed on a website
Example of a carousel widget installed on a website

We hope that this user guide has helped you learn how to add an events calendar to Wix websites and pages. If you wish, you can even use Timely calendar to accept bookings and sell tickets to your events, directly from your own website.

For more user information, please go to our Help Center. If you have any questions, feel free to contact us. Alternatively, you can open a support ticket from your Timely account.