• Attract new Website Visitors and Engage with your Audience: A cool “What’s Happening” page is one of the best ways to build a following, drive traffic with repeat and longer website visits.
• Bring new Content and Events to your Site: People are busy, and they’re only going to take 5 minutes to post events to one site, at best – make it yours.
• Attract Money and Monetize your Events: Advertisers and sponsors spend their limited marketing budget on where they perceive the most value to be.

With the Design Setting on your Timely dashboard, you can set up different design customizations for your event calendar, strengthening your brand. To start, click on “Settings” at the left toolbar, then select “Design” at the top tabs. 

Always remember to click the “Save” button to record your new personalized calendar design settings. If you do not wish to save the changes you’ve made then click the “Reset” button.

 

1. Calendar Themes

Choose one of our available calendar themes:

 

Night – a beautiful and functional dark theme for your calendar. It enables low contrast, reducing eye strain, and facilitating use in low-light environments.

Naos – in this template, when you click on the event post from the public view of your calendar, the event popup displays the event description in a narrower box. In addition, the title and the event date appear in a row on top of the other details of the event.

 

 

Next, click the “Save” button to record your new personalized calendar design settings.

2. Calendar Font Settings

If you want to add a font that is not available by default, you can add a custom font with Google Fonts or Typekit fonts. You can do that your calendar, events’ title and for the slider. 

Follow the instructions on your dashboard. First, choose the font you want to use as the calendar’s default font. Second, paste the URL in the “Font URL” box. Third, set the font name to be used for each section to override the default font.

 

 

Lastly, click the “Save” button to record your new personalized calendar design settings.

3. Calendar Custom Colors

Customize the look of your calendar by changing the colors used in the different calendar views. 

You can choose the colors by clicking on the desired option. A color picker box will appear allowing you to pick your color. You can either drag the colour selector or type the hex code of the desired color on the appropriate box. Moreover, you can click on the “Restore Default” button to restore the color from the original template.

 

• General
• Buttons
• Event details
• Views: posterboard, tile, stream view, agenda, month, week and slider.

4. Calendar Custom Metadata

If you wish to have the same metadata for both standalone and embedded calendars, you only need to fill the first box and leave the “Embed Customization” checkbox unchecked.

If you check the “Embed Customization”, a second box will appear and you will need to add custom metadata. By doing that, the embed calendar will have different metadata than the standalone calendar.

Then, click the “Save” button to record your new personalized calendar design settings.

5. Calendar Custom Sections

Custom header and footer sections allow you to place text, image, or ads at the top or bottom of your calendar.  You can do this for your standalone calendar (hosted on time.ly) and your embedded calendars (iFrame and SSE embed). 

If you wish to have the same customizations for both standalone and embedded calendars, you only need to fill the first two boxes and leave the “Embed Customization” checkbox unchecked.

If you check the “Embed Customization”, two more boxers will show and you will need to add custom code to each one. By doing that, you will be able to customize the embed calendar differently than the standalone calendar.

Next, click the “Save” button to record your new personalized calendar design settings.

6. Calendar Custom Style Sheet

Custom style sheets give you more control for styling your calendar. You can change only some small parts of your calendar’s look and feel or change it completely with the help of CSS. You can do this for your standalone calendar (hosted on time.ly) and your embedded calendars (iFrame and SSE embed). 

 

If you wish to have the same custom style sheets for both standalone and embedded calendars, you only need to fill the first box and leave the “Embed Customization” checkbox unchecked.

If you check the “Embed Customization”, a second box will appear and you will need to add a custom style sheet. By doing that, the embed calendar will have a different custom style sheet from the standalone calendar.

Please remember to add custom styles to classes that start with a “timely-” prefix, those classes are more likely to remain the same with every new release.

Always remember to click the “Save” button to record your new personalized calendar design settings. If you do not wish to save the changes you’ve made then click the “Reset” button.

7. What to do next?

Once you’ve finished the design customization of your calendar, you can go ahead and create a new event, import events or embed your calendar on your site.

For more user guidance, please go to our Help Center. If you have any questions or need additional assistance, do not hesitate to contact us by opening a support ticket from your Timely account’s dashboard.