multiple calendar in single screen is not working when its turn from month view to week view and to day view

[anbarasannethaji]

Bug description

multiple calendar in single screen is not working when its turn from month view to week view and to day view, i'm using setState to change the calendar but its not working.

Steps to reproduce

Step 1. when i'm using calendar view its showing Step 2. but when i use setState to change the view of calendar from month to week its not working Step 3. same goes for month to day

Code sample

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

class HolidayViewScreen extends StatefulWidget { const HolidayViewScreen({super.key});

@override State createState() => _HolidayViewScreenState(); }

class _HolidayViewScreenState extends State { CalendarView _currentView = CalendarView.month;

@override Widget build(BuildContext context) { return Scaffold( backgroundColor: CustomColour.secondaryColor, body: Padding( padding: const EdgeInsets.only(left: 24, right: 24), child: SingleChildScrollView( child: Column( children: [ Padding( padding: const EdgeInsets.only(top: 50), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.baseline, textBaseline: TextBaseline.alphabetic, children: [ // Month navigation here, if needed Column( children: [ GestureDetector( onTap: () => setState(() { print("Month"); _currentView = CalendarView.month; }), child: Text("Months"), ), GestureDetector( onTap: () => setState(() { print("Week"); _currentView = CalendarView.week; }), child: Text("Week"), ), GestureDetector( onTap: () => setState(() { print("Day"); _currentView = CalendarView.day; }), child: Text("Day"), ), ], ) ], ), ), Padding( padding: const EdgeInsets.only(top: 50), child: SfCalendar( view: _currentView, dataSource: MeetingDataSource(_getDataSource()), ), ), ], ), ), ), ); }

List _getDataSource() { final List meetings = []; final DateTime today = DateTime.now(); final DateTime startTime = DateTime(today.year, today.month, today.day, 9); final DateTime endTime = startTime.add(const Duration(hours: 2)); meetings.add(Meeting( 'Conference', startTime, endTime, const Color(0xFF0F8644), false)); return meetings; } }

class MeetingDataSource extends CalendarDataSource { MeetingDataSource(List source) { appointments = source; }

@override DateTime getStartTime(int index) { return _getMeetingData(index).from; }

@override DateTime getEndTime(int index) { return _getMeetingData(index).to; }

@override String getSubject(int index) { return _getMeetingData(index).eventName; }

@override Color getColor(int index) { return _getMeetingData(index).background; }

@override bool isAllDay(int index) { return _getMeetingData(index).isAllDay; }

Meeting _getMeetingData(int index) { final dynamic meeting = appointments![index]; late final Meeting meetingData; if (meeting is Meeting) { meetingData = meeting; }

return meetingData;

} }

class Meeting { Meeting(this.eventName, this.from, this.to, this.background, this.isAllDay);

String eventName; DateTime from; DateTime to; Color background; bool isAllDay; }

Screenshots or Video

![Uploading Screenshot 2024-08-09 at 11.46.34 AM.png…]()

Stack Traces

On which target platforms have you observed this bug?

Android, iOS

Flutter Doctor output

[PreethikaSelvam]

Hi @anbarasannethaji,

We have analyzed your query and recommend using the CalendarController instead of setState to update the calendar view. The CalendarController allows you to change the view directly without triggering a full widget tree rebuild, resulting in smoother and more efficient updates. This approach improves performance and offers more precise control over calendar interactions, ensuring the view updates correctly. We have shared a modified code snippet and a sample for your reference.

Code snippet:

final CalendarView _currentView = CalendarView.day;
  final CalendarController _calendarController = CalendarController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.only(left: 24, right: 24),
        child: SingleChildScrollView(
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.only(top: 50),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.baseline,
                  textBaseline: TextBaseline.alphabetic,
                  children: [
                    Column(
                      children: [
                        GestureDetector(
                          onTap: () {
                            print("Month");
                            _calendarController.view = CalendarView.month;
                          },
                          child: const Text("Months"),
                        ),
                        GestureDetector(
                          onTap: () {
                            print("Week");
                            _calendarController.view = CalendarView.week;
                          },
                          child: const Text("Week"),
                        ),
                        GestureDetector(
                          onTap: () {
                            print('Day');
                            _calendarController.view = CalendarView.day;
                          },
                          child: const Text("Day"),
                        ),
                      ],
                    )
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 50),
                child: SfCalendar(
                  view: _currentView,
                  showNavigationArrow: true,
                  controller: _calendarController,
                  dataSource: MeetingDataSource(_getDataSource()),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  List _getDataSource() {
    final List meetings = [];
    final DateTime today = DateTime.now();
    final DateTime startTime = DateTime(today.year, today.month, today.day, 9);
    final DateTime endTime = startTime.add(const Duration(hours: 2));
    meetings.add(Meeting(
        'Conference', startTime, endTime, const Color(0xFF0F8644), false));
    return meetings;
  }
}

class MeetingDataSource extends CalendarDataSource {
  MeetingDataSource(List source) {
    appointments = source;
  }

  @override
  DateTime getStartTime(int index) {
    return _getMeetingData(index).from;
  }

  @override
  DateTime getEndTime(int index) {
    return _getMeetingData(index).to;
  }

  @override
  String getSubject(int index) {
    return _getMeetingData(index).eventName;
  }

  @override
  Color getColor(int index) {
    return _getMeetingData(index).background;
  }

  @override
  bool isAllDay(int index) {
    return _getMeetingData(index).isAllDay;
  }

  Meeting _getMeetingData(int index) {
    final dynamic meeting = appointments![index];
    late final Meeting meetingData;
    if (meeting is Meeting) {
      meetingData = meeting;
    }

    return meetingData;
  }
}

class Meeting {
  Meeting(this.eventName, this.from, this.to, this.background, this.isAllDay);

  String eventName;
  DateTime from;
  DateTime to;
  Color background;
  bool isAllDay;
}

Output:

If you still encounter issues when updating the calendar view using the CalendarController, we kindly request you to try replicating the reported issue in the attached test sample. Please revert to us so that we can assist you more effectively.

Regards, Preethika Selvam. gh2019.zip