SyncFusion calendar does not appear

Question

I watched a video about Syncfusion Calendar, and while it worked as an independent widget, it kind of never works when we tried implementing it for our application. It yields us with either a blank screen or the Appbar and the FloatingActionButton appearing only. How can I make it visible?

Mind the fact that we are not making this widget the main page and has to be accessible from the dashboard itself.

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

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

class _CalendarTeacherPageState extends State<CalendarTeacherPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(child: const CalendarWidget()),
      appBar: AppBar(
        title: const Text('Calendar'),
        centerTitle: true,
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add, color: Colors.white),
        backgroundColor: Colors.red,
        onPressed: () => Navigator.of(context).push(
          MaterialPageRoute(builder: (context) => const EventEditingPage()),
        ),
      ),
    );
  }
}

This one is for our CalendarWidget, which we believe to be holding the errors.

class CalendarWidget extends StatelessWidget {
  const CalendarWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final events = Provider.of<EventProvider>(context).events;

    return SfCalendar(
      view: CalendarView.schedule,
      dataSource: EventDataSource(events),
      initialSelectedDate: DateTime.now(),
      cellBorderColor: Colors.transparent,
      onLongPress: (details) {
        final provider = Provider.of<EventProvider>(context, listen: true);

        provider.setDate(details.date!);
        showModalBottomSheet(
          context: context,
          builder: (context) => const TasksWidget(),
        );
      },
    );
  }
}

Migrating this code from the SfCalendar acting as the main widget to it being part of our dashboard has proven difficult, and I just know that the issue is in the SfCalendar and where I am placing it. How do I fix this?

score 1 · Answer 1 · answered Nov 24 '21 at 07:17

Based on the code snippet, we have checked the mentioned issue “Calendar not rendering” and it was working fine as expected from our end. We have attached the code snippet for the same.

Code snippet:

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

void main() {
  return runApp(const Calendar());
}

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

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

class CalendarState
    extends State<Calendar> {



  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          floatingActionButton: FloatingActionButton(
            child: const Icon(Icons.add),
            onPressed: () {},
          ),
          appBar: AppBar(
            title: const Text('text'),
          ),
          body: const CalendarPage()),
    );
  }
}

class CalendarPage extends StatelessWidget {
  const CalendarPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return SfCalendar();
  }
}

score 0 · Answer 2 · answered Nov 26 '21 at 08:52

I realized that I was missing something in the application, and it was the ChangeNotifier. By changing the code into this...

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

  @override
  State<CalendarTeacher> createState() => _CalendarTeacher();
}

class _CalendarTeacher extends State<CalendarTeacher> {
  @override
  Widget build(BuildContext context) => ChangeNotifierProvider(
        create: (context) => EventProvider(),
        child: Scaffold(
          appBar: AppBar(
            title: const Text("Calendar"),
            centerTitle: true,
          ),
          body: CalendarWidget(),
          floatingActionButton: FloatingActionButton(
            child: Icon(Icons.add, color: Colors.white),
            backgroundColor: Colors.red,
            onPressed: () => Navigator.of(context).push(
              MaterialPageRoute(builder: (context) => const EventEditingPage()),
            ),
          ),
        ),
      );
}

I completely forgot about the EventProvider in a sense, so all is good now!

SyncFusion calendar does not appear

2 Answers2