Flutter Syncfusion 日历不显示数据

编程问答 2023-01-24

问题描述

我对 SyncFusion 的抖动日历有问题，此屏幕截图显示了这一点

enter image description here

如您所见，日历仍然从我的 API 获取数据，但它不会在日历上显示任何会议数据。仅供参考，我想在每天每次点击时获取数据，这就是为什么我使用 onViewChanged

这是我的完整代码：

import 'package:Flutter/material.dart';
import 'package:Flutter/scheduler.dart';
import 'package:myhumgupdate/App/Config/palette.dart';
import 'package:myhumgupdate/Icon/dbicons.dart';
import 'package:myhumgupdate/Widgets/dialog_loading.dart';
import 'package:myhumgupdate/giangvien/Screens/XemTKB/TKBTheoNgay/tkbngay_viewmodel.dart';
import 'package:myhumgupdate/giangvien/models/meeting.dart';
import 'package:myhumgupdate/giangvien/models/meetingdata_source.dart';
import 'package:stacked/stacked.dart';
import 'package:syncfusion_Flutter_calendar/calendar.dart';

class TKBNgay extends StatefulWidget {
  @override
  _TKBNgayState createState() => _TKBNgayState();
}

class _TKBNgayState extends State<TKBNgay> {
  DateTime date;

  List<DateTime> _blackoutDates = <DateTime>[];
  CalendarController _calendarController;
  CalendarController _onViewChanged;
  DateTime _chosenDate = DateTime.Now();

  CalendarDataSource _calendarDataSource;
  dynamic scheduleviewbuilder;
  bool _showDatePickerButton = true;
  bool _allowViewNavigation = true;
  bool _showLeadingAndTrailingDates = true;
  DateTime _minDate;
  DateTime _maxDate;
  final List<CalendarView> _allowedViews = <CalendarView>[
    CalendarView.day,CalendarView.week,CalendarView.workWeek,CalendarView.month,CalendarView.schedule
  ];
  ViewChangedCallback viewChangedCallback;

