[Flutter] table_calendar ; 달력 사용하기

플러그인 조사(22.04.12 기준)

플러그인	likes	pub point	popularity
table_calendar: ^3.0.5	1478	130	99
syncfusion_flutter_calendar: ^20.1.47	739	130	98
calendar_view 0.0.4	143	130	90
cell_calendar: ^0.5.0+1	53	110	86

여기 달력 플러그인을 비교한 글이 있는데, table calendar가 좋은 평가를 받았다. 

 

syncfusion_flutter_calendar가 UI가 괜찮았으나, 라이센스 문제가 있는 것 같아서 사용하지 않기로했다.

 

그 다음으로 calendar_view, cell_calendar 플러그인을 테스트했다.

 

cell_calendar 페이지 이동하는 이벤트를 수신하는 방법을 찾지 못해서 사용하는데 제한이 있었다.

 

Table Calendar에서는 calendarBuilders 속성으로 원하는 모양으로 셀을 꾸밀 수 있다.

TableCalendar(
      calendarBuilders: CalendarBuilders(
        markerBuilder: (context, day, events) {
          if (events.isEmpty) return SizedBox();
          return ListView.builder(
            shrinkWrap: true,
            itemCount: events.length,
            itemBuilder: (context, index) {
              return Container(
                margin: EdgeInsets.symmetric(horizontal: 10, vertical: 0.5),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      events[index].toString(),
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 7,
                        fontFamily: 'NanumSquareOTF',
                      ),
                    ),
                  ],
                ),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    shape: BoxShape.rectangle,
                    color: _getColorByEvent(events[index].toString())),
              );
            },
          );
        },
        // selectedBuilder: (context, date, events) => Container(
        //   margin: const EdgeInsets.all(4.0),
        //   alignment: Alignment.center,
        //   decoration: BoxDecoration(color: Theme.of(context).primaryColor, borderRadius: BorderRadius.circular(10.0)),
        //   child: Text(
        //     date.day.toString(),
        //     style: TextStyle(color: Colors.white),
        //   ),
        // ),
      ),
      locale: 'ko-KR',
      headerStyle: HeaderStyle(
        titleTextFormatter: (date, locale) => DateFormat.yMMMM(locale).format(date),
        titleCentered: true,
        formatButtonVisible: false,
        titleTextStyle: TextStyle(
          color: Colors.black,
          fontSize: 20,
          fontFamily: 'NanumSquareOTF',
          fontWeight: FontWeight.w700,
        ),
      ),
      calendarStyle: CalendarStyle(
        outsideDaysVisible: true,
        // holidayTextStyle: const TextStyle(color: const Color(0xFF5C6BC0)),
        // weekendTextStyle: TextStyle(color: Colors.red),
      ),
      firstDay: kFirstDay,
      lastDay: kLastDay,
      focusedDay: _focusedDay,
      selectedDayPredicate: (day) => isSameDay(_selectedDay, day),
      rangeStartDay: _rangeStart,
      rangeEndDay: _rangeEnd,
      calendarFormat: _calendarFormat,
      rangeSelectionMode: _rangeSelectionMode,
      eventLoader: _getEventsForDay,
      startingDayOfWeek: StartingDayOfWeek.sunday,
      onDaySelected: _onDaySelected,
      onRangeSelected: _onRangeSelected,
      onPageChanged: (focusedDay) {
        _focusedDay = focusedDay;
      },
    );

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

References

https://fluttergems.dev/calendar/

Calendar packages by Flutter Gems - A Curated Package Guide for Flutter

 

 

table calendar https://github.com/alisonthemonster/flutter_calendar_comparison/blob/master/lib/second_challenge/table_calendar.dart

GitHub - alisonthemonster/flutter_calendar_comparison: A comparison of several calendar libraries for Flutter

https://pub.dev/packages/table_calendar

table_calendar | Flutter Package

 

https://unh6uoj.github.io/study/Flutter-table_calendar-%EA%B8%B0%EB%B3%B8-%EC%82%AC%EC%9A%A9%EB%B2%95/

Flutter table_calendar 기본 사용법

 

https://velog.io/@kindcode/flutter-tablecalendar-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95

flutter table_calendar 사용 방법

 

 

https://flutterrepos.com/lib/aleksanderwozniak-table_calendar-flutter-calendar

Highly customizable, feature-packed calendar widget for Flutter | FlutterRepos

 

https://stackoverflow.com/questions/62350769/how-to-build-multiple-marker-with-different-colours-by-using-flutter-table-calen

how to build multiple marker with different colours by using flutter table_calendar?

 

 

https://medium.flutterdevs.com/display-dynamic-events-at-calendar-in-flutter-22b69b29daf6

Display Dynamic Events At Calendar In Flutter

 

 

https://pub.dev/documentation/table_calendar/latest/index.html

table_calendar - Dart API docs

 

 

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

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

 

 

https://stackoverflow.com/questions/60276303/flutter-table-calendar-showing-event-from-api-to-table-calendar

Flutter Table Calendar : Showing Event from API to Table Calendar

 

 

https://stackoverflow.com/questions/67866071/how-to-show-event-on-table-calendar-using-my-api-on-flutter

How to show Event on Table Calendar using my API on flutter

 

 

 

 

 

 

 

---

https://pub.dev/packages/syncfusion_flutter_calendar

syncfusion_flutter_calendar | Flutter Package

 

 

https://pub.dev/packages/calendar_view

calendar_view | Flutter Package

https://pub.dev/packages/cell_calendar

cell_calendar | Flutter Package