[Flutter] table_calendar를 사용하여 캘린더(달력) 만들기_2

Flutter에서 table_calendar를 사용하여 캘린더(달력) 만들기_이벤트, 언어

2023.06.08 - [개발 프레임워크/Flutter] - [Flutter] table_calendar를 사용하여 캘린더(달력) 만들기_1

[Flutter] table_calendar를 사용하여 캘린더(달력) 만들기_1

위 캘린더에 사용자 정의 이벤트를 추가하기 위해 이벤트를 사용한다.

 

이벤트

TableCalendar 위젯에 사용자 정의 이벤트를 제공할 수 있다.

이렇게 하려면 eventLoader 속성을 사용한다.

이벤트 목록을 할당해야 하는 DateTime 개체가 제공된다.

eventLoader: (day) {
  return _getEventsForDay(day);
},

 

 

_getEventsForDay()는 모든 구현이 될 수 있다.

예를 들어 Map<DateTime, Liset<T>>는 아래처럼 사용이 가능하다.

List<Event> _getEventsForDay(DateTime day) {
  return events[day] ?? [];
}

DateTime 개체는 날짜 및 시간 부분으로 구성된다.

대부분의 경우 이 시간 부분은 일정과 관련된 측면에서 중복된다.

 

 

맵을 사용하기로 결정한 경우 LinkedHashMap으로 만드는 것이 좋다.

아래 코드처럼 하면 두 DateTime 개체에 대한 동일성 비교를 재정의하고 날짜 부분만 비교할 수 있다.

final events = LinkedHashMap(
  equals: isSameDay,
  hashCode: getHashCode,
)..addAll(eventSource);

 

순환적 이벤트

eventLoader를 사용하면 패턴으로 반복되는 이벤트를 쉽게 추가할 수 있다.

예를 들어 매주 월요일에 이벤트를 추가한다.

eventLoader: (day) {
  if (day.weekday == DateTime.monday) {
    return [Event('Cyclic event')];
  }

  return [];
},

 

탭에서 선택한 이벤트

종종 하루를 눌러 선택한 이벤트의 하위 목록이 필요하다.

onDaySeleceted 콜백 내의 eventLoader를 적용한 것과 동일한 방법을 사용하여 이를 달성할 수 있다.

void _onDaySelected(DateTime selectedDay, DateTime focusedDay) {
  if (!isSameDay(_selectedDay, selectedDay)) {
    setState(() {
      _focusedDay = focusedDay;
      _selectedDay = selectedDay;
      _selectedEvents = _getEventsForDay(selectedDay);
    });
  }
}

 

CalendarBuilders를 사용한 커스텀 UI

사용자 고유의 위젯으로 UI를 사용자 정의하려면 Calendar Builder를 사용한다.

각 빌더를 사용하여 UI를 선택적으로 재정의할 수 잇으므로 번거로움을 최소화하면서 매우 구체적인 설게를 구현할 수 있다.

 

어떤 builder에서도 null을 반환하여 기본 스타일을 사용할 수 있다.

예를 들어 아래 코드는 일요일의 레이블만 재정의하고 다른 행 레이블은 변경되지 않는다.

dowBuilder: (context, day) {
    if (day.weekday == DateTime.sunday) {
      final text = DateFormat.E().format(day);

      return Center(
        child: Text(
          text,
          style: TextStyle(color: Colors.red),
        ),
      );
    }
  },

 

 

Locale

Calendar를 원하는 언어로 표시하려면 Locale 속성을 사용한다.

지정하지 않으면 기본 Locale이 사용된다.

 

초기화

Locale을 사용하려면 먼저 날짜 형식을 초기화해야 한다.

간단한 방법은 다음과 같다.

 - 우선 pubspec.yaml 파일에 intl패키지를 추가해야 한다.

 - 그 다음 아래 코드와 같이 main()을 수정한다.

import 'package:intl/date_symbol_data_local.dart';

void main() {
  initializeDateFormatting().then((_) => runApp(MyApp()));
}

이 두 단계 이후에 앱은 다른 언어로 TableCalendar를 사용할 준비가 되어야 한다.

 

언어지정

언어를 지정하려면 locale 속성에 String 코드로 전달하기만 하면 된다.

예를 들어 아래 코드와 같이 사용한다면 한국어를 사용하게 된다.

TableCalendar(
  locale: 'ko_KR',
),

 

FormatButton 텍스트의 언어를 변경하려면 사용자가 직접 변경해야 한다.

사용 가능한 CalendarFormats 속성을 사용하고 변환된 문자열을 전달한다.

원하는 i18n 방법을 사용한다.

 - i18n이란?

2023.03.24 - [언어/Javascript,TypeScript] - [js] Dayjs 라이브러리 (설치방법, i18n, 객체생성, get(), set(), DateFormat 설정 등)

[js] Dayjs 라이브러리 (설치방법, i18n, 객체생성, get(), set(), DateFormat 설정 등)

formatButtonVisible 속성을 false로 설정하여 버튼을 숨길 수도 있다.

 

 

아래는 전체 예제코드이다.

https://github.com/aleksanderwozniak/table_calendar/blob/master/example/lib/pages/basics_example.dart

GitHub - aleksanderwozniak/table_calendar: Highly customizable, feature-packed calendar widget for Flutter