# Calendar The **Calendar** widget is used to display and interact with dates in a structured, month-based or week-based view.\ It’s ideal for anything related to **scheduling, bookings, events, reminders, or date selection** inside your app. {% embed url="" %} Watch this on Youtube: #### Adding a Calendar Widget The Calendar widget is located in the **Form Elements** section of the Widget Palette. Once added, you can configure its properties from the **Widget Properties Panel**.
A hero image showing a calendar widget with date selection and event highlighting.

The Calendar widget provides intuitive date selection and event visualization.

### Core Concepts To keep the Calendar powerful but flexible, its properties are grouped into **4 major sections** in the dashboard: 1. **Calendar Style** * Core calendar functionality and behavior * Date range configuration, format, and visual styling * Includes selection modes, highlighting, and layout options 2. **Headers Style** * Style the **top header** of the calendar * Month & year display, navigation controls, and header appearance * Controls text styling, alignment, colors, and spacing 3. **Days of Week Style** * Style the **row that shows the days of the week** * Weekday labels, weekend styling, and row appearance * Controls text styles, colors, borders, and layout 4. **Action** * Event handling for date selections * Trigger actions when users select dates or ranges These groups make it easier to **customize the entire calendar** to match your app’s design system while keeping functionality consistent. ### Properties #### Calendar Style | Property | Description | | ---------------------------- | -------------------------------------------------------------------------- | | `firstDay` | The first date that can be selected in the calendar. | | `lastDay` | The last date that can be selected in the calendar. | | `currentDay` | The current date, which is often highlighted. | | `focusedDay` | The date that is initially focused when the calendar is displayed. | | `startingDayOfWeek` | The day of the week to start the calendar with (`sunday`, `monday`, etc.). | | `calendarFormat` | The format of the calendar (`month`, `twoWeeks`, `week`). | | `rangeSelectionMode` | The selection mode (`singleDate`, `range`). | | `rangeStartDateInitialValue` | The initial value for the start date in range selection mode. | | `rangeEndDateInitialValue` | The initial value for the end date in range selection mode. | | `rangeHighlightScale` | The scale of the highlight for a selected date range. | | `rangeHighlightColor` | The color of the highlight for a selected date range. | | `outsideDaysVisible` | If `true`, days from the previous and next months will be visible. | | `isTodayHighlighted` | If `true`, the current date will be highlighted. | | `tableBorderColor` | The color of the border around the calendar table. | | `tableBorderWidth` | The width of the border around the calendar table. | | `tablePadding` | The padding around the calendar table. | | `rowHeight` | The height of each row in the calendar. | | `pageJumpingEnabled` | If `true`, allows the user to jump to a specific month or year. | | `shouldFillViewport` | If `true`, the calendar will fill the entire viewport. | | `weekNumbersVisible` | If `true`, week numbers will be displayed. | #### Headers Style | Property | Description | | --------------------- | ------------------------------------------------------------------------ | | `headersVisible` | If `true`, the header with the month and year will be visible. | | `shape` | The shape of the header. | | `color` | The background color of the header. | | `borderColor` | The border color of the header. | | `borderWidth` | The border width of the header. | | `headerBorderRadius` | The border radius of the header. | | `headerPadding` | The padding around the header. | | `centerTitle` | If `true`, the header title will be centered. | | `textStyle` | The TextStyle for the header title. | | `leftChevronPadding` | The padding around the left chevron icon for navigating between months. | | `rightChevronPadding` | The padding around the right chevron icon for navigating between months. | #### Days of Week Style | Property | Description | | ----------------------------- | ------------------------------------------------------------- | | `daysOfWeekVisible` | If `true`, the row with the days of the week will be visible. | | `daysOfWeekHeight` | The height of the days of the week row. | | `weekdayTextStyle` | The TextStyle for the weekday labels. | | `weekendTextStyle` | The TextStyle for the weekend labels. | | `shape` | The shape of the days of the week row. | | `color` | The background color of the days of the week row. | | `borderColor` | The border color of the days of the week row. | | `borderWidth` | The border width of the days of the week row. | | `daysOfWeekShapeBorderRadius` | The border radius of the days of the week row shape. | #### Action | Property | Description | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `onRangeSelected` | Action triggered when a date range is selected by the user. Receives an object with `selectedRangeStart` (ISO 8601 string of the start date), `selectedRangeEnd` (ISO 8601 string of the end date), and `focusedDay` (ISO 8601 string of the currently focused day) for processing the date range selection. | ### Default Properties The Calendar widget supports the following sections of [Default Properties](/ui-building-blocks/widgets/default-properties.md): **Layout** * `width` * `height` * `padding` * `margin` **Alignment** * `align` **Visible** * `visible` ### Use Cases You’d typically use a **Calendar widget** for: * **Bookings & Appointments** * Booking a salon, doctor, class, or event slot * Selecting check-in/check-out dates for travel or hotels * **Events & Schedules** * Showing upcoming events on specific days * Highlighting days with tasks, deadlines, or meetings * **Reminders & Tracking** * Habit trackers, streaks, attendance * Marking completed days, missed days, or goals * **Forms & Input** * Choosing a date of birth * Picking due dates or target dates Basically, whenever the user needs to **see dates visually** and **select or understand patterns over time**, the Calendar widget fits. --- # Agent Instructions: 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://docs.digia.tech/ui-building-blocks/widgets/input-interaction-widgets/calendar.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.