Flutter Calendar events being displayed in the same day

Question

I'm trying to make calendar appointments in flutter using the SfCalendar Widget! I've first of all created the calendar and its events editing page, which takes in different inputs such as startTime and endTime etc.. Once I try to display the events on the calendar they all get displayed at the same date (I have used Provider for state management). Can anyone help me out with this? thanks in advance!

Here is my code:

calendar_garde_screen.dart:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

import '../../database/event_provider.dart';
import '../../model/event.dart';
import 'edit_garde_calendar.dart';

class CalendarGardeScreen extends StatefulWidget {
  const CalendarGardeScreen({Key? key}) : super(key: key);

  @override
  State<CalendarGardeScreen> createState() => _CalendarGardeScreenState();
}

class _CalendarGardeScreenState extends State<CalendarGardeScreen> {
  @override
  Widget build(BuildContext context) {
    final events = Provider.of<EventProvider>(context).events;
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: (() => Navigator.of(context).push(MaterialPageRoute(
            builder: (context) => const EditGardeCalendarScreen()))),
        child: const Icon(Icons.add),
      ),
      appBar: AppBar(
        title: const Text(
          'Calendrier de garde',
          style: TextStyle(color: Colors.black),
        ),
        centerTitle: true,
      ),
      body: SfCalendar(
          dataSource: EventDataSource(events),
          view: CalendarView.month,
          initialDisplayDate: DateTime.now()),
    );
  }
}

class EventDataSource extends CalendarDataSource {
  EventDataSource(List<Event> appointments) {
    this.appointments = appointments;
  }

  Event getEvent(int index) => appointments![index] as Event;

  @override
  DateTime GetStartTime(int index) => getEvent(index).from;

  @override
  DateTime GetEndTime(int index) => getEvent(index).to;

  @override
  String GetSubject(int index) => getEvent(index).title;

  @override
  bool isAllDay(int index) => getEvent(index).isAllDay;
}

the saveForm() method at the editing page:

Future saveForm() async {
    final isValid = _formkey.currentState!.validate();

    if (isValid) {
      final event = Event(
        title: titleController.text,
        from: fromDate,
        to: toDate,
        isAllDay: false,
      );

      final provider = Provider.of<EventProvider>(context, listen: false);
      provider.addEvent(event);
      Navigator.of(context).pop();
    }
  }

my event model:

class Event {
  final String title;
  final DateTime from;
  final DateTime to;
  final bool isAllDay;

  const Event(
      {required this.title,
      required this.from,
      required this.to,
      this.isAllDay = false});
}

Screenshots from the app and the console where i'm printing the startTime and the title of an event:

Thanks in advance!

Answer 1

Update: fixed it by redefining the overridden methods using the official documentation following this link.