> 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/header-buttons-opacity.md). # Header buttons & opacity controls Custom widgets give you control over interactive header buttons and the visibility of every element through independent opacity sliders. ## Header buttons The header area at the top of your custom widget can include interactive buttons. Each button can be toggled on or off independently. ### Navigation buttons Forward and back buttons that let you navigate between months (on Month widgets) or weeks (on Week widgets) directly from the widget. * When tapped, the widget updates to show the next or previous time period. * Useful for quick planning without opening the app. ### Sync button A refresh button that triggers a calendar data sync when tapped. * Forces the widget to re-read calendar data from the app's storage. * Helpful after adding or editing events when you want the widget to update immediately. * Can be configured separately in Settings > Optional Settings > Widget Sync Button. ### Add button Opens the event creation flow when tapped. * Takes you directly to the new event screen in the app. * The destination (which calendar to save to) is determined by your Settings > Optional Settings > New Event Save Destination. ### Button background opacity Controls how prominent the button backgrounds appear: * **0** -- Buttons have no visible background (just the icon). * **Low values (0.1-0.3)** -- A subtle "pill" shape behind each button. * **Higher values (0.5-1.0)** -- A more visible, solid button background. This lets you match the button prominence to your overall widget design. On busy backgrounds (images, gradients), higher button opacity improves visibility. On clean backgrounds, lower opacity keeps things minimal. ## Opacity controls (fine-grained) These controls let you adjust the visibility and visual weight of individual elements without changing their color. Each element has its own independent opacity slider ranging from 0 (invisible) to 1 (fully visible). ### Month name opacity Controls the visibility of the month name and year text in the header. Reduce this to de-emphasize the month name and let the calendar grid take center stage. ### Date numbers opacity Controls the visibility of the day numbers in the grid. Even at low values, the numbers remain slightly visible for reference. At 0, day numbers are hidden entirely (useful for abstract, art-style widgets where you only want to see event bars). ### Weekday names opacity Controls the visibility of the day-of-week labels (Mon, Tue, Wed, etc.) above the grid. Reduce for a cleaner look if the day position is enough context. ### Weekday header bar background opacity The weekday header row can have a background bar. This controls its opacity: * At **0**, the weekday row blends seamlessly into the widget background. * At higher values, a visible strip separates the weekday names from the calendar grid, providing structural clarity. ### Event bars opacity Controls the visibility of event bars rendered inside day cells. Reduce for a subtler event indication, or keep at full opacity for maximum visibility. ### Event text opacity Controls the visibility of event text labels (if shown alongside bars). This is independent of the event bar opacity, so you can show bars without text, or text without bars. ## Monochrome mode Enabling monochrome converts all widget colors to grayscale. **What it does:**- All text, grid lines, cell backgrounds, and UI elements are rendered in shades of gray. * If **Preserve Event Colors** is enabled in **Edit any widget -> Display Options**, event bars retain their original colors even in monochrome mode. This creates a striking effect where the only color in the widget comes from your events.**Best for:**- Widgets that need to work with any wallpaper color. * Creating a consistent, sophisticated look across multiple widgets. * Making event bar colors pop against a neutral background.**Tips:**- Combine monochrome mode with a solid dark background and preserved event colors for a modern, professional look. * Monochrome mode pairs especially well with image backgrounds, as it prevents color clashes between the widget elements and the photo. --- # 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/header-buttons-opacity.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.