We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Change the color of an appointment cell based on the "subject" of an event.

Hello ! 

I am trying to change the backgroundColor of an event based on the subject String Value of the event. I am currently mapping the color of the event with a Get Color at the end of the program, but I am having trouble getting any color other than the default Blue for the events dots on the month view and in the Agenda View.

I tried many different ways (Making an If Statement based on the subject, etc...), but nothing seems to give me any other color than the default Blue. Even my current code which uses a greenish FromARGB Color gives me nothing but the default color.

Here is my current code (Which connects to a FireStore database).

Does anybody have a great idea of how to do this ? 

Thank you, and wishing you a wonderful Holiday season :) 

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:syncfusion_localizations/syncfusion_localizations.dart';

void main() async {
await Firebase.initializeApp();
runApp(const MyApp());

class MyApp extends StatelessWidget {
const MyApp({super.key});

Widget build(BuildContext context) {
return MaterialApp(
localizationsDelegates: [
// ignore: prefer_const_literals_to_create_immutables
supportedLocales: const [
locale: const Locale('fr'),
title: 'Calendrier MDL Énergie',
theme: ThemeData(primarySwatch: Colors.green),
themeMode: ThemeMode.system,
home: const MyHomePage(),

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});

State<MyHomePage> createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
MeetingDataSource? events;
final databaseReference = FirebaseFirestore.instance;

void initState() {
getDataFromFireStore().then((results) {
SchedulerBinding.instance.addPostFrameCallback((timeStamp) {
setState(() {});

Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Calendrier MDL Énergie"),
backgroundColor: const Color.fromARGB(255, 39, 80, 81)),
body: SfCalendar(
view: CalendarView.month,
monthViewSettings: const MonthViewSettings(
showAgenda: true,
agendaViewHeight: 350,
agendaItemHeight: 65,
dataSource: events,
todayHighlightColor: Colors.green),

Future<void> getDataFromFireStore() async {
var snapShotsValue =
await databaseReference.collection("CalendarEventsCollection").get();

List<Meeting> list = snapShotsValue.docs
.map((e) => Meeting(
eventName: e.data()['Subject'],
from: formatTimestamp(e.data()['StartTime']),
to: formatTimestamp(e.data()['EndTime']),
background: Color.fromARGB(255, 103, 130, 157),
isAllDay: true))
events = MeetingDataSource(list);

DateTime formatTimestamp(Timestamp timestamp) {
return timestamp.toDate();

class MeetingDataSource extends CalendarDataSource {
MeetingDataSource(List<Meeting> source) {
appointments = source;

DateTime getStartTime(int index) {
return appointments![index].from;

DateTime getEndTime(int index) {
return appointments![index].to;

bool isAllDay(int index) {
return appointments![index].isAllDay;

String getSubject(int index) {
return appointments![index].eventName;

Color GetColor(int index) {
return appointments![index].background();

class Meeting {
String? eventName;
DateTime? from;
DateTime? to;
Color? background;
bool? isAllDay;

Meeting({this.eventName, this.from, this.to, this.background, this.isAllDay});

1 Reply

MS Muniappan Subramanian Syncfusion Team December 23, 2022 12:11 PM UTC

As per the shared details, we have checked your query and found that it is a sample-level issue. The default color (Blue) was shown because of the meeting color property's incorrect mapping to the calendar. We have prepared a sample, please find the attached sample and output for the same,

Code Snippets:


Color getColor(int index) {

  return appointments![index].background;


Refer to our UG documentation to know more details about custom appointment mapping,


We hope that this helps you. Please let us know if you need further assistance.

Attachment: Sample_and_output_d4795169.zip

Live Chat Icon For mobile
Up arrow icon