How can I edit the style and colors of my calendar?

How to edit the style and colors of your calendar.

In this video, you'll learn how to edit the style and colors of your calendar with a special custom code we've added.

How to edit the style and colors of your calendar: A Step-by-Step Guide

1. Font Family:

   • Access the code section of your calendar.

   • Change the font-family property to your desired font (e.g., Monera, Open Sans).

2. Button Colors:

   • Locate the button color options in the code.

   • Use hex codes to define the background and text color of the button.

     • You'll find separate options for:

       • Regular button color

       • Hovered button color (when your mouse is over it)

       • Active button color (when the button is selected)

Color Coding Explanation:

The provided explanation focuses on the button colors, but the same logic applies to other elements. There are three sets of colors to manage:

• Main Calendar Area: This defines the color of available days.

• Sidebar: This defines the color of the sidebar elements.

• Button: This defines the color of the button at the bottom.

Each set has three color options:

• Not Hovered: The color when your mouse isn't over the element.

• Hover: The color when your mouse hovers over the element.

• Active/Clicked: The color when the element is selected or clicked.

Tips:

• Refer to the code comments (if available) to understand which color option applies to what.

• Use a hex code generator to find the desired color codes.

• The guide recommends keeping the default settings if you're not comfortable with custom coding.