WeekView calendar widget

As requested by , here is a simple week view widget to display events throughout a week. Definition is as follows: [image.png] and it needs this dependency: [image.png] The code is as follows:

 
import 'package:calendar_view/calendar_view.dart';

class WeekViewWidget extends StatefulWidget {
  const WeekViewWidget({
    Key key,
    this.width,
    this.height,
    this.events,
    this.heightPerMinute,
  }) : super(key: key);

  final double width;
  final double height;
  final dynamic events;
  final double heightPerMinute;

  @override
  _WeekViewWidgetState createState() => _WeekViewWidgetState();
}

class _WeekViewWidgetState extends State {
  EventController ec;

  @override
  void initState() {
    super.initState();
    ec = EventController();

    
    List events = widget.events["events"];
    if (events != null) {
      for (var i = 0; i < events.length; i++) {
        dynamic e = events[i];
        final event = CalendarEventData(
          date: DateTime(e["year"], e["month"], e["day"]),
          startTime: DateTime(e["year"], e["month"], e["day"], e["start_hour"],
              e["start_minute"]),
          endTime: DateTime(
              e["year"], e["month"], e["day"], e["end_hour"], e["end_minute"]),
          title: e["title"],
        );
        ec.add(event);
      }
    }

  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: widget.width,
      height: widget.height,
      child: WeekView(
        controller: ec,
        width: widget.width,
        heightPerMinute: widget.heightPerMinute,
      ),
    );
  }
} 

When you compile and preview, you can get the calendar to show events like so: [image.png] For ease of copy/paste, the JSON is here as code:

 
{"events":[{"year":2021,"month":12,"day":14,"start_hour":10,"start_minute":30,"end_hour":12,"end_minute":0,"title":"Hello There"}]}Using it in your project requires an API call that returns an array of events as shown above. For simple testing, I created a custom function that can also create a valid event. The custom function is defined as follows:
[image.png]
with the following code:

Copy
dynamic dummyEvent() {
  Map result = {};
  List eventList = [];
  dynamic event = {};
  event["year"] = 2021;
  event["month"] = 12;
  event["day"] = 15;
  event["start_hour"] = 6;
  event["start_minute"] = 30;
  event["end_hour"] = 8;
  event["end_minute"] = 30;
  event["title"] = "Hello World";
  eventList.add(event);
  result["events"] = eventList;
  return result;
}
 
You can also use this structure for generating valid JSON if you need to convert your events from some other data format.

Happy Fluttering!!