Custom Calendar and Widgets: Embedding Your Viewcy Events on Your Website
Viewcy's Custom Calendar tool lets you display your upcoming events directly on your own website. You can either link to a standalone calendar page or embed it inside your site with an iframe. The calendar matches your brand's colors and font, updates automatically whenever your events change, and lets visitors browse, search, and buy tickets without leaving your page.
Already using an old `viewcyembed.com` link? That was our previous embed tool and is now retired. If your embedded calendar is showing the wrong dates or looks out of date, please regenerate your link using the steps below — the new tool replaces it and fixes those issues.
What you can customize
Colors — background, text, and button colors, set with 6-digit hex codes to match your site.
Font — choose the font your calendar uses (defaults to Averta CY).
Event cards — show or hide event images, descriptions, and a "Get Tickets" button; choose a list or grid default layout; and group recurring events into a single card.
Browsing and navigation — add a date browser (calendar), featured-tag filters, a search box, and a back button.
Step 1: Open the Custom Calendar tool
Log in to Viewcy and go to your organizer dashboard.
In the management menu, open Marketing.
Select the Custom Calendar tab.
You'll see the "Create Custom Calendar View" form.
Step 2: Customize your calendar
Fill in the form to match your website:
Design
Background color — enter a 6-digit hex code (default FFFFFF / white).
Text color — default 000000 / black.
Button color — default D60B52.
Need help choosing colors? Try a color picker tool such as ColorHexa or HTML Color Codes.
Font — pick the font your calendar will use.
Event card display options
Show event images — image-forward design, or a simpler text-focused layout.
Default layout — List or Grid view. (Grid works well inside embedded iframes. Visitors can switch layouts themselves; this just sets what they see first.)
Event description preview — adds a short description to each card (also improves search).
"Get Tickets" button — adds a tickets button to each event card.
Group recurring events — combines recurring events into a single card with time options, instead of showing each occurrence separately. Turn this on if you run repeating events and want them tidied into one card.
Browsing and navigation
Calendar — lets visitors browse by date (helpful when you have many upcoming events).
Browse by featured tags — enter tags separated by commas; visitors can click a tag to filter the list. Tags appear in the order you enter them.
Back button — good for standalone pages; you'll usually want to hide it for embedded iframes.
Search — lets visitors search across all your upcoming events (add descriptions to make search more useful).
Step 3: Generate your link
When you're happy with the settings, click Generate Link. A pop-up will show your unique calendar link and a copy button. The link looks like this:
Copy the link. You can click Visit Page to preview it first.
Step 4: Add it to your website
You have two options.
Option A — Link to your calendar
Just use the generated link as a normal hyperlink (for example, a "See our events" button or menu item). This opens your branded calendar as a standalone page.
Option B — Embed it with an iframe
To show the calendar directly inside one of your web pages, paste the following code into your page's HTML and replace the src value with your generated link:
<style>
.viewcy-calendar {
width: 100%;
height: 1000px;
border: 0;
}
@media (max-width: 600px) {
.viewcy-calendar {
width: 95%;
}
}
</style>
<iframe
class="viewcy-calendar"
src="PASTE_YOUR_GENERATED_LINK_HERE"
title="Events Calendar"
loading="lazy"
></iframe>
Adjust the height value to fit your page. When embedding, we recommend choosing the Grid default layout and hiding the back button in Step 2.
Tips and good to know
Automatic updates — the calendar always reflects your current events. When you add, edit, or remove an event in Viewcy, the embedded calendar updates on its own. No need to change the code.
Use it anywhere — the same link can be added to multiple pages or websites.
Recurring events showing on one date? Make sure Group recurring events is set the way you want in Step 2, then regenerate the link. If you copied an old viewcyembed.com link, replace it with a freshly generated one.
Free to use — embedding your calendar is included at no cost.
Need more?
For advanced customization or API access to your events, reach out to us at support@viewcy.com.