> For the complete documentation index, see [llms.txt](https://monthly-calender-widgets.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://monthly-calender-widgets.gitbook.io/docs/custom-widgets-builder/builder/colors-grid-cells.md). # Colors, grid & cells The Custom Widget Builder gives you precise control over every color and structural element in your widget. This page covers text colors, today styling, grid lines, and cell appearance. ## Text colors ### Header text color Controls the color of the month name and year displayed at the top of the widget. Choose a color that stands out clearly against your background. ### Day text color Controls the color of the day numbers in the calendar grid. This is the most frequently viewed text in the widget, so readability is critical. ### Weekday header text color Controls the color of the day-of-week labels (Mon, Tue, Wed, etc.) that appear above the calendar grid. These can be the same as the day text color or a different shade for visual hierarchy. ## Today styling The current day gets special treatment in the widget. You can customize both the indicator and the cell background. ### Today circle color The circle (or dot) that marks today's date in the grid. This is typically the most prominent color in the widget -- it draws your eye to the current day. **Tips:** * Use a bold, saturated color for the today circle to make it pop. * The accent color is often a good choice for consistency. ### Today highlight An optional background tint applied to today's entire cell. This adds a subtle (or bold) background color behind today's date. * **Highlight color** -- The color of the background tint. * **Highlight opacity** -- Controls intensity. Set to **0** to disable the highlight entirely. Set to a low value (0.1-0.3) for a subtle glow. Set higher for a bold, obvious highlight. **Tips:** * A low-opacity highlight in the same hue as your today circle creates a cohesive "today" indicator. * On dark backgrounds, a light highlight at low opacity creates a beautiful glow effect. ## Grid line controls Grid lines are the horizontal and vertical lines that separate days in the calendar grid. ### Grid line color The color of the grid lines. Choose a color that provides subtle structure without overpowering the calendar content. ### Grid line opacity Controls visibility on a scale from 0 to 1: * **0** -- Grid lines are completely hidden. This creates a floating, minimal look. * **0.1 - 0.3** -- Barely visible grid lines that provide subtle structure. * **0.5** -- Moderate visibility. A good default for most designs. * **1.0** -- Fully opaque grid lines for a structured, traditional calendar look. **Tips:** * For minimal designs, set grid opacity to 0 or very low values. * For a "notebook" or "paper calendar" feel, use moderate to high grid opacity with thin lines. ## Cell styling Each day in the calendar grid is a "cell." You can customize the appearance of these cells to create different visual effects. ### Cell background color + opacity Adds a fill color behind each day cell. * Set opacity to **0** for transparent cells (the widget background shows through). * Set a low opacity (0.05-0.15) with a light or dark color to create a subtle "tile" effect. * Set a higher opacity for more prominent cell backgrounds. ### Cell border color + border width Adds borders around individual cells. * **Border color** -- The color of the cell borders. * **Border width** -- The thickness of the borders. Set to **0** to disable cell borders. **Tips:** * Cell borders with rounded corners create a modern "card" look for each day. * Combine cell backgrounds with no grid lines for a tile-based design. * Combine grid lines with no cell backgrounds for a traditional grid design. ## Corner radius Controls the rounding of the overall widget container corners. Higher values create more rounded corners. The default matches iOS widget styling, but you can adjust it for a more square or more rounded appearance. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://monthly-calender-widgets.gitbook.io/docs/custom-widgets-builder/builder/colors-grid-cells.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.