cell_calendar

Description:

cell calendar

cell_calendar #


Modern calendar widget with useful features. Enables to develop well designed calendar in a moment.
Inspired by the UI of Google Calendar

Usage #

Events

You can show the events in the calendar by inserting the list of CalendarEvent as events
CellCalendar(
events: [
CalendarEvent(eventName: "Event 1",eventDate: DateTime1),
CalendarEvent(eventName: "Event 2",eventDate: DateTime2),
]
);
copied to clipboard
If you need to customize the calendar more, the additional parameters like eventBackGroundColor, eventTextColor and eventID are helpful.

onPageChanged

The callback onPageChanged is literally called when the current page is changed.
CellCalendar(
onPageChanged: (firstDate, lastDate) {
print("This is the first date of the new page: $firstDate");
print("This is the last date of the new page: $lastDate");
}
);
copied to clipboard
In this sample code, firstDate is the date in the very first cell of the new page, and its logic is same as lastDate.

onCellTapped

The callback onCellTapped is called when user tapped a cell.
CellCalendar(
onCellTapped: (date) {
print("$date is tapped !");
}
);
copied to clipboard
It is called with tapped DateTime, so you can get the events on the date if you want.
CellCalendar(
onCellTapped: (date){
print("$date is tapped !");
final eventsOnTheDate = sampleEvents().where((event) {
final eventDate = event.eventDate;
return eventDate.year == date.year &&
eventDate.month == date.month &&
eventDate.day == date.day;
}).toList();
/// ex) Show dialog or navigate to new page with [eventsOnTheDate]
}
);

copied to clipboard

daysOfTheWeekBuilder and monthYearLabelBuilder

If you don't want to use default labels on the calendar, you can use callbacks for customization.
CellCalendar(
daysOfTheWeekBuilder: (dayIndex) {
/// dayIndex: 0 for Sunday, 6 for Saturday.
final labels = ["S", "M", "T", "W", "T", "F", "S"];
return Padding(
padding: const EdgeInsets.only(bottom: 4.0),
child: Text(
labels[dayIndex],
style: TextStyle(
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
);
},
monthYearLabelBuilder: (datetime) {
final year = datetime.year.toString();
final month = datetime.month.toString();
return Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"$month, $year",
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
);
},
)
copied to clipboard
If you have any requests or questions, please feel free to ask on github.
Contributors ✨ #
Thanks goes to these wonderful people (emoji key):






Santa Takahashi💻
Denis Filonov💻
HPanda💻






This project follows the all-contributors specification. Contributions of any kind welcome!