Step 3: Finding and copying the event calendar widget

After an admin has created an event and has set each of their events to be linked to this ECAL calendar, admins have the ability to display these events on an external website via different widgets.

More information on these types of displays can be found on the ECAL event website.

There are three different types of widgets that an admin can insert into their website:

1. PAGE VIEW- The ‘Page‘ mode provides a detailed, interactive and attractive display of your events, perfect for your ‘What’s On?’ or ‘Events Calendar’ page. To view a live version of this type of view, click here.

2. CAROUSEL VIEW- The ‘Carousel‘ mode provides a high impact, high attention display of your events, perfect for your homepage, beneath your site masthead. To view a live version of this type of view, click here.

3. COLUMN VIEW- The ‘Column‘ mode provide a neat, highly flexible, high impact display of your events in a vertical column, perfect for a side margin across the inside pages of your website. To view a live version of this type of view, click here.

HOW TO INSERT THIS WIDGET INTO A WEBSITE?

Below provides an outline as to how to view and copy the coding needed to insert these types of widgets into your website.

There are two sets of code that is needed in order for the widgets to display correctly, so if you are unsure how to add this correctly to your website, speak to your IT person or find someone who knows about this side of things (our support team will not be able to help you on this side of things).

You can use one or multiple of these widgets on your website- it is entirely up to you.

1. Click the drop down arrow against EVENTS and click against MANAGE EVENTS.

2. Click into the ECAL WIDGETS tab.

3. Displayed here and the three different types of views that this calendar can be displayed as, click VIEW against the relevant widget you wish to use.

4. On the WEBSITE tab, this is where you can copy the codes to insert into your website. Click the COPY button against each set of code. 

5. You can view how this will display on your website via clicking into the PREVIEW EXAMPLE tab.

6. Copy and paste this coding into your website.