With the Design Setting on your Timely dashboard, you can set up different design customizations for your event calendaring software, strengthening your brand and business. In this post, you will learn how to set up your account design settings.
1. Why You May Want to Customize the Design of your Calendar?
There are many reasons you might want to customize the look and feel of your Timely online events calendar, including:
- To 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 website: 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.
2. Customizations to the Account Design Settings
To start personalizing your website events calendar, on the main menu on the left, click on Settings. Then, click on the Design tab, where you can edit the following settings:
- Views
- Theme
- Event Page Layout
- Event Display Preference
- Font Settings
- Custom Colors
- Toolbar Settings
- Advanced Customizations
3. Views
In order to make it easier for our users to choose and change calendar views, we’ve added a Views menu as the first option on the design settings. The Views settings determines how your events calendar will be seen by your audience on your website.
In addition to being able to choose among more than 15 different calendar views, you can also personalize each view to improve your calendar visualization.
Enabled views: Click on the enabled views dropdown menu to choose which view options you want your audience to see on your public calendar.
Show preferred location: By checking this box a small Google map will open on the screen. There you can choose your preferred calendar location and set it as a default for the Map View.
Default View for Desktop and Mobile: this option allows you to set the default view for your events calendar on a desktop or mobile device.
Show Events: This option lets you choose the maximum quantity of events to be displayed. You can choose the max events per page, the maximum number of events for month on month view and even the maximum of pages loaded when scrolling.
Note: The “Max pages loaded on scrolling” option will only show if you check the box “Load more events on scrolling”.
Moreover, you can choose how your events will be displayed, show the venue name on the event title and hide or show the favorite button.
Here is also where you will add your Google maps API key for the Map View. For additional information, please refer to our user guide post how to set up Google Maps API key.
4. Calendar Themes
Currently, you can choose among 13 different preset calendar themes:
- Amsterdam
- Antique
- Corporate
- Custom
- Default
- Echeveria
- Twilight
- Minimal
- Night
- Peacock
- Timely
- Classic
- Legacy
By choosing any of these themes, colour and fonts of each theme will be automatically applied to your calendar views and widgets. If you wish, you can use them as a starting point to customize your calendar. Any customizations you add to a preset theme will become your Custom theme.
5. Event Page Layout and Display Preference
You can use the Event Page Layout settings to determine the appearance of your event pages. You can choose among 4 different event page layouts:
- Default
- Bold (Naos)
- Compact
- Wide
Moreover, you can choose how the event page displays online once your website visitors click on the event post for more information. The options are: pop-up window or new tab.
6. 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 for 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.
7. Custom Colors
If you want to personalize your events calendar even more, you can customize its look and feel by changing the colors used in different parts, such as the background, border, text, and buttons.
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.
8. Toolbar Settings
Aside from personalizing your online event calendar and event pages, you can also customize your toolbar. By changing the toolbar settings you can change how the toolbar on top of your calendar will be seen by your website visitors.
You can check the options and choose to hide or display them, as listed below:
Furthermore, you can choose the filter that will appear on your public calendar to facilitate event search. For example, categories, tags, venues, organizers and any other custom filter created by you.
9. Advanced Customization
The Advanced Customization menu allows you to customize the design of your calendaring software even more. The options are: custom metadata, custom sections and custom style sheet (CSS).
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.
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 boxes 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.
Custom Style Sheet (CSS)
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.
10. Save
Always remember to click on 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.
11. 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 website.
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. Alternatively, you can open a support ticket from your Timely account’s dashboard.
Recently published
Contents
