# 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](https://docs.digia.tech/ui-building-blocks/widgets/default-properties "mention"): **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.