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.