View

https://pub.dev/packages/table_calendar

import 'package:table_calendar/table_calendar.dart';

...

CalendarController _calendarController = CalendarController();
Map<DateTime, List<EventsModel>> _events;
DateTime _selectedDay;

...

  Widget _buildCalendarCustom() {
    return TableCalendar(
      locale: 'ko-KR',
      calendarController: _calendarController,
      events: _events,
      availableGestures: AvailableGestures.all,
      onDaySelected: _onDaySelected,
      builders: calendarBuilder(),
      headerVisible: false,
    );
  }

  void _onDaySelected(DateTime day, List e) {
    setState(() {
      _selectedDay = day;
      e.length == 0 ? _selectedEvents = [] : _selectedEvents = e;
    });
  }

Calendar Builders


Here, I have specified the values for the each builders to visualize their sections on the calenderπŸ€—

각 builder의 κ°’λ“€ λˆˆμ— λ„κ²Œλ” μ μš©ν•΄λ³΄μ•˜μŠ΅λ‹ˆλ‹€πŸ€— ~~(λ””μžμΈ ν…ŒλŸ¬λ²”)~~

calendarBuilder -> call

CalendarBuilders calendarBuilder() {
    return CalendarBuilders(
      selectedDayBuilder: (context, date, _) {
        return DaisyWidget().buildCalendarDay(
            day: date.day.toString(), backColor: DaisyColors.main4Color);
      },
      todayDayBuilder: (context, date, _) {
        return DaisyWidget().buildCalendarDay(
            day: date.day.toString(), backColor: DaisyColors.backgroundColor);
      },
      dayBuilder: (context, date, _) {
        return DaisyWidget().buildCalendarDay(
            day: date.day.toString(), backColor: Colors.white);
      },
      weekendDayBuilder: (context, date, _) {
        return DaisyWidget().buildCalendarDay(
            day: date.day.toString(),
            backColor: Colors.white,
            color: Colors.red);
      },
      outsideDayBuilder: (context, date, _) {
        return DaisyWidget().buildCalendarDay(
            day: date.day.toString(),
            backColor: Colors.blue,
            color: Colors.red);
      },
      outsideHolidayDayBuilder: (context, date, _) {
        return DaisyWidget().buildCalendarDay(
            day: date.day.toString(),
            backColor: Colors.deepOrange,
            color: Colors.red);
      },
      holidayDayBuilder: (context, date, _) {
        return DaisyWidget().buildCalendarDay(
            day: date.day.toString(),
            backColor: Colors.purple,
            color: Colors.red);
      },
      outsideWeekendDayBuilder: (context, date, _) {
        return DaisyWidget().buildCalendarDay(
            day: date.day.toString(),
            backColor: Colors.pinkAccent,
            color: Colors.black);
      },
      dowWeekdayBuilder: (context, date) {
        return DaisyWidget().buildCalendarDay(
            day: date.toString(), backColor: Colors.yellow, color: Colors.red);
      },
      dowWeekendBuilder: (context, date) {
        return DaisyWidget().buildCalendarDay(
            day: date.toString(), backColor: Colors.green, color: Colors.red);
      },
      unavailableDayBuilder: (context, date, _) {
        return DaisyWidget().buildCalendarDay(
            day: date.day.toString(),
            backColor: Colors.red,
            color: DaisyColors.serveColor);
      },
      markersBuilder: (context, date, events, holidays) {
        final children = <Widget>[];
        if (events.isNotEmpty) {
          children.add(
            Positioned(
              bottom: 1,
              child: _buildEventsMarkerNum(date),
            ),
          );
        }
        return children;
      },
    );
  }

MarkerBuilder -> call

Widget _buildEventsMarkerNum(List events) {
      return DaisyWidget().buildCalendarDayMarker(
          text: '${events.length}',
          backColor: privateLength == 0
              ? DaisyColors.main0Color
              : DaisyColors.serveColor);
    }


buildCalendarDay() , Marker()