  @override
  Widget build(BuildContext context) {
    return viewmodelBuilder<TKBNgayviewmodel>.reactive(
        builder: (context,model,child) => SfCalendar(
              onViewChanged: (details) {
                List<DateTime> dates = details.visibleDates;
                model.getTkbNgay(dates[0]);
              },// onTap: (details) {
              //   DateTime date = details.date;
              //   model.getTkbNgay(date);
              // },controller: _calendarController,dataSource: MeetingDataSource(model.getDataSource),scheduleViewMonthHeaderBuilder: scheduleviewbuilder,// appointmentBuilder: appointmentBuilder,appointmentTimetextformat: 'hh:mm:ss a',initialdisplayDate: DateTime(DateTime.Now().year,DateTime.Now().month,DateTime.Now().day,00,45,0),allowedViews: _allowedViews,showDatePickerButton: _showDatePickerButton,allowViewNavigation: _allowViewNavigation,blackoutDates: _blackoutDates,minDate: _minDate,maxDate: _maxDate,monthViewSettings: MonthViewSettings(
                  appointmentdisplayMode:
                      MonthAppointmentdisplayMode.appointment,showTrailingAndLeadingDates: _showLeadingAndTrailingDates,appointmentdisplayCount: 4),// timeSlotViewSettings: const TimeSlotViewSettings(
              //     minimumAppointmentDuration: Duration(minutes: 60)),timeSlotViewSettings: TimeSlotViewSettings(
                startHour: 0,endHour: 16,timeFormat: " H",timeIntervalHeight: 60,timeTextStyle: TextStyle(
                  color: Colors.black,fontWeight: FontWeight.bold,),selectiondecoration: Boxdecoration(
                color: Colors.transparent,border: Border.all(color: Colors.yellow,width: 2),shape: BoxShape.rectangle,viewmodelBuilder: () => TKBNgayviewmodel());
  }
}

void calendarTapped(CalendarTapDetails details) {
  if (details.targetElement == CalendarElement.viewHeader) {}
}

Widget appointmentBuilder(BuildContext context,CalendarappointmentDetails calendarappointmentDetails) {
  final Meeting appointment = calendarappointmentDetails.appointments.first;
  return Column(
    children: [
      Container(
        width: calendarappointmentDetails.bounds.width,height: calendarappointmentDetails.bounds.height,// color: appointment.background,decoration: Boxdecoration(
          border: Border.all(
            color: Colors.black,width: 0.25,color: appointment.background,child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,mainAxisAlignment: MainAxisAlignment.center,children: [
            Text(
              '${appointment.tkb.maMonHoc} - ${appointment.tkb.tenMonHoc}',style: TextStyle(
                color: Palette.kSecondColor,fontWeight: FontWeight.w600,fontSize: 16.0,SizedBox(
              height: 5.0,Text(
              'Phòng: ${appointment.tkb.maphongHoc} - Nhóm MH: ${appointment.tkb.nhom}',Text(
              'Giảng viên: ${appointment.tkb.giaoVien}',],)
    ],);
}

这是我的视图模型代码：

import 'dart:ui';

import 'package:intl/intl.dart';
import 'package:myhumgupdate/giangvien/models/meeting.dart';
import 'package:myhumgupdate/giangvien/models/thoikhoabieu_ngay.dart';
import 'package:myhumgupdate/giangvien/services/schedule.service.dart';
import 'package:stacked/stacked.dart';
import 'package:table_calendar/table_calendar.dart';

class TKBNgayviewmodel extends Baseviewmodel {
  List<ThoiKhoaBieuNgay> _tkbNgayModels;
  List<ThoiKhoaBieuNgay> get tkbNgayModels => _tkbNgayModels ?? [];
  List<Meeting> _getDataSource = [];

  ScheduleService _scheduleService = new ScheduleService();
  List<Meeting> get getDataSource => _getDataSource;

  CalendarController calendarController = CalendarController();
  DateFormat formatDateTitle = DateFormat("EEEE,dd/MM/yyyy",'vi');
  String _currentTime = DateFormat("EEEE,'vi').format(DateTime.Now());
  DateTime _timeSelect = DateTime.Now();
  DateTime get timeSelect => _timeSelect;

  String get currentTime => _currentTime;
  DateTime timeNow = DateTime.Now();
  DateFormat date = new DateFormat('dd/MM/y');
  int day = DateTime.Now().day;

  getTkbNgay(DateTime dateTime) async {
    _currentTime = formatDateTitle.format(dateTime);
    _timeSelect = dateTime;


    String today = date.format(dateTime);
    var day = today.split("/");
    if (day[0].length < 2) return day[0] = '0${day[0]}';

    String dateParse = '${day[0]}/${day[1]}/${day[2]}';

    List<ThoiKhoaBieuNgay> getTKBNgay =
        await _scheduleService.getThoiKhoaBieuNgay(dateParse,true);

    _getDataSource.clear();
    if (getTKBNgay != null) {
      DateTime _startTime = timeNow;
      DateTime _endTime = timeNow;
      getTKBNgay.forEach((element) {
        _startTime = DateTime(timeNow.year,timeNow.month,timeNow.day,element.tietBatDau.toInt(),0);
        _endTime = _startTime.add(Duration(hours: element.soTiet.toInt()));
        _getDataSource.add(Meeting(
          eventName: element.tenMonHoc,from: _startTime,to: _endTime,subText: element.maphongHoc,tkb: element,background: Color(0xFFFEFEA5),));
      });
    } else {
      getTKBNgay = [];
    }

    _tkbNgayModels = getTKBNgay.toList();
    notifyListeners();
  }

  Comparator<ThoiKhoaBieuNgay> priceComparator =
      (a,b) => a.tietBatDau.compareto(b.tietBatDau);
}

解决方法

获取可见日期约会详情： 您可以使用 Calendar 数据源的 getVisibleAppointments 辅助方法获取可见日期详细信息的约会。请找到相同的 pub 文档链接。

发布文档链接： https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/getVisibleAppointments.html

此外，我们还有一个 KB 文档，用于在警报窗口中显示可见日期约会。请从以下链接中找到知识库文档。

知识库链接： https://www.syncfusion.com/kb/12549/how-to-get-the-appointments-between-the-given-start-and-end-date-in-the-flutter-calendar

另外请从以下UG文档中找到一些数据源的辅助方法。

UG 链接： https://help.syncfusion.com/flutter/calendar/appointments#appointment-helper

我们希望这对您有所帮助。如果您需要进一步的帮助，请告诉我们。

calendardartflutter-dependenciessyncfusion-calendar