calendar_date_picker2

calendar_date_picker2 라이브러리

Dart packagescalendar_date_picker2 | Flutter package

A lightweight and customizable calendar picker based on Flutter CalendarDatePicker, with support for single date picker, range picker and multi picker.

https://pub.dev/packages/calendar_date_picker2

언제 사용하는가

•

일정 선택 (캘린더 앱)

•

예약 시스템 (호텔, 병원, 미용실)

•

기간 선택 (시작일 ~ 종료일)

•

출석 체크 / 이벤트 날짜 선택

설치 방법

dependencies:
  calendar_date_picker2: ^0.5.0
YAML
복사

flutter pub get
Bash
복사

기본 사용법

import 'package:calendar_date_picker2/calendar_date_picker2.dart';
Dart
복사

CalendarDatePicker2(
  config: CalendarDatePicker2Config(),
  value: [],
  onValueChanged: (dates) {
    print(dates);
  },
)
Dart
복사

주요 개념

value

선택된 날짜 리스트

value: [DateTime.now()]
Dart
복사

•

단일 선택 → 1개

•

다중 선택 → 여러 개

•

범위 선택 → 시작 / 끝 날짜 2개

onValueChanged

날짜 선택 시 실행되는 콜백

onValueChanged: (dates) {
  setState(() {
    selectedDates = dates;
  });
}
Dart
복사

config

캘린더 설정 (핵심 )

config: CalendarDatePicker2Config(
  calendarType: CalendarDatePicker2Type.single,
)
Dart
복사

캘린더 타입

단일 선택

calendarType: CalendarDatePicker2Type.single
Dart
복사

하루만 선택

다중 선택

calendarType: CalendarDatePicker2Type.multi
Dart
복사

여러 날짜 선택 가능

범위 선택 (가장 많이 씀)

calendarType: CalendarDatePicker2Type.range
Dart
복사

시작일 ~ 종료일 선택

UI 커스터마이징

색상 변경

config: CalendarDatePicker2Config(
  selectedDayHighlightColor: Colors.blue,
  todayTextStyle: TextStyle(color: Colors.red),
)
Dart
복사

요일 스타일

weekdayLabelTextStyle: TextStyle(
  fontWeight: FontWeight.bold,
)
Dart
복사

크기 조절

dayMaxWidth: 40,
Dart
복사

선택 스타일

selectedDayTextStyle: TextStyle(
  color: Colors.white,
)
Dart
복사

다이얼로그로 띄우기 (실전 )

showDialog(
  context: context,
  builder: (context) {
    return AlertDialog(
      content: CalendarDatePicker2(
        config: CalendarDatePicker2Config(),
        value: selectedDates,
        onValueChanged: (dates) {
          setState(() {
            selectedDates = dates;
          });
        },
      ),
    );
  },
);
Dart
복사

전체 예제

class CalendarExample extends StatefulWidget {
  @override
  _CalendarExampleState createState() => _CalendarExampleState();
}

class _CalendarExampleState extends State<CalendarExample> {
  List<DateTime?> selectedDates = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("캘린더 예제")),
      body: Column(
        children: [
          CalendarDatePicker2(
            config: CalendarDatePicker2Config(
              calendarType: CalendarDatePicker2Type.range,
              selectedDayHighlightColor: Colors.blue,
            ),
            value: selectedDates,
            onValueChanged: (dates) {
              setState(() {
                selectedDates = dates;
              });
            },
          ),

          Text("선택된 날짜: $selectedDates"),
        ],
      ),
    );
  }
}
Dart
복사