oc-front/lib/widgets/sheduler_items/scheduler_calendar.dart

import 'package:flutter/material.dart';
import 'package:oc_front/core/sections/header/header.dart';
import 'package:oc_front/models/workflow.dart';
import 'package:oc_front/widgets/sheduler_items/schedule.dart';
import 'package:table_calendar/table_calendar.dart';

// ignore: must_be_immutable
class SchedulerCalendarWidget extends StatefulWidget {
  Map<String, List<WorkflowExecution>> data;
  DateTime start;
  DateTime end;
  DateTime focusedDay;
  CalendarFormat format = CalendarFormat.month;
  bool enabled = true;
  ScheduleWidgetState? parent;
  SchedulerCalendarWidget ({ super.key, 
  required this.data, 
  required this.start,
  required this.end,
  required this.parent,
  required this.focusedDay,
  this.enabled = true});
  @override SchedulerCalendarWidgetState createState() => SchedulerCalendarWidgetState();
}
class SchedulerCalendarWidgetState extends State<SchedulerCalendarWidget> {
  List<Color> colors = [Colors.blue, Colors.orange, Colors.red, Colors.green];
  List<String> titles = ["SCHEDULED", "RUNNING", "FAILURE", "SUCCESS"];
  bool isEvent(Map<String, List<WorkflowExecution>> data, DateTime day) {
    if (data[day.toIso8601String()] == null || data[day.toIso8601String()]!.isEmpty) { return false; }
    return true;
  }
  @override Widget build(BuildContext context) {
    widget.focusedDay = widget.focusedDay.isBefore(widget.start) ? widget.start : ( 
      widget.focusedDay.isAfter(widget.end) ? widget.end : widget.focusedDay );
    return Container( 
          padding: const EdgeInsets.only(left: 20, right: 20, bottom: 20),
          height: MediaQuery.of(context).size.height - HeaderConstants.height - 50, 
          child: TableCalendar<Event>(
          firstDay: widget.start,
          lastDay: widget.end,
          focusedDay: widget.focusedDay,
          calendarStyle: const CalendarStyle(
            markersMaxCount: 3,
            markersAnchor: 0,
            markersAlignment: Alignment.topCenter
          ),
          selectedDayPredicate: (day) => day == widget.focusedDay,
          calendarFormat: widget.format,
          calendarBuilders: CalendarBuilders(
            markerBuilder: (context, day, events) {
              List<Widget> children = [];
              for (var ev in events) {
                if (children.length == 2 && events.length > 3) { 
                  children.add( InkWell( onTap: () => widget.parent!.setState(() {
                    widget.parent!.selected = day.toIso8601String();
                    widget.parent!.selectedReal = null;
                    widget.parent!.widget.isDayPlanner = true;
                  }),
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 2),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(4),
                      color: Colors.grey.shade300,
                    ),
                    child: const Text("...", style: TextStyle(color: Colors.white, fontSize: 10)),
                  )));
                  break;
                }
                children.add(InkWell( onTap: () => widget.parent!.setState(() {
                  widget.parent!.selected = day.toIso8601String();
                  widget.parent!.selectedReal = ev.executionData;
                  if (widget.parent!.selectedReal  == null) {
                    widget.parent!.widget.isDayPlanner = true;
                  }
                }),
                  child: Container(
                padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 2),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(4),
                  color: ev.color,
                ),
                child: Text(ev.title.length < 30 ? ev.title : "${ev.title.substring(0, 28)}...", style: const TextStyle(color: Colors.white, fontSize: 10)),
              )));
              }
              return Column(mainAxisAlignment: MainAxisAlignment.center, children: children);
            },
            defaultBuilder: (context, date, events) =>  Container(
              alignment: Alignment.center,
              margin:const EdgeInsets.all(2.0),
              decoration: BoxDecoration(
                border: Border.all(color: Colors.grey.shade300),
                shape: BoxShape.rectangle,
              ),
              child: !isEvent(widget.data, date) ? Text(
                date.day.toString(),
                style: const TextStyle(color: Colors.grey),
              ) : Column( children: [ Container( padding: const EdgeInsets.symmetric(vertical: 5), child: Text(
                date.day.toString(),
                style: const TextStyle(color: Colors.grey),
              )) ])
            ),
            outsideBuilder: (context, day, focusedDay) => Container(
              alignment: Alignment.center,
              margin: const EdgeInsets.all(2.0),
              decoration: BoxDecoration(
                border: Border.all(color: Colors.grey.shade300),
                color: Colors.grey.shade300,
                shape: BoxShape.rectangle,
              ),
              child: Text(
                day.day.toString(),
                style: const  TextStyle(color: Colors.black),
              ),
            ),
            selectedBuilder: (context, date, events) => Container(
              alignment: Alignment.center,
              margin: const EdgeInsets.all(2.0),
              decoration: BoxDecoration(
                border: Border.all(color: const Color.fromRGBO(38, 166, 154, 1), width: 2),
                shape: BoxShape.rectangle,
              ),
              child: !isEvent(widget.data, date) ? Text(
                date.day.toString(),
                style: const TextStyle(color: Colors.grey),
              ) : Column( children: [ Container( padding: const EdgeInsets.symmetric(vertical: 5), child: Text(
                date.day.toString(),
                style: const TextStyle(color: Colors.grey),
              )) ]),
            ),
            todayBuilder: (context, date, events) => Container(
              margin: const EdgeInsets.all(2.0),
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: const Color.fromRGBO(38, 166, 154, .5),
                shape: BoxShape.rectangle,
                border: Border.all(color: Colors.grey),
              ),
              child: Text(
                date.day.toString(),
                style: const TextStyle(color: Colors.white),
              ),
            ),
          ),
          onFormatChanged: (format) => setState(() {
            widget.format = format;
          }),
          onDaySelected: (selectedDay, focusedDay) {
            widget.parent!.setState(() {
              widget.parent!.selected = selectedDay.toIso8601String();
              widget.parent!.selectedReal = null;
              widget.parent!.widget.isDayPlanner = true;
            });
          },
          shouldFillViewport: true,
          eventLoader: (day) {
            return widget.data[day.toIso8601String()] != null ? widget.data[day.toIso8601String()]!.map((e) {
              DateTime dateTime = DateTime.parse(e.executionData!);
              return Event("[${dateTime.hour > 9 ? dateTime.hour : "0${dateTime.hour}"}:${dateTime.minute > 9 ? dateTime.minute : "0${dateTime.minute}"}] ${e.name}", 
                 colors[(e.status ?? 1) - 1], e.executionData );
            }).toList() : [];
          },
        ));
  } 
}

class Event {
  final String title;
  String? executionData;
  Color color;

  Event(this.title, this.color, this.executionData);

  @override
  String toString() => title;
}