Need to customize the header for a resource view timeline
Thanks - that does work, but it causes (or exposes) another problem. Now when I display this view in landscape orientation, and the contents don't fit, I get an overflow on the bottom of 30 pixels, which is the height of my new header container (see below). Also note that my SfCalendar isn't using all of the page area that it can when it portrait mode. It's only using about half the page (also see below. I am also including my flutter widget code. I've been trying to wrap the calendar and its enclosing containers in an Expanded widget, but this doesn't help. Please advise.
landscape mode with overflow:
portrait mode only showing 3 of 19 resources:
Flutter page/widget code:
_calendar = SfCalendar(
minDate: dtStart,
maxDate: dtEnd,
initialDisplayDate: DateTime.now(),
timeSlotViewSettings: const TimeSlotViewSettings(
timeInterval: Duration(minutes: 30),
timeFormat: "h:mm a",
),
headerHeight: 0,
viewHeaderHeight: 0,
view: CalendarView.timelineDay,
dataSource: _CourtSheetDataSource(facilitySchedule[0].items, resources),
resourceViewHeaderBuilder: resourceBuilder,
// resourceViewSettings: const ResourceViewSettings(
// displayNameTextStyle: TextStyle(color: Colors.white),
// showAvatar: false,
// size: 120,
// visibleResourceCount: 15),
onTap: onCalendarTap,
);
return FutureBuilder<bool>(
future: initialize(),
builder: (context, AsyncSnapshot<dynamic> snapshot) {
if (snapshot.hasData) {
return SafeArea(
child: PlatformScaffold(
appBar: PlatformAppBar(
leading: PlatformIconButton(
cupertinoIcon: const Icon(Icons.arrow_back_ios),
materialIcon: const Icon(Icons.arrow_back),
onPressed: () => Navigator.pop(context)),
title: const Text("Court Sheets")),
body: Column(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Container(
//color: const Color(0xFFFFFFFF),
height: 40,
child: Center(
child: Text(DateFormat("yMMMMEEEEd").format(widget.date),
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 16, /*color: Colors.blue*/
)),
),
),
),
],
),
Row(children: [Expanded(child: Container(child: _calendar))])
],
),
));
} else {
return const Center(
child: SizedBox(height: 100.0, width: 100.0, child: CircularProgressIndicator()));
}
});
}
Thanks very much. I see you used the Expanded Widget which didn't work for me for some reason. In any case, I solved the problem late last night by:
- Hiding the day/date header in the calendar
- putting my custom day/date inside the Scaffold's AppBar
- letting the SfCalendar occupy the entire Scaffold body.
Worked nicely (see below). Thanks for your assistance. You can close this issue.
