> 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.md). # Custom Widget Builder The Custom Widget Builder lets you design widgets that match your wallpaper, aesthetic, and personal style -- with pixel-level control over every visual element. ## What you can build * **Month widget (Large / 4x4)** -- A full month grid with event bars, customizable header, and deep color/opacity controls. * **Week widget (Medium / 4x2)** -- A week-focused layout showing 7 days with event indicators and customizable styling. ## Getting started 1. Open the app and go to the **Widgets** tab. 2. Tap **Create Custom Widget** (or the **+** button). 3. Choose a size: **Month (Large)** or **Week (Medium)**. 4. The builder opens with a live preview at the top and controls below. 5. Adjust settings, see changes in real-time, and tap **Save** when you're happy. ## Builder controls overview The builder is organized into sections. Each section controls a different aspect of your widget's appearance. ### Background Choose from three background types: * **Solid color** -- A single flat color. Best for clean, minimal designs and maximum text readability. * **Gradient** -- Multiple colors blending together with configurable start and end points. Great for soft aesthetics and wallpaper matching. * **Image** -- Pick a photo from your library. Includes a brightness slider to ensure text remains readable over the image. The app stores the image so the widget extension can render it. When an image is no longer used by any widget, it's automatically cleaned up. See [Backgrounds](/docs/custom-widgets-builder/builder/backgrounds.md) for more details. ### Colors Full control over every text and element color in the widget: * **Header text color** -- The month/year name at the top of the widget. * **Day text color** -- The numbers in the calendar grid. * **Weekday header text color** -- The day-of-week labels (Mon, Tue, etc.). * **Accent color** -- Used for the "today" indicator, buttons, and optionally for event bars. * **Today circle color** -- The color of the circle or dot marking today's date. * **Today highlight** -- An optional background tint for today's cell, with adjustable color and opacity (set opacity to 0 to disable). See [Colors, grid & cells](/docs/custom-widgets-builder/builder/colors-grid-cells.md) for more details. ### Grid and cells Control the structural appearance of the calendar grid: * **Grid line color and opacity** -- Set to 0 to hide grid lines entirely, or increase for a more structured look. * **Cell background color and opacity** -- Add a subtle fill to each day cell for a "tile" effect. * **Cell border color and width** -- Add borders to individual cells for definition. * **Corner radius** -- Controls the rounding of the overall widget container. ### Header buttons Optional interactive elements in the widget header: * **Navigation buttons** -- Forward/back buttons for month or week navigation. * **Sync button** -- Triggers a calendar data refresh when tapped. * **Add button** -- Opens the event creation flow. * **Button background opacity** -- Control how prominent or subtle the button backgrounds appear (from invisible to a solid "pill" shape). See [Header buttons & opacity](/docs/custom-widgets-builder/builder/header-buttons-opacity.md) for more details. ### Opacity controls (fine-grained) Independently control the visibility of each element without changing its color: * Month name opacity * Date numbers opacity * Weekday names opacity * Weekday header bar background opacity * Event bars opacity * Event text opacity This gives you enormous flexibility. For example, you could make event text barely visible while keeping event bars at full opacity, or fade out weekday names for a cleaner look. ### Event color mode Choose how event bars are rendered: * **Preserve event colors** -- Events use their original calendar color (Google colors, iOS colors, or custom colors). Recommended for multi-calendar users. * **Use accent color** -- All events render in a single color (the widget's accent color). Recommended for minimal, unified designs. To change this setting: **Edit any widget -> Display Options -> Preserve Event Colors** (toggle on/off). See [Event colors](/docs/custom-widgets-builder/builder/event-colors.md) for more details. ### Monochrome mode Enable monochrome to convert all colors to grayscale. This creates a consistent, sophisticated look that works with any wallpaper. Event bars can still show color if **Preserve Event Colors** is enabled in **Edit any widget -> Display Options**. ## Live preview As you adjust settings, the preview at the top of the builder updates in real-time. What you see in the preview is exactly what the widget will look like on your Home Screen. ## Saving and editing * Tap **Save** to save your custom widget. * Saved widgets appear in the Widgets tab under your custom widgets collection. * To edit a saved widget, tap it and the builder reopens with your saved settings. * To add a saved custom widget to your Home Screen, follow the standard [Add widgets](/docs/getting-started/add-widgets.md) process and select your custom design. ## Tips for great designs * **Match your wallpaper** -- Use the image background option or pick gradient colors from your wallpaper. * **Less is more** -- Try reducing opacity on weekday headers and grid lines for a cleaner look. * **Monochrome + preserved colors** -- Enable monochrome mode but keep **Preserve Event Colors** on in **Edit any widget -> Display Options**. The only color in your widget will be the event bars, creating a striking effect. * **Dark wallpapers** -- Use light text colors with a transparent or dark solid background. * **Test readability** -- Always check that day numbers and event text are legible against your chosen background, especially with image backgrounds. ## Pro requirement Custom widgets are a **Pro feature**. You need an active Pro subscription or Lifetime Pro purchase to create and use custom widgets. --- # 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.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.