Is there a method to change the markersColor based on the event about table_calendar

[aleksanderwozniak]

Try something along these lines:

singleMarkerBuilder: (context, date, event) {
  final color = (event as YourEventClass).type == YourEventType.available ? Colors.indigo : Colors.red[700];

  return Container(
    width: 10.0,
    height: 10.0,
    color: color,
    margin: const EdgeInsets.symmetric(horizontal: 1.5),
  );
},

[limdnas]

Try something along these lines:

singleMarkerBuilder: (context, date, event) {
  final color = (event as YourEventClass).type == YourEventType.available ? Colors.indigo : Colors.red[700];

  return Container(
    width: 10.0,
    height: 10.0,
    color: color,
    margin: const EdgeInsets.symmetric(horizontal: 1.5),
  );
},

is posible to have this implemented in example calendar?

i dont know how i can implement in calendar for diferents events

thank you

[aleksanderwozniak]

There you go guys.

Step 1 - Event class:

class Event {
  final String text;
  final EventStatus status;

  const Event({
    @required this.text,
    this.status = EventStatus.idle,
  });
}

enum EventStatus {
  idle,
  active,
  important,
}

Step 2 - Prepare events map using Event class:

_events = {
  DateTime(2019, 8, 20): [
    Event(text: 'Event A0', status: EventStatus.active),
    Event(text: 'Event B0'),
    Event(text: 'Event C0'),
  ],
  DateTime(2019, 8, 21): [
    Event(text: 'Event A1', status: EventStatus.important),
  ],
  DateTime(2019, 8, 22): [
    Event(text: 'Event A2', status: EventStatus.important),
    Event(text: 'Event B2', status: EventStatus.active),
  ],
};

Step 3 - Retrieve data in singleMarkerBuilder:

singleMarkerBuilder: (context, date, event) {
  final color = (event as Event).status == EventStatus.important ? Colors.red[700] : Colors.indigo;

  return Container(
    width: 10.0,
    height: 10.0,
    color: color,
    margin: const EdgeInsets.symmetric(horizontal: 1.5),
  );
},

Of course adapt this short example to your needs.

[fabianogadenz]

I also need an example, it was hard to understand for me.

[fabianogadenz]

I did it! I passed a template of my calendar item, containing color ... in the event I can redeem the color.

builders: CalendarBuilders(
        singleMarkerBuilder: (context, date, event) {
          Color cor = Color.fromRGBO(event.color);

          return Container(
            decoration: BoxDecoration(shape: BoxShape.circle, color: cor),
            width: 7.0,
            height: 7.0,
            margin: const EdgeInsets.symmetric(horizontal: 1.5),
          );
        },
      ),

[france00mf]

@aleksanderwozniak if i want that every days of table_calendar be marked with diferents color how can i do ?

[aleksanderwozniak]

@FranciscoJose00MF
You can use DayBuilder for that:

dayBuilder: (context, date, events) {
  final random = Random();
  final color = Color.fromRGBO(random.nextInt(255), random.nextInt(255), random.nextInt(255), 1.0);

  return Container(
    margin: const EdgeInsets.all(4.0),
    color: color,
    width: 100,
    height: 100,
    child: Text('${date.day}'),
  );
},