- Main API documents
The configuration of calendar UI is done in the constructor of calendarviewwidget.
CalendarViewWidget(
{Key key,
this.dayWidgetBuilder = defaultCustomDayWidget,
this.weekBarItemWidgetBuilder = defaultWeekBarWidget,
@required this.calendarController,
this.boxDecoration,
this.padding = EdgeInsets.zero,
this.margin = EdgeInsets.zero,
this.verticalSpacing = 10,
this.itemSize})
: super(key: key);
| Attribute | Meaning | Default value |
|---|---|---|
| weekBarItemWidgetBuilder | Create the weekbar at the top | Default style |
| dayWidgetBuilder | Create calendar item | Default style |
| verticalSpacing | Vertical spacing between calendar items | Default is 10 |
| boxDecoration | calendar background setting | Default is null |
| itemSize | Size of each item | The default screen width of mobile phone / 7, and the default screen height of web page / 7 |
| padding | Calendar padding | EdgeInsets.zero |
| margin | Calendar padding | EdgeInsets.zero |
Two action： One is to display the related data required by the calendar, which is configured in the controller. One is to use the controller to add event monitoring and use the controller to operate the calendar.
//构造函数
CalendarController(
{int selectMode = CalendarConstants.MODE_SINGLE_SELECT,
int showMode = CalendarConstants.MODE_SHOW_ONLY_MONTH,
int minYear = 1971,
int maxYear = 2055,
int minYearMonth = 1,
int maxYearMonth = 12,
int nowYear,
int nowMonth,
int minSelectYear = 1971,
int minSelectMonth = 1,
int minSelectDay = 1,
int maxSelectYear = 2055,
int maxSelectMonth = 12,
int maxSelectDay = 30,
Set<DateTime> selectedDateTimeList = EMPTY_SET,
DateModel selectDateModel,
int maxMultiSelectCount = 9999,
Map<DateModel, Object> extraDataMap = EMPTY_MAP,
int offset})
| Attribute | Meaning | Default value |
|---|---|---|
| selectMode | Selection mode, indicating single selection or multiple selection | default is single select static const int MODE_SINGLE_SELECT = 1; static const int MODE_MULTI_SELECT = 2; |
| showMode | Display mode | 默认是只展示月视图 static const int MODE_SHOW_ONLY_MONTH=1;//仅支持月视图 static const int MODE_SHOW_ONLY_WEEK=2;//仅支持星期视图 static const int MODE_SHOW_WEEK_AND_MONTH=3;//支持两种视图，先显示周视图 static const int MODE_SHOW_MONTH_AND_WEEK=4;//支持两种视图，先显示月视图 |
| minYear | Minimum year for calendar display | 1971 |
| maxYear | Maximum year displayed in calendar | 2055 |
| minYearMonth | The month of the smallest year displayed by the calendar | 1 |
| maxYearMonth | The month of the largest year displayed by the calendar | 12 |
| nowYear | Current year displayed by calendar | -1 |
| nowMonth | Current month displayed by calendar | -1 |
| minSelectYear | Minimum year that can be selected | 1971 |
| minSelectMonth | Month of the smallest year that can be selected | 1 |
| minSelectDay | The day of the smallest month you can choose | 1 |
| maxSelectYear | Maximum year that can be selected | 2055 |
| maxSelectMonth | Month of the largest year you can choose | 12 |
| maxSelectDay | The day of the largest month you can choose | 30，注意：不能超过对应月份的总天数 |
| selectedDateList | Selected date for multiple selections | 默认为空Set, Set selectedDateList = new Set() |
| selectDateModel | Current selection, for radio selection | 默认为空 |
| maxMultiSelectCount | Multiple choice, how many at most | hhh |
| extraDataMap | Customize additional data | 默认为空Map，Map<DateTime, Object> extraDataMap = new Map() |
| offset | The offset of first day | 0 |
| Method | Meaning | Default value |
|---|---|---|
| void addMonthChangeListener(OnMonthChange listener) | Month switching event | |
| void addOnCalendarSelectListener(OnCalendarSelect listener) | Click to select an event | |
| void addOnMultiSelectOutOfRangeListener(OnMultiSelectOutOfRange listener) | Multiple selection out of the specified range | |
| void addOnMultiSelectOutOfSizeListener(OnMultiSelectOutOfSize listener) | Multiple selection exceeds the limit | |
| void addExpandChangeListener(ValueChanged expandChange) | Monitor the expansion and contraction status of calendar |
| Method | Meaning | Default value |
|---|---|---|
| Future previousPage() | Sliding to the previous page will automatically slide to the previous month or week according to the current deployment status. If it is already on the first page and there is no previous page, it will return false, otherwise it will return true | |
| Future nextPage() | Sliding to the next page will automatically move to the next month or week according to the current deployment status. If it is already on the last page and there is no next page, it will return false, otherwise it will return true | |
| void moveToCalendar(int year, int month, int day, {bool needAnimation = false,Duration duration = const Duration(milliseconds: 500),Curve curve = Curves.ease}) | To specified date | |
| void moveToNextYear() | Switch to next year | |
| void moveToPreviousYear() | Switch to previous year | |
| void moveToNextMonth() | Switch to the next month | |
| void moveToPreviousMonth() | Switch to previous month | |
| void toggleExpandStatus() | Toggle deployment state | |
| void changeExtraData(Map<DateModel, Object> newMap) | Modify custom extra data and refresh calendar |
| Method | Meaning | Default Value |
|---|---|---|
| DateTime getCurrentMonth() | Get the current month | |
| Set getMultiSelectCalendar() | Get selected date,multiple choices | |
| DateModel getSingleSelectCalendar() | Get selected date,single choiice |
Including custom weekbar and custom calendar item. Defaultxxwidget is used by default.
As long as we inherit the corresponding base class and implement the corresponding methods, then we only need to implement the corresponding builder methods when configuring the controller.
//支持自定义绘制
DayWidgetBuilder dayWidgetBuilder; //create calendar item
WeekBarItemWidgetBuilder weekBarItemWidgetBuilder; //create weekbar
The first way is to inherit baseweekbar and override getweekbaritem (index) method. Whatever you do, just return a widget.
class DefaultWeekBar extends BaseWeekBar {
const DefaultWeekBar({Key key}) : super(key: key);
@override
Widget getWeekBarItem(int index) {
/**
* 自定义Widget
*/
return new Container(
height: 40,
alignment: Alignment.center,
child: new Text(
Constants.WEEK_LIST[index],
style: topWeekTextStyle,
),
);
}
}
In the second way, you can directly rewrite the build method for more custom drawing.
class CustomStyleWeekBarItem extends BaseWeekBar {
List<String> weekList = ["mo", "tu", "we", "th", "fr", "sa", "su"];
//可以直接重写build方法，weekbar底部添加下划线
@override
Widget build(BuildContext context) {
List<Widget> children = List();
var items = getWeekDayWidget();
children.add(Row(
children: items,
));
children.add(Divider(
color: Colors.grey,
));
return Column(
children: children,
);
}
@override
Widget getWeekBarItem(int index) {
return new Container(
margin: EdgeInsets.only(top: 10, bottom: 10),
child: new Center(
child: new Text(
weekList[index],
style:
TextStyle(fontWeight: FontWeight.w700, color: Color(0xffC5BCDC)),
),
),
);
}
}
There are two methods, one is to create by combining widgets, and the other is to draw items by using canvas. Finally, you only need to configure in the construction parameters of the calendarcontroller。
- Create by combining widgets: inherit basecombinedaywidget, rewrite getnormalwidget (datemodel datemodel) and getselectedwidget (datemodel datemodel), and return the corresponding widget.
class DefaultCombineDayWidget extends BaseCombineDayWidget {
DefaultCombineDayWidget(DateModel dateModel) : super(dateModel);
@override
Widget getNormalWidget(DateModel dateModel) {
//实现默认状态下的UI
}
@override
Widget getSelectedWidget(DateModel dateModel) {
//绘制被选中的UI
}
}
- Use canvas to define drawing, inherit basecustomdaywidget, rewrite drawnormal and drawselected, and draw item by yourself.
class DefaultCustomDayWidget extends BaseCustomDayWidget {
DefaultCustomDayWidget(DateModel dateModel) : super(dateModel);
@override
void drawNormal(DateModel dateModel, Canvas canvas, Size size) {
//实现默认状态下的UI
defaultDrawNormal(dateModel, canvas, size);
}
@override
void drawSelected(DateModel dateModel, Canvas canvas, Size size) {
//绘制被选中的UI
defaultDrawSelected(dateModel, canvas, size);
}
}
We can customize the progress bar data of each item, save it in the map, and finally assign it to the extradatamap of the controller
//Externally process the tag corresponding to each datemodel
Map<DateModel, int> progressMap = {
DateModel.fromDateTime(temp.add(Duration(days: 1))): 0,
DateModel.fromDateTime(temp.add(Duration(days: 2))): 20,
DateModel.fromDateTime(temp.add(Duration(days: 3))): 40,
DateModel.fromDateTime(temp.add(Duration(days: 4))): 60,
DateModel.fromDateTime(temp.add(Duration(days: 5))): 80,
DateModel.fromDateTime(temp.add(Duration(days: 6))): 100,
};
//When creating the calendarcontroller object, assign the extradatamap
new CalendarController(
extraDataMap: progressMap)
//When drawing daywidget, you can get the desired data directly from the extradata object of datemodel
int progress = dateModel.extraData;
//Externally process the tag corresponding to each datemodel
Map<DateModel, String> customExtraData = {
DateModel.fromDateTime(DateTime.now().add(Duration(days: -1))): "假",
DateModel.fromDateTime(DateTime.now().add(Duration(days: -2))): "游",
DateModel.fromDateTime(DateTime.now().add(Duration(days: -3))): "事",
DateModel.fromDateTime(DateTime.now().add(Duration(days: -4))): "班",
DateModel.fromDateTime(DateTime.now().add(Duration(days: -5))): "假",
DateModel.fromDateTime(DateTime.now().add(Duration(days: -6))): "游",
DateModel.fromDateTime(DateTime.now().add(Duration(days: 2))): "游",
DateModel.fromDateTime(DateTime.now().add(Duration(days: 3))): "事",
DateModel.fromDateTime(DateTime.now().add(Duration(days: 4))): "班",
DateModel.fromDateTime(DateTime.now().add(Duration(days: 5))): "假",
DateModel.fromDateTime(DateTime.now().add(Duration(days: 6))): "游",
DateModel.fromDateTime(DateTime.now().add(Duration(days: 7))): "事",
DateModel.fromDateTime(DateTime.now().add(Duration(days: 8))): "班",
};
//When creating the calendarcontroller object, assign the extradatamap
new CalendarController(
extraDataMap: customExtraData)
//When drawing daywidget, you can get the desired data directly from the extradata object of datemodel
String data = dateModel.extraData;
When the customized data changes, you can use the controller's change extradata (map < datemodel, Object > NewMap) method,The calendar will refresh automatically and draw based on the new additional data
//可以动态修改extraDataMap
void changeExtraData(Map<DateModel, Object> newMap) {
this.calendarConfiguration.extraDataMap = newMap;
this.calendarProvider.generation.value++;
}
The entity class datemodel of the date used by the calendar has the following properties. You can draw the corresponding UI after judging according to the corresponding properties when you customize the daywidget.
| Attribute | Meaning | Type | Default Value |
|---|---|---|---|
| year | 年份 | int | |
| month | 月份 | int | |
| day | 日期 | int | 默认为1 |
| lunarYear | 农历年份 | int | |
| lunarMonth | 农历月份 | int | |
| lunarDay | 农历日期 | int | |
| lunarString | 农历字符串 | String | |
| solarTerm | 24 solar terms | String | |
| gregorianFestival | gregorianFestival | String | |
| traditionFestival | 传统农历节日 | String | |
| isCurrentDay | 是否是今天 | bool | false |
| isLeapYear | 是否是闰年 | bool | false |
| isWeekend | 是否是周末 | bool | false |
| isInRange | Whether it is in the range, for example, it can set the gray function outside a range | bool | false |
| isSelected | Is it selected to implement some marking or selection functions | bool | false |
| extraData | Custom extra data | Object | 默认为空 |
| isCurrentMonth | 是否是当前月份 | bool |
| Method | Meaning |
|---|---|
| DateTime getDateTime() | Convert datemodel to datetime |
| DateModel fromDateTime(DateTime dateTime) | Create corresponding model according to datetime, and initialize information such as lunar calendar and traditional festivals |
| bool operator ==(Object other) | Override the = = method to determine whether two datemodels are the same day |