Controlling the font style for individual events

[Andreas Knoefel]

I can pass in the datasource the color for each event, but I cannot control the font color. If the event color is too light, i.e. yellow, the white text becomes unreadable. This applies both for the month view and agenda view. All the formatting parameters I found apply globally, not to individual events.

[Praveen Balu]

Hi Andreas Knoefel,

We have achieved different text colors for each appointment in SfCalendar by using the appointmentBuilder property and id property within Appointment class, which allows you to customize each appointment using Flutter widgets as custom widgets.

Each appointment is assigned a unique id (e.g., '01', '02', '03') to distinguish it from other appointments. The appointmentBuilder property of SfCalendar is then used to customize the appearance of each appointment dynamically.

Within the appointmentBuilder, the id is evaluated using a switch statement to determine the appropriate text color for each appointment. Based on the id, a specific fontTextColor is applied to the appointment text.

SfCalendar(
    …

    dataSource: _calendarDataSource(),

    appointmentBuilder: _appointmentBuilder,

),

_AppointmentDataSource _calendarDataSource() {

  List<Appointment> appointments = <Appointment>[];

 

  appointments.addAll([

    Appointment(

id: '01',

      ...

    ),

    Appointment(

  id: '02',

      ...

    ),

    Appointment(

id: '03',

      ...

    ),

  ]);

  return _AppointmentDataSource(appointments);

}

 

Widget _appointmentBuilder(

  BuildContext context,

  CalendarAppointmentDetails calendarAppointmentDetails,

) {

  Color fontTextColor = Colors.white;

  final Appointment appointment =

      calendarAppointmentDetails.appointments.first;

  switch (appointment.id) {

    case '01':

      fontTextColor = Colors.red;

      break;

    case '02':

      fontTextColor = Colors.deepPurple;

      break;

    case '03':

      fontTextColor = Colors.black;

      break;

    default:

  }

  return Container(

    color: appointment.color,

    child: Center(

      child: Text(

        'Desired text',

style: TextStyle(color: fontTextColor,),

      ),

    ),

  );

}

We have also attached the sample along with the demo for your reference, you can modify the sample based on your requirements.

Regards,

Praveen Balu.

Attachment: forum_197383_716065ac.zip

[Andreas Knoefel]

Thank you, now it all comes together

[Praveen Balu]

Hi Andreas Knoefel,

Most Welcome. Kindly get back to us if you have further queries. We are always happy to assist you.

Regards,

Praveen Balu.

[Andreas Knoefel]

Follow-up: Is the same builder used for the month view and the agenda view? I try to keep the text in the month view minimal, and add more details in the agenda view. 

[Nielsen Isaac]

You’re running into a common limitation with many calendar libraries—event-level font color customization isn’t always supported out of the box. One workaround is to calculate a contrasting text color based on the event background color (e.g., dark text for light backgrounds, light text for dark backgrounds) and then apply it dynamically when rendering each event. Depending on the library, this might require using a custom rendering function, event hooks, or CSS  moto x3m overrides to style each event individually rather than relying on global settings.

[Mugunthan Ramalingam]

Hi Andreas Knoefel,

Yes, both the month view and the agenda view in the SfCalendar uses the same appointmentBuilder for rendering appointments. However, the way appointments are displayed depends on the context:

• In month view, appointments are shown inside the calendar cells. These cells have limited space, so it's best to keep the content minimal.
• In agenda view, appointments appear below the calendar when showAgenda is enabled, there's more room available. You can use this space to show detailed information like time ranges, descriptions and more.

So, while the builder is shared, you can customize the content based on whether the agenda view is active. This gives you full control over how much detail to show in each context of the appointments.

Demo:

  

 

Please let us know if you need any further assistance.

Regards,
Mugunthan.

Attachment: forum_197383_eea54e54.zip