WeeklyCalendar
A very simple weekly calendar widget for Flutter.
Features
- Simple calendar widget
- Locale support
- Customizable color scheme
Usage
Make sure to check out examples for more details.
Installation
To use this widget, add the following line to pubspec.yaml
:
dependencies: weekly_calendar: ^0.1.2
YAML
Basic setup
import 'package:weekly_calendar/weekly_calendar.dart'; class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(), body: Center( child: WeeklyCalendar(), ), ), ); } }
Dart
Calendar Style
By using the CalendarStyle
, you can customize WeeklyCalendar
with your preferred color patterns.
class CalendarStyle { /// The locale of the calendar. /// final String locale; /// The padding of the calendar. /// final EdgeInsets padding; /// The margin of the calendar. /// final EdgeInsets margin; /// The decoration of the calendar. /// final BoxDecoration decoration; /// The alignment of the header date text. /// final Alignment headerDateTextAlign; /// The color of the header date text. /// final Color headerDateTextColor; /// Whether to show the header date text. /// final bool isShowHeaderDateText; /// The alignment of the footer date text. /// final Alignment footerDateTextAlign; /// The color of the footer date text. /// final Color footerDateTextColor; /// Whether to show the footer date text. /// final bool isShowFooterDateText; /// The color of the selected circle in DayCell. /// final Color selectedCircleColor; /// The color of the selected circle at today in DayCell. /// final Color todaySelectedCircleColor; /// The color of the day text in DayCell. /// final Color dayTextColor; /// The color of the day text at today in DayCell. /// final Color todayDayTextColor; /// The color of the selected day text in DayCell. /// final Color selectedDayTextColor; /// The color of the weekend day text in DayCell. /// final Color weekendDayTextColor; /// The color of the text in DayOfWeekCell. /// final Color dayOfWeekTextColor; /// The color of the weekend text in DayOfWeekCell. /// final Color weekendDayOfWeekTextColor; }
Dart
When using CalendarStyle
, set it as follows:
WeeklyCalendar( style: CalendarStyle( locale: "en", padding: EdgeInsets.all(10), decoration: BoxDecoration( color: Colors.black, borderRadius: BorderRadius.all(Radius.circular(14)), ), headerDateTextAlign: Alignment.centerLeft, headerDateTextColor: Colors.white, footerDateTextColor: Colors.grey, isShowFooterDateText: true, ), )
Dart
Events
You can retreive the selected date through the callback function onChangedSelectedDate
, when you select a specific date on WeeklyCalendar.
onChangedSelectedDate: (DateTime date) { debugPrint("onChangedSelectedDate: $date"); }
Dart
You can control whether to automatically select the date when changing the displayed week page by swiping, using the isAutoSelect
parameter.
isAutoSelect: bool,
Dart
You retreive the day for Wednesday and the page state PageState
(previous or next) when chainging the week page by swiping.
onChangedPage: (DateTime date, PageState state) { debugPrint("onChangedPage: $date ${state.name}"); }
Dart
GitHub
https://github.com/mlballack/WeeklyCalendarForFlutter