Add a month indicator at the top of the calendar

[marcelpl]

As a user scrolls across the timetable, the weekday indicator is slightly unintuitive. It would be great if we could add a layer before the day of the week indicators that says "August", "September" etc.

[pdivita]

Actually you can change the header this way:

Import time machine patterns: import 'package:time_machine/time_machine_text_patterns.dart';

Add this parameter on your Timetable: dateHeaderBuilder: (_, localDate) => _dateHeader(localDate),

Finally write the widget code and style as you prefere:

  Widget _dateHeader(LocalDate date) {
    final dayPattern = LocalDatePattern.createWithCurrentCulture('%d');
    final dowPattern = LocalDatePattern.createWithCurrentCulture('ddd');
    final monthPattern = LocalDatePattern.createWithCurrentCulture('MMM');

    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Text(dowPattern.format(date)),
          SizedBox(height: 4),
          Text(dayPattern.format(date)),
          SizedBox(height: 4),
          Text(monthPattern.format(date)),
        ],
      ),
    );
  }

[IoanaAlexandru]

I'd like to set the title of the scaffold as the month. I tried using something like AppBar(title: Text(timetableController.currentlyVisibleDates.start.monthOfYear.toString()), but it doesn't change upon scrolling through the calendar.

@JonasWanke would it be a good idea to expose a method like onChanged from the Timetable API, which would allow us to call setState outside of the timetable? Or is there a better way?

[JonasWanke]

You should be able to use TimetableController.dateListenable (giving you the first currently visible day) or TimetableController.currentlyVisibleDatesListenable (giving you all currently visible dates) in an AnimatedBuilder like the following (not tested):

class _MyState extends State<MyWidget> {
  final controller = TimetableController(…);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: AnimatedBuilder(
          animation: _controller.dateListenable,
          builder: (context, child) => Text(_controller.dateListenable.value.monthOfYear.toString()),
        ),
      ),
      body: Timetable<BasicEvent>(
        controller: _controller,
        // …
      ),
    );
  }
}

You could of course use those listenables to call setState as well, though for this use case, AnimatedBuilder seems to be easier to use.

[IoanaAlexandru]

@JonasWanke that worked perfectly (except the parameter is animation not listener). Thank you!