[flutter/dart] table calendar만들기

1. 기본 캘린더

table calendar를 사용하기 위해서는 먼저 패키지 하나를 깔아야합니다.

파일 목록 중에 pubspec.yaml파일에 들어가면 dependencies:부분이 있습니다.
그 아래에

table_calendar: ^3.0.6

위 패키지를 작성하시고 Pub get을 눌러준 뒤 패키지가 잘 깔렸는지 확인해 주시면 됩니다.

패키지 설치를 완료하였으면
본인이 작성하던 파일에 들어가서

import 'package:table_calendar/table_calendar.dart';

상단에 이렇게 적어주면 패키지를 사용하실 수 있습니다.

TableCalendar()의 기본 요소에는 3가지가 있습니다.

• focusedDay : 달력에서 기준이 되는 날짜
• firstDay : 달력의 시작 날짜
• lastDay : 달력의 마지막 날짜

현재 코드에서는 DateTime으로 현재 날짜를 foucusedDay로 설정해 두었습니다.

DateTime _focuseDay = DateTime.now();

TableCalendar(
    focusedDay: _focuseDay,
    firstDay: DateTime.utc(2023,01,01),
    lastDay: DateTime.utc(2023,12,31),
)

결과화면

2. 한글 설정

캘린더를 한국어로 설정하기 위해서는 패키지를 하나 더 설치해 주어야 합니다.
위에서 설치한 패키지 밑에 같은 방법으로 설치하면 됩니다.

intl: ^0.17.0

import 'package:intl/date_symbol_date_local.dart';

패키지를 추가하시고 main.dart 파일에서

void main() async{
	await initializeDateFormatting();
    runApp(materialApp(home: MyApp()));
}

메인 함수 부분에 코드 추가하고

locale: 'ko_KR',

이렇게 하면 캘린더가 한국어로 출력됩니다.

3. 헤더 스타일 변경

기본적으로 캘린더를 한 달, 두 주, 한 주로 볼 수 있게 상태를 변경할 수 있는 버튼이 오른쪽 상단에 만들어지게 됩니다.

저는 이 버튼을 사용하지 않기 때문에
formatButtonVisible 상태를 false로 하여 삭제해 주었고
titleCenterd상태를 true로 하여 상단의 날짜를 중앙으로 옮겨주었습니다.

headerStyle: HeaderStyle(
	formatButtonVisible: false,
    titleCentered: true,
),

결과화면

4. 다른 날짜 선택하기

DateTime? _selectedDate;

  @override
  void initState() {
    super.initState();
    _selectedDate = _focusedDay;
  }

선택한 날짜 변수를 생성합니다.

onDaySelected: (selectedDay, focusedDay){
    if(!isSameDay(_selectedDate, selectedDay)){
        setState(() {
             _selectedDate = selectedDay;
             _focusedDay = focusedDay;
        });
    }
},
selectedDayPredicate: (day){
    return isSameDay(_selectedDate, day);
},

현재 날짜(_focusedDay) 이외의 날짜를 선택하면 같은 색상으로 표시됩니다.

결과화면

전체코드

import 'package:flutter/material.dart';
import 'package:intl/date_symbol_data_local.dart';
import 'package:table_calendar/table_calendar.dart';

void main() async{
  await initializeDateFormatting();
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  MyApp({Key? key}) : super(key: key);
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  DateTime _focusedDay = DateTime.now();
  DateTime? _selectedDate;

  @override
  void initState() {
    super.initState();
    _selectedDate = _focusedDay;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
       appBar: AppBar(
         title: Text('tablecalendar'),
         centerTitle: true,
       ),
      body: Column(
        children: [
          TableCalendar(
            locale: 'ko_KR',
            focusedDay: _focusedDay,
            firstDay: DateTime.utc(2023,01,01),
            lastDay: DateTime.utc(2023,12,31),
            headerStyle: HeaderStyle(
              formatButtonVisible: false,
              titleCentered: true,
            ),
            onDaySelected: (selectedDay, focusedDay){
              if(!isSameDay(_selectedDate, selectedDay)){
                setState(() {
                  _selectedDate = selectedDay;
                  _focusedDay = focusedDay;
                });
              }
            },
            selectedDayPredicate: (day){
              return isSameDay(_selectedDate, day);
            },
            onPageChanged: (focusedDay){
              _focusedDay = focusedDay;
            },
          )
        ],
      ),
    );
  }
}