How to Develop a Custom Calendar View with Drag and Drop Events in FlutterFlow

1// Custom Widget: DraggableCalendar (simplified core)
2import 'package:flutter/material.dart';
3import 'package:table_calendar/table_calendar.dart';
4
5class DraggableCalendar extends StatefulWidget {
6  final List<Map<String, dynamic>> events;
7  final Function(String eventId, DateTime newDate) onEventMoved;
8  final double width;
9  final double height;
10
11  const DraggableCalendar({
12    required this.events,
13    required this.onEventMoved,
14    required this.width,
15    required this.height,
16  });
17
18  @override
19  State<DraggableCalendar> createState() => _DraggableCalendarState();
20}
21
22class _DraggableCalendarState extends State<DraggableCalendar> {
23  DateTime _focusedDay = DateTime.now();
24  DateTime? _hoveredDay;
25
26  @override
27  Widget build(BuildContext context) {
28    return SizedBox(
29      width: widget.width,
30      height: widget.height,
31      child: TableCalendar(
32        firstDay: DateTime.utc(2024, 1, 1),
33        lastDay: DateTime.utc(2030, 12, 31),
34        focusedDay: _focusedDay,
35        calendarBuilders: CalendarBuilders(
36          defaultBuilder: (ctx, day, focused) {
37            return _buildDayCell(day);
38          },
39          markerBuilder: (ctx, day, events) {
40            return _buildEventMarkers(day);
41          },
42        ),
43      ),
44    );
45  }
46
47  Widget _buildDayCell(DateTime day) {
48    return DragTarget<Map<String, dynamic>>(
49      onWillAcceptWithDetails: (details) {
50        setState(() => _hoveredDay = day);
51        return true;
52      },
53      onLeave: (_) => setState(() => _hoveredDay = null),
54      onAcceptWithDetails: (details) {
55        widget.onEventMoved(details.data['id'], day);
56        setState(() => _hoveredDay = null);
57      },
58      builder: (ctx, candidates, rejects) {
59        return Container(
60          decoration: BoxDecoration(
61            border: _hoveredDay == day
62                ? Border.all(color: Colors.blue, width: 2)
63                : null,
64          ),
65          child: Center(child: Text('${day.day}')),
66        );
67      },
68    );
69  }
70
71  Widget _buildEventMarkers(DateTime day) {
72    final dayEvents = widget.events.where(
73      (e) => isSameDay(DateTime.parse(e['date']), day)
74    ).toList();
75    return Wrap(
76      children: dayEvents.map((event) {
77        return LongPressDraggable<Map<String, dynamic>>(
78          data: event,
79          feedback: Material(
80            child: Container(
81              padding: const EdgeInsets.all(4),
82              color: Colors.blue.withOpacity(0.7),
83              child: Text(event['title'],
84                  style: const TextStyle(color: Colors.white)),
85            ),
86          ),
87          childWhenDragging: Opacity(
88            opacity: 0.3,
89            child: _eventChip(event),
90          ),
91          child: _eventChip(event),
92        );
93      }).toList(),
94    );
95  }
96
97  Widget _eventChip(Map<String, dynamic> event) {
98    return Container(
99      margin: const EdgeInsets.all(1),
100      padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
101      decoration: BoxDecoration(
102        color: Colors.blue,
103        borderRadius: BorderRadius.circular(4),
104      ),
105      child: Text(event['title'] ?? '',
106          style: const TextStyle(color: Colors.white, fontSize: 10)),
107    );
108  }
109}