Calendar

A calendar component for date selection with month and year navigation.

Basic Usage

February 2026
Mon
Tue
Wed
Thu
Fri
Sat
Sun
dart
1
DCalendar()

With Selected Date

January 2025
Mon
Tue
Wed
Thu
Fri
Sat
Sun
dart
1
2
3
4
5
DCalendar(
  selectedDate: '2025-01-15',
  initialMonth: 1,
  initialYear: 2025,
)

Form Integration

Use the name attribute to include the selected date in form submissions.

January 2025
Mon
Tue
Wed
Thu
Fri
Sat
Sun
dart
1
2
3
4
DCalendar(
  name: 'selected_date',  // Value will be submitted as YYYY-MM-DD
  selectedDate: '2025-01-20',
)

Date Range Constraints

Restrict selectable dates with minDate and maxDate (YYYY-MM-DD format).

January 2025
Mon
Tue
Wed
Thu
Fri
Sat
Sun
dart
1
2
3
4
DCalendar(
  minDate: '2025-01-05',
  maxDate: '2025-01-25',
)

First Day of Week

Configure whether the week starts on Sunday (0) or Monday (1).

Monday Start (default)

February 2026
Mon
Tue
Wed
Thu
Fri
Sat
Sun

Sunday Start

February 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
dart
1
2
3
4
5
// Monday as first day (default)
DCalendar(firstDayOfWeek: 1)

// Sunday as first day
DCalendar(firstDayOfWeek: 0)

Custom Styling

February 2026
Mon
Tue
Wed
Thu
Fri
Sat
Sun
dart
1
2
3
DCalendar(
  className: 'shadow-lg',
)

Features

  • •Month and year navigation with arrow buttons
  • •Today is highlighted with a distinct style
  • •Selected date is visually indicated
  • •Disabled dates are styled appropriately
  • •Dark mode support
  • •Configurable first day of week
  • •Form integration via hidden input

API Reference

Prop Type Default Description
selectedDate String? null Selected date (YYYY-MM-DD format)
initialMonth int? current Initial display month (1-12)
initialYear int? current Initial display year
minDate String? null Minimum selectable date (YYYY-MM-DD)
maxDate String? null Maximum selectable date (YYYY-MM-DD)
firstDayOfWeek int 1 First day of week (0=Sun, 1=Mon)
name String? null Form field name for submission
className String? null Additional CSS classes