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.