Skip to main content
All CollectionsFor Event Creators + Venues
How to Create a Custom Embeddable Calendar
How to Create a Custom Embeddable Calendar
Turjo Khan avatar
Written by Turjo Khan
Updated over a month ago

This tool allows your visitors to view all your upcoming events in a seamless, organized format that matches your site's design.

Sections Covered in This Article:

Overview

The Viewcy Embed Project is a free tool designed to help you create a custom event listing or calendar page for your ie organization in just 60 seconds. You can customize the look and feel to match your website by choosing colors for the background, text, and buttons. This helps ensure that your brand’s design is consistent across platforms.

Accessing the Embed Calendar Tool

To create your custom embeddable calendar:

  1. Visit the Embed Project Site: Go to https://viewcyembed.com/.

Adding Your Username

  1. Enter Your Username: Start by entering your Viewcy organization username in the "Your Viewcy organization username" field. This links the calendar to your specific event listings.

Customizing Appearance (Colors)

You can personalize the appearance of your embeddable calendar by adjusting the color settings.

  • Background Color: Enter the hex code for the background color you want. If you need help finding the right hex code, click the "Go here" link for color assistance.

  • Text Color: Enter the hex code for your preferred text color.

  • Button Color: Choose a dark color for your button to ensure white text is readable. Enter the hex code for the button color.

Generating Your Calendar Page

Once you have customized the appearance:

  1. Click "Generate List Page" or "Generate Calendar Page": Based on your needs, select the option that suits your website best.

    • List Page: Displays events as a simple list.

    • Calendar Page: Displays events in a monthly calendar view.

  2. Preview Your Calendar: After generating the page, you can preview it to see how it looks and make any necessary adjustments to the color scheme.

Embedding the Calendar on Your Website

After generating your calendar page:

  1. Copy the Embed Code: Once the calendar page is generated, an embed code will be provided.

  2. Add the Code to Your Website: Paste the embed code into the HTML of your website where you want the calendar to appear. This could be on a dedicated events page or in a sidebar section.

Best Practices

  • Keep the Colors Consistent: Choose colors that align with your website's branding to create a consistent user experience.

  • Test on Different Devices: Make sure your embedded calendar looks good on both desktop and mobile devices.

  • Provide Clear Navigation: Ensure visitors can easily navigate from your website's calendar to the event pages for more details.

Related Articles

Did this answer your question?