The Design section allows you to fully personalize the look and feel of your calendar. You can adjust colors, fonts, borders, spacing, and layout styles to match your website’s branding.
Below is a complete overview of all available customization options.
1. Themes
Choose from preset design themes.
Your calendar starts with the Default Theme, but you can switch to any other theme for a different style.
2. Container
Customize the outer frame of your calendar:
Background Color
Shadow (color, width)
Border (color, width)
Border Radius
Inner Padding
3. Header
Adjust the top section of your calendar:
Header Background Color
Header Font (color, style, font, size)
Text Font (color, style, font, size)
4. Calendar Layout
Customize the main calendar grid:
Light Mode – Shows event names with or without highlight backgrounds
Event Text Color
Days of Week Font (color, style, font, size)
Dates Font (color, style, font, size)
Event Title Font (style, font, size)
Skeleton/Grid (color, width, style)
Highlight Today (enable, color)
5. Agenda View
Customize the list-style Agenda layout:
Font Color
Title Font (style, font, size)
Date Font (style, font, size)
Description Font (style, font, size)
6. Card View
Customize the card-style layout:
Card Background Color – Changes the overall Card View background
Title Font (color, style, font, size)
Description Font (color, style, font, size)
Font Section (color, style, font, size)
Section Divider Color
7. Cross View
Cross View is similar to Timeline View but uses a cross-style layout effect to separate event details:
Title Font (color, style, font, size)
Description Font (color, style, font, size)
Divider Color
Date Font (color, style, font, size)
Date Container Font (color, style, font, size)
8. Timeline View
Customize the chronological timeline display:
Title Font (color, style, font, size)
Description Font (color, style, font, size)
Line Color
Date Font (color, style, font, size)
Daily Events Background
9. Event Info Tooltip / Popup
Adjust how event details appear when clicked:
Section Titles (color, style, font, size)
Section Content (color, style, font, size)
Background Color
Divider Color
10. Buttons & Links
Customize interactive elements:
Buttons Corner Radius
Buttons Font (color, style, font, size)
Buttons Background Color
Link Color
Tips for Best Results
Use consistent font styles across sections for a cleaner look.
Choose high-contrast colors for readability.
Add padding and border radius for a more modern, spacious design.
Turn on Highlight Today to help visitors quickly locate the current date.
Use Light Mode if you prefer a cleaner, text-focused layout.
All Set!
Explore each option to create a calendar design that fits perfectly with your website.
If you ever need help or inspiration, our team is always here to assist you.