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;
});
}
Here, I have specified the values for the each builders to visualize their sections on the calenderπ€
κ° builderμ κ°λ€ λμ λκ²λ μ μ©ν΄λ³΄μμ΅λλ€π€ ~~(λμμΈ ν λ¬λ²)~~
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;
},
);
}
Widget _buildEventsMarkerNum(List events) {
return DaisyWidget().buildCalendarDayMarker(
text: '${events.length}',
backColor: privateLength == 0
? DaisyColors.main0Color
: DaisyColors.serveColor);
}
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,
),
),
),
);
}
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;
},
);
}
κ°μ¬ν©λλ€. ν° λμλμμ΅λλ€!