Container buildCalendarDay({
     String day,
     Color backColor,
    Color color,
  }) {
    return Container(
      color: backColor,
      width: 53,
      height: 53,
      child: Center(
        child: Text(day,
            style: TextStyle(fontSize: 12, color: color ?? Colors.black)),
      ),
    );
  }

  AnimatedContainer buildCalendarDayMarker({
     String text,
     Color backColor,
  }) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 300),
      decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        color: backColor,
      ),
      width: 52,
      height: 13,
      child: Center(
        child: Text(
          text,
          style: TextStyle().copyWith(
            color: Colors.white,
            fontSize: 10.0,
          ),
        ),
      ),
    );
  }


Result

result calendar builder code

CalendarBuilders calendarBuilder() {
    return CalendarBuilders(
      selectedDayBuilder: (context, date, _) {
        return DaisyWidget().buildCalendarDay(
            day: date.day.toString(), backColor: DaisyColors.main4Color);
      },
      todayDayBuilder: (context, date, _) {
        return DaisyWidget().buildCalendarDay(
            day: date.day.toString(), backColor: DaisyColors.backgroundColor);
      },
      dayBuilder: (context, date, _) {
        return DaisyWidget().buildCalendarDay(
            day: date.day.toString(), backColor: Colors.white);
      },
      weekendDayBuilder: (context, date, _) {
        return DaisyWidget().buildCalendarDay(
            day: date.day.toString(),
            backColor: Colors.white,
            color: Colors.red);
      },
      outsideDayBuilder: (context, date, _) {
        return DaisyWidget().buildCalendarDay(
            day: date.day.toString(),
            backColor: Colors.white,
            color: Colors.black26);
      },
      outsideWeekendDayBuilder: (context, date, _) {
        return DaisyWidget().buildCalendarDay(
            day: date.day.toString(),
            backColor: Colors.white,
            color: Colors.red[100]);
      },
      dowWeekdayBuilder: (context, date) {
        return DaisyWidget().buildCalendarDay(
            day: date.toString(),
            backColor: Colors.white,
            color: Colors.black87);
      },
      dowWeekendBuilder: (context, date) {
        return DaisyWidget().buildCalendarDay(
            day: date.toString(),
            backColor: Colors.white,
            color: Colors.red[400]);
      },
      markersBuilder: (context, date, events, holidays) {
        final children = <Widget>[];
        if (events.isNotEmpty) {
          children.add(
            Positioned(
              bottom: 1,
              child: _buildEventsMarkerNum(date, events),
            ),
          );
        }
        return children;
      },
    );
  }
profile
𝙸 πšŠπš– 𝚊 πšŒπšžπš›πš’πš˜πšžπšœ πšπšŽπšŸπšŽπš•πš˜πš™πšŽπš› πš πš‘πš˜ πšŽπš—πš“πš˜πš’πšœ πšπšŽπšπš’πš—πš’πš—πš 𝚊 πš™πš›πš˜πš‹πš•πšŽπš–. πŸ‡°πŸ‡·πŸ‘©πŸ»β€πŸ’»

4개의 λŒ“κΈ€

comment-user-thumbnail
2020λ…„ 9μ›” 6일

κ°μ‚¬ν•©λ‹ˆλ‹€. 큰 λ„μ›€λ˜μ—ˆμŠ΅λ‹ˆλ‹€!

λ‹΅κΈ€ 달기
comment-user-thumbnail
2020λ…„ 10μ›” 19일

κ°μ‚¬ν•©λ‹ˆλ‹€. 덕뢄에 달λ ₯ μ»€μŠ€ν…€μ— μ„±κ³΅ν–ˆμ–΄μš” !

λ‹΅κΈ€ 달기
comment-user-thumbnail
2021λ…„ 2μ›” 10일

ν˜Ήμ‹œ onDaySelected 에 events.. 이거 κ°’ λ“€μ–΄μ˜€μ‹œλ‚˜μš”?? γ… γ… 

1개의 λ‹΅κΈ€