RonakCN

Calendar

In ProgressDark modeRTL

A month calendar grid for date selection.

7:21
March 2026
S
M
T
W
T
F
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Installation

Copy the component into your project using the CLI:

$ronakcn add calendar

Usage

Import and use the component in your Flutter widget tree:

lib/pages/example.dart
import 'package:flutter/material.dart';
import '../components/calendar/calendar.dart';

class ExamplePage extends StatelessWidget {
  const ExamplePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('RcnCalendar Example')),
      body: Center(
        child: RcnCalendar(
          // Configure props here
        ),
      ),
    );
  }
}

Variants

Calendar ships with the following variants:

default

Single date selection calendar.

7:21
March 2026
S
M
T
W
T
F
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

date-range

Select a start and end date range.

7:21
March 2026
S
M
T
W
T
F
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

multiple-select

Select multiple individual dates.

7:21
March 2026
S
M
T
W
T
F
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Props

PropTypeDefaultDescription
selectedDateDateTime?nullCurrently selected date.
onDateChanged*ValueChanged<DateTime>—Called when date is selected.
firstDate*DateTime—Earliest selectable date.
lastDate*DateTime—Latest selectable date.
markedDatesList<DateTime>const []Dates with dot indicators.

Source files

lib/components/ui/calendar.dart
import 'package:flutter/material.dart';

class RcnCalendar extends StatefulWidget {
  const RcnCalendar({super.key, this.selectedDate, required this.onDateChanged, required this.firstDate, required this.lastDate, this.markedDates = const []});
  final DateTime? selectedDate;
  final ValueChanged<DateTime> onDateChanged;
  final DateTime firstDate;
  final DateTime lastDate;
  final List<DateTime> markedDates;

  @override
  State<RcnCalendar> createState() => _RcnCalendarState();
}

class _RcnCalendarState extends State<RcnCalendar> {
  late DateTime _focusedMonth;

  @override
  void initState() {
    super.initState();
    _focusedMonth = widget.selectedDate ?? DateTime.now();
  }

  @override
  Widget build(BuildContext context) {
    return CalendarDatePicker(
      initialDate: widget.selectedDate ?? DateTime.now(),
      firstDate: widget.firstDate,
      lastDate: widget.lastDate,
      onDateChanged: widget.onDateChanged,
    );
  }
}
Version 0.1.0 · data category