diff --git a/src/components/CalendarHeader.tsx b/src/components/CalendarHeader.tsx
index 9940f00c..572389f7 100644
--- a/src/components/CalendarHeader.tsx
+++ b/src/components/CalendarHeader.tsx
@@ -149,12 +149,13 @@ function _CalendarHeader<T extends ICalendarEventBase>({
                 ]}
               >
                 {allDayEvents.map((event, index) => {
+                  const bg: any = (event?.color) ? {backgroundColor: event.color} : primaryBg;
                   if (!dayjs(date).isBetween(event.start, event.end, 'day', '[]')) {
                     return null
                   }
                   return (
                     <TouchableOpacity
-                      style={[eventCellCss.style, primaryBg, u['mt-2']]}
+                      style={[eventCellCss.style, bg, u['mt-2']]}
                       key={index}
                       onPress={() => _onPressEvent(event)}
                     >
diff --git a/src/interfaces.ts b/src/interfaces.ts
index f3b13cde..73616c18 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -11,6 +11,7 @@ export interface ICalendarEventBase {
   children?: ReactElement | null
   hideHours?: boolean
   disabled?: boolean
+  color?: string
   /**
    * overlapping position of event starting from 0 (optional)
    */