Description
Can we access your project?
- I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.
Current Behavior
I have used syncfusion_flutter_calendar: ^29.1.38 in flutterflow but when i run the website in Google Chrome or any other browser, it gives an error. Actually, same code will work in vs code using web I have attached the error and Code screenshot
Actually calender work but event is not show i have attached screenshot of crome using inspect element
Errro - main.dart.js?ajTkjdLh8zt8bBuEHGgw:4481 Uncaught Error: Unable to load asset: "packages/timezone/data/latest_all.tzf", GET https://preview.flutterflow.app/magic-c-r-m-etxxf2/ajTkjdLh8zt8bBuEHGgw/assets/packages/timezone/data/latest_all.tzf 404 (Not Found)
// Automatic FlutterFlow imports import '/backend/schema/structs/index.dart'; import '/backend/supabase/supabase.dart'; import '/flutter_flow/flutter_flow_theme.dart'; import '/flutter_flow/flutter_flow_util.dart'; import '/custom_code/widgets/index.dart'; // Imports other custom widgets import '/custom_code/actions/index.dart'; // Imports custom actions import '/flutter_flow/custom_functions.dart'; // Imports custom functions import 'package:flutter/material.dart'; // Begin custom widget code // DO NOT REMOVE OR MODIFY THE CODE ABOVE!
import 'package:syncfusion_flutter_calendar/calendar.dart'; import 'dart:math'; import 'package:flutter/services.dart' show rootBundle; import 'package:timezone/timezone.dart' as tz; import 'package:http/http.dart' as http;
class CustomCalendar extends StatefulWidget { const CustomCalendar({ super.key, this.width, this.height, required this.appoitmentList, });
final double? width; final double? height; final List appoitmentList;
@OverRide State createState() => _CustomCalendarState(); }
class _CustomCalendarState extends State { List _getDataSource() { final List meetings = [];
final DateTime today = DateTime.now().toUtc();
final DateTime startTime =
DateTime(today.year, today.month, today.day, 9, 0, 0).toUtc();
final DateTime endTime = startTime.add(const Duration(hours: 2)).toUtc();
meetings.add(
Meeting('Conference', startTime, endTime, const Color(0xFF0F8644)));
meetings.add(Meeting(
'Conference Two',
DateTime(today.year, today.month, today.day, 11, 0, 0),
DateTime(today.year, today.month, today.day, 11, 55, 0),
Colors.pink));
return meetings;
}
void dragStart(AppointmentDragStartDetails appointmentDragStartDetails) { dynamic appointment = appointmentDragStartDetails.appointment; CalendarResource? resource = appointmentDragStartDetails.resource; }
void dragUpdate(AppointmentDragUpdateDetails appointmentDragUpdateDetails) { dynamic appointment = appointmentDragUpdateDetails.appointment; DateTime? draggingTime = appointmentDragUpdateDetails.draggingTime; Offset? draggingOffset = appointmentDragUpdateDetails.draggingPosition; CalendarResource? sourceResource = appointmentDragUpdateDetails.sourceResource; CalendarResource? targetResource = appointmentDragUpdateDetails.targetResource; }
void dragEnd(AppointmentDragEndDetails appointmentDragEndDetails) { Meeting appointments = appointmentDragEndDetails.appointment as Meeting; dynamic appointment = appointmentDragEndDetails.appointment!; CalendarResource? sourceResource = appointmentDragEndDetails.sourceResource; CalendarResource? targetResource = appointmentDragEndDetails.targetResource; DateTime? droppingTime = appointmentDragEndDetails.droppingTime; }
// Future _initializeTimeZone() async { // try { // // Replace with your Supabase Storage public URL // const String timezoneUrl = // 'https://bnlijccqpoyjgvmnhssa.supabase.co/storage/v1/object/public/Documents//latest_all.tzf'; // final response = await http.get(Uri.parse(timezoneUrl)); // if (response.statusCode == 200) { // final tzData = response.bodyBytes; // tz.initializeDatabase(tzData); // print('Timezone initialized successfully'); // } else { // print('Failed to fetch timezone data: ${response.statusCode}'); // } // } catch (e) { // print('Error initializing timezone: $e'); // } // }
@OverRide void initState() { // _initializeTimeZone(); super.initState(); }
@OverRide Widget build(BuildContext context) { return ClipRRect( borderRadius: BorderRadius.circular(20), // Aggiungi i bordi arrotondati child: Container( width: widget.width, height: widget.height, child: SfCalendar( view: CalendarView.week, allowDragAndDrop: true, onDragStart: dragStart, onDragUpdate: dragUpdate, onDragEnd: dragEnd, monthViewSettings: MonthViewSettings( appointmentDisplayMode: MonthAppointmentDisplayMode.appointment), backgroundColor: Colors.white, dataSource: MeetingDataSource(_getDataSource()), headerStyle: const CalendarHeaderStyle(backgroundColor: Colors.white), weekNumberStyle: const WeekNumberStyle( textStyle: TextStyle( fontSize: 16, fontWeight: FontWeight.w500, color: Color(0xff151515))), resourceViewSettings: const ResourceViewSettings( displayNameTextStyle: TextStyle( fontSize: 16, fontWeight: FontWeight.w500, color: Color(0xff151515))), showWeekNumber: false, cellBorderColor: const Color(0xffE8E8E8), ), ), ); }
Color getRandomColor() { final Random random = Random(); return Color.fromARGB( 255, // Alpha value (fully opaque) random.nextInt(256), // Red value random.nextInt(256), // Green value random.nextInt(256), // Blue value ); } }
class MeetingDataSource extends CalendarDataSource { MeetingDataSource(List source) { appointments = source; }
@OverRide DateTime getStartTime(int index) { return appointments![index].from; }
@OverRide DateTime getEndTime(int index) { return appointments![index].to; }
@OverRide String getSubject(int index) { return appointments![index].eventName; }
@OverRide Color getColor(int index) { return appointments![index].background; }
@OverRide Object? convertAppointmentToObject( Object? customData, Appointment appointment) { return Meeting(appointment.subject, appointment.startTime, appointment.endTime, appointment.color); } }
class Meeting { Meeting(this.eventName, this.from, this.to, this.background);
String eventName; DateTime from; DateTime to; Color background; }
Expected Behavior
i want to show event using syncfusion_flutter_calendar 29.1.40 but its show asset error and in flutterflow asset how can i add "packages/timezone/data/latest_all.tzf".
Steps to Reproduce
Create custome code and run
Reproducible from Blank
- The steps to reproduce above start from a blank project.
Bug Report Code (Required)
Visual documentation
I have used syncfusion_flutter_calendar: ^29.1.38 in flutterflow but when i run the website in Google Chrome or any other browser, it gives an error. Actually, same code will work in vs code using web I have attached the error and Code screenshot
Actually calender work but event is not show i have attached screenshot of crome using inspect element
Errro - main.dart.js?ajTkjdLh8zt8bBuEHGgw:4481 Uncaught Error: Unable to load asset: "packages/timezone/data/latest_all.tzf", GET https://preview.flutterflow.app/magic-c-r-m-etxxf2/ajTkjdLh8zt8bBuEHGgw/assets/packages/timezone/data/latest_all.tzf 404 (Not Found)
Environment
- FlutterFlow version:
- Platform:
- Browser name and version:
- Operating system and version affected: