calendar_kit 0.0.2 copy "calendar_kit: ^0.0.2" to clipboard
calendar_kit: ^0.0.2 copied to clipboard

A customizable Flutter calendar package with support for single date and date range selection. Features include flexible styling, date constraints and navigation.

example/lib/main.dart

import 'package:calendar_kit/calendar_kit.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const ExampleApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Calendar Kit Example App',
      home: HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey,
      body: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              children: [
                SizedBox(
                  child: Calendar(
                    initialDate: DateTime(2025, 10, 31),
                    minDate: DateTime(2024, 8, 1),
                    maxDate: DateTime(2025, 12, 31),
                    onDateChanged: (value) {},
                  ),
                ),
                SizedBox(height: 32),
                SizedBox(
                  child: RangeCalendar(
                    initialRange: DateRange(DateTime(2025, 10, 20), DateTime(2025, 10, 31)),
                    minDate: DateTime(2024, 8, 1),
                    maxDate: DateTime(2025, 12, 31),
                    onRangeChanged: (value) {},
                  ),
                ),
                SizedBox(height: 32),
                SizedBox(
                  child: Calendar(
                    initialDate: DateTime(2025, 10, 31),
                    minDate: DateTime(2024, 8, 1),
                    maxDate: DateTime(2025, 12, 31),
                    styleConfig: CalendarStyleConfig(
                      calendarRadius: 8,
                      backgroundColor: Colors.white,
                      dateDisplayFieldDecoration: BoxDecoration(
                        color: Colors.redAccent.withAlpha(100),
                        borderRadius: BorderRadius.circular(8),
                        border: Border.all(color: Colors.red, width: 3),
                      ),
                      dateDisplayFieldTextStyle: TextStyle(
                        color: Colors.red,
                      ),
                      dateDisplayFieldSelectedDecoration: BoxDecoration(
                        color: Colors.redAccent.withAlpha(100),
                        borderRadius: BorderRadius.circular(8),
                        border: Border.all(color: Colors.red, width: 3),
                      ),
                      dateDisplayFieldSelectedTextStyle: TextStyle(
                        fontWeight: FontWeight.w700,
                      ),
                      selectedDateDecoration: BoxDecoration(
                        color: Colors.redAccent.withAlpha(100),
                        borderRadius: BorderRadius.circular(8),
                        border: Border.all(color: Colors.red, width: 3),
                      ),
                      selectedDateTextStyle: TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                    onDateChanged: (value) {},
                  ),
                ),
                SizedBox(height: 32),
                SizedBox(
                  child: RangeCalendar(
                    initialRange: DateRange(DateTime(2025, 10, 20), DateTime(2025, 10, 31)),
                    minDate: DateTime(2024, 8, 1),
                    maxDate: DateTime(2025, 12, 31),
                    styleConfig: RangeCalendarStyleConfig(
                        calendarRadius: 8,
                        backgroundColor: Colors.white,
                        startDateDecoration: BoxDecoration(
                            color: Colors.transparent,
                            border: Border.all(color: Colors.red, width: 3),
                            borderRadius: BorderRadius.circular(8)),
                        endDateRadius: BorderRadius.circular(8),
                        endDateDecoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(8),
                          color: Colors.red,
                        ),
                        rangeSegmentColor: Colors.redAccent.withAlpha(100),
                        rangeSegmentLeftRadius: 8,
                        rangeSegmentRightRadius: 8,
                        rangeSegmentBothSidesRadius: 8,
                        dateDisplayFieldDecoration: BoxDecoration(
                          color: Colors.redAccent.withAlpha(100),
                          borderRadius: BorderRadius.circular(8),
                          border: Border.all(color: Colors.red, width: 3),
                        ),
                        dateDisplayFieldSelectedDecoration: BoxDecoration(
                          color: Colors.redAccent.withAlpha(100),
                          borderRadius: BorderRadius.circular(8),
                          border: Border.all(color: Colors.red, width: 3),
                        )),
                    onRangeChanged: (value) {},
                  ),
                ),
                SizedBox(height: 256),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
0
likes
150
points
142
downloads

Publisher

unverified uploader

Weekly Downloads

A customizable Flutter calendar package with support for single date and date range selection. Features include flexible styling, date constraints and navigation.

Repository (GitHub)
View/report issues

Topics

#calendar #date-picker #date-range #widget

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on calendar_kit