오늘 날짜 강조 및 마커 표시 기능 구현하기

Flutter로 캘린더 앱을 만들 때, 사용자는 가장 먼저 “오늘”을 확인한다.
또한 날짜별로 이벤트가 있는지를 쉽게 파악할 수 있어야 한다.

이번 글에서는 table_calendar 패키지를 활용해 오늘 날짜 강조와 이벤트 마커 표시 기능을 구현해보자.

---

🌞 오늘 날짜 강조하기

calendarStyle 옵션을 활용하면 오늘 날짜에만 스타일을 적용할 수 있다.

calendarStyle: CalendarStyle(
  todayDecoration: BoxDecoration(
    color: Colors.orange.shade300,
    shape: BoxShape.circle,
  ),
  todayTextStyle: TextStyle(
    fontWeight: FontWeight.bold,
    color: Colors.white,
  ),
),

todayDecoration: 오늘 날짜 배경 꾸미기
todayTextStyle: 텍스트 스타일 지정

컬러나 모양을 바꿔서 오늘을 중심으로 캘린더를 구성할 수 있다.

---

🔴 날짜별 이벤트 마커 표시

이벤트 마커는 eventLoader를 통해 자동으로 표시할 수 있다.

Map<DateTime, List<String>> events = {
  DateTime(2024, 10, 8): ['팀 미팅'],
  DateTime(2024, 10, 9): ['디자인 회의', '블로그 작성'],
};

TableCalendar(
  eventLoader: (day) {
    return events[day] ?? [];
  },
)

eventLoader가 리스트를 반환하면 자동으로 마커(●)가 날짜 아래에 표시된다.

---

✨ 마커를 커스터마이징하기

기본 마커는 ● 하나지만, calendarBuilders로 더 감각적인 마커로 바꿀 수 있다.

calendarBuilders: CalendarBuilders(
  markerBuilder: (context, date, events) {
    if (events.isEmpty) return SizedBox();

    return Positioned(
      bottom: 4,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: events.map((e) {
          return Container(
            margin: EdgeInsets.symmetric(horizontal: 1),
            width: 6,
            height: 6,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.red,
            ),
          );
        }).toList(),
      ),
    );
  },
),

여러 개의 이벤트가 있을 경우 여러 개의 작은 동그라미로 표시할 수 있다.

---

📌 팁: 오늘이 선택되었을 때 스타일 충돌 방지

selectedDecoration: BoxDecoration(
  color: Colors.blue,
  shape: BoxShape.circle,
),

오늘 날짜를 선택했을 경우 selectedDecoration이 우선 적용된다.
둘을 동시에 구분하려면 내부에서 isSameDay 조건으로 스타일을 나누거나
색을 다르게 주는 방식이 필요하다.

---

🧘 마무리하며

오늘을 강조하고, 이벤트가 있는 날짜를 표시하는 것만으로도 캘린더의 정보 전달력은 훨씬 좋아진다.

오늘이 어떤 날인지, 단번에 알아차릴 수 있는 캘린더 그게 바로 사용자 중심 UI다.

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 캘린더 앱 만들기 여정입니다.