How to Embed the Arts Calendar on Your Website

Home › Vermont Arts › Arts Calendar › How to Embed the Arts Calendar on Your Website

The Vermont Arts Calendar is the best source for arts events all across the state. Listings are free and seen by thousands of people throughout and beyond Vermont. The calendar is also embeddable, which means anyone can display it on their own webpage. Embedded displays can show events by region, making it easy to share local arts events with your community.

The ideal way to embed the arts calendar on a page on anyone’s website would be to copy/paste this HTML script tag (in the blockquote below) and insert that into the page where the calendar should appear.

<script src="https://www.vermontartscouncil.org/assets/js/artsCalendarEmbed.js" data-vac-embed data-vac-embed-auto-height></script>

This will automatically create the <iframe>, so nothing else is needed. This is the simplest and most ideal way to embed the arts calendar. However, there are other options you can mix and match to achieve specific effects if you want to provide more options.

They are as follows:

1. data-vac-embed – (required) this one tells the script where to insert the <iframe>. You can see that this is present on the example I have provided. This attribute has no value.
2. data-vac-embed-auto-height – (optional, recommended) this one tells it to have dynamic height, so it will resize the iframe to eliminate scrolling of the iframe itself. This attribute is present on the example I provided. This attribute has no value.
3. data-vac-embed-height – (optional) this one is just a specific height in pixels, if you’d rather not use the automatic height. Ex: data-vac-embed-height=”800″ to make it explicitly 800px tall.
4. data-vac-embed-width – (optional) this one is a specific width in pixels, if you’d rather not use the default 100% width. Ex: data-vac-embed-width=”1000″ to make it explicitly 1000px wide.
5. data-hide-heading – (optional) this one hides the main heading from the embedded calendar content. This attribute has no value.
6. data-region – (optional) this one auto-selects a region from the calendar. The options are as follows (the numbered list corresponds to the number you should use. Ex: data-region=”2″ would auto-select Chittenden County):
   1. Northern Vermont
   2. Chittenden County
   3. Central Vermont
   4. Southern Vermont
   5. Outside Vermont
   6. Statewide

If you wanted to insert an arts calendar that auto-loads only events from Central Vermont, and has auto-height, use the following:

<script src="https://www.vermontartscouncil.org/assets/js/artsCalendarEmbed.js" data-vac-embed data-vac-embed-auto-height data-region="3"></script>

If you wanted to embed an arts calendar that is exactly 600px x 600px square, you would use the following:

<script src="https://www.vermontartscouncil.org/assets/js/artsCalendarEmbed.js" data-vac-embed data-vac-embed-height="600" data-vac-embed-width="600"></script>