1

Hola: Estoy empezando a usar flutter, y estoy haciendo una app simple de calendario. No he tenido problemas para agregar las dependencias y las configuraciones básicas, pero al intentar agregar eventos he tenido problemas. Al usar DateTime.now no he tenido problemas, pero necesito agregar eventos en fechas específicas. He intentado usar DateTime.utc, pero algo estoy haciendo mal. Agradecería que alguien me pudiese ayudar, indicando el error y cuál es la forma correcta de programarlo. Gracias

Este es el código:

import 'package:flutter_clean_calendar/flutter_clean_calendar.dart';


class MoonCalendar extends StatefulWidget {
  @override
  _MoonCalendarState createState() => _MoonCalendarState();
}

class _MoonCalendarState extends State<MoonCalendar> {

  DateTime selectedDay;
  List <CleanCalendarEvent> selectedEvent;

  final Map<DateTime,List<CleanCalendarEvent>> events = {
    DateTime (DateTime.utc(2022).year,DateTime.utc(07).month,DateTime.utc(15).day):
    [
      CleanCalendarEvent(

          'Event A',
          startTime: DateTime(
              DateTime.utc(2022).year,DateTime.utc(7).month,DateTime.utc(15).day,10,0),
          endTime:  DateTime(
              DateTime.utc(2022).year,DateTime.utc(7).month,DateTime.utc(15).day,12,0),
          description: 'A special event',
          color: Colors.blue[700]),

    ],


  };

  void _handleData(date){
    setState(() {
      selectedDay = date;
      selectedEvent = events[selectedDay] ?? [];
    });
    print(selectedDay);
  }
  @override
  void initState() {
    // TODO: implement initState
    selectedEvent = events[selectedDay] ?? [];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "Calendario",
              style: TextStyle(fontSize: 22),
            ),
            Text(
              " Lunar",
              style: TextStyle(fontSize: 22, color: Color.fromRGBO(56, 215, 199, 1)),
            )
          ],
        ),

      ),
      body:  SafeArea(
        child: Container(
          decoration: BoxDecoration(

              gradient: const LinearGradient(
                  colors: [
                    Color.fromRGBO(61, 138, 146, 0.2),
                    Color.fromRGBO(56, 215, 199, 0.1)
                  ]
              )

          ),
          child: Calendar(
            startOnMonday: true,
            selectedColor: Colors.blue,
            todayColor: Colors.red,
            eventColor: Colors.green,
            eventDoneColor: Colors.amber,
            bottomBarColor: Colors.deepOrange,
            onRangeSelected: (range) {
              print('selected Day ${range.from},${range.to}');
            },
            onDateSelected: (date){
              return _handleData(date);
            },
            events: events,
            isExpanded: true,
            dayOfWeekStyle: TextStyle(
              fontSize: 15,
              color: Colors.black12,
              fontWeight: FontWeight.w100,
            ),
            bottomBarTextStyle: TextStyle(
              color: Colors.black87,
            ),
            hideBottomBar: false,
            hideArrows: false,
            weekDays: ['Lun','Mar','Mié','Jue','Vie','Sáb','Dom'],
          ),
        ),
      ),
    );
  }
} ```

[![introducir la descripción de la imagen aquí][1]][1]


  [1]: https://i.sstatic.net/HaNf1.png
4
  • Puedes explicar un poco más sobre que quieres hacer y que no está funcionando? Commented el 2 jul. 2022 a las 5:42
  • 1
    Hola. Quero hacer un calendario muy simple, en el que al hacer tap en un día, se indique como evento la fase lunar que corresponde a esa fecha. Por ejemplo, que al hacer tal en el 02 de julio, indique que fase lunar corresponde a ese día. Intento agregar los eventos, pero no lo logro. Creo que estoy usando mal el DateTime. Si indico como código DateTime.now, el evento va cambiando según el día que es. Quiero que el evento quede fijado en una fecha. Adjunto screen: i.sstatic.net/HaNf1.png. Por cierto, tus challenge en Youtube son muy buenos
    – Eve
    Commented el 2 jul. 2022 a las 16:59
  • quieres agregar estos datos manualmente? o por medio de una interfaz de usuario Commented el 4 jul. 2022 a las 19:45
  • 1
    Hola. Quiero agregar los datos manualmente
    – Eve
    Commented el 4 jul. 2022 a las 23:15

1 respuesta 1

0

Hay otra forma de fijar fechas con DateTime, si te vas a la clase de DateTime, verás que el constructor acepta la fecha, ejemplo: DateTime(2022, 7, 15) con esto tu podrías estar jugando, entonces, para poder aplicar esto en tu código es sencillo, tendrías que reemplazar tu variable events por esta de aquí, es muy similar, pero creo que te va a ahorrar mucho código:

 final Map<DateTime, List<CleanCalendarEvent>> events = {
    DateTime(2022, 7, 15): [
      CleanCalendarEvent('Event A',
          startTime: DateTime(2022, 7, 15, 10, 0),
          endTime: DateTime(2022, 7, 15, 12, 0),
          description: 'A special event',
          color: Colors.blue.shade700),
    ],
    DateTime(2022, 7, 25): [
      CleanCalendarEvent('Event B',
          startTime: DateTime(2022, 7, 25, 10, 0),
          endTime: DateTime(2022, 7, 25, 12, 0),
          description: 'A special event',
          color: Colors.blue.shade700),
    ]
  };

Si logras ver, ya no tienes que tener el código largo para especificar una fecha, solamente tendrás que poner el DateTime() y dentro de los paréntesis la fecha. Estuve probando este código y a mi me funcionó de maravilla, espero y mi respuesta te sirva.

1
  • 1
    Muchísimas gracias. Me funcionó perfectamente
    – Eve
    Commented el 4 jul. 2022 a las 23:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.