We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
In the Flutter Event Calendar, you can highlight the selected view header date and day by hiding the default headers and adding the custom widgets. STEP 1: In initState(), set the default values for calendar. String? _headerText = 'Header'; double? _width = 0.0, _cellWidth = 0.0; List<String>? _dates = <String>['1', '2', '3', '4', '5', '6', '7'], _days = <String>['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']; bool? _selected = false; int? _selectedIndex; STEP 2: Using onViewChanged callback, get the visible dates and update dates to the corresponding header and view header texts. child: SfCalendar(
headerHeight: 0,
viewHeaderHeight: 0,
view: CalendarView.week,
onViewChanged: (ViewChangedDetails viewChangedDetails) {
SchedulerBinding.instance!.addPostFrameCallback((duration) {
for (int i = 0;
i < viewChangedDetails.visibleDates.length;
i++) {
setState(() {
_dates![i] = DateFormat('dd')
.format(viewChangedDetails.visibleDates[i])
.toString();
_headerText = DateFormat('MMMM yyyy')
.format(viewChangedDetails.visibleDates[
viewChangedDetails.visibleDates.length ~/ 2])
.toString();
});
}
});
},
),
STEP 3: Using the ListView.builder widget load the view header text with GestureDetector. Then based on the selected index highlight the view header day and date text. Container(
color: Color(0xFF381460),
width: _width,
height: _cellWidth,
child: Center(
child: Text(_headerText!,
textAlign: TextAlign.center,
style: TextStyle(fontSize: 25, color: Colors.white)),
),
),
Padding(
padding: EdgeInsets.only(
left: _cellWidth!,
),
child: SizedBox(
height: _cellWidth,
child: ListView.builder(
shrinkWrap: true,
itemCount: _days!.length,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
child: Container(
child: Column(
children: [
Container(
height: _cellWidth,
child: Center(
child: Text(
_days![index],
style: TextStyle(
color: _selected! && _selectedIndex == index
? Colors.orange
: Colors.black,
),
textAlign: TextAlign.center,
),
),
width: _cellWidth,
),
],
),
),
);
}),
),
),
Padding(
padding: EdgeInsets.only(left: _cellWidth!),
child: SizedBox(
height: _cellWidth! / 2,
child: ListView.builder(
shrinkWrap: true,
itemCount: _dates!.length,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
setState(() {
_selected = true;
_selectedIndex = index;
});
},
child: Container(
child: Column(
children: [
Container(
child: Text(
_dates![index],
style: TextStyle(color: Colors.black),
textAlign: TextAlign.center,
),
width: _cellWidth,
decoration: _selected! && _selectedIndex == index
? BoxDecoration(
color: Colors.orange,
shape: BoxShape.circle,
border: Border.all(
color: Colors.orange, width: 3))
: null,
),
],
),
),
);
}),
),
),
|
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
