Merge pull request #1 from ktechila/add-custom-colors-to-event-cells

feat(add colors): add colors to cards (jquense#2236)
ktechila · Sep 10, 2022 · 08241d4 · 08241d4
2 parents f45a40b + a2a1ddd
commit 08241d4
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/src/EventCell.js b/src/EventCell.js
@@ -38,9 +38,12 @@ class EventCell extends React.Component {
       localizer.diff(start, localizer.ceil(end, 'day'), 'day') > 1
 
     let userProps = getters.eventProp(event, start, end, selected)
-
     const content = (
-      <div className="rbc-event-content" title={tooltip || undefined}>
+      <div
+        className="rbc-event-content"
+        style={event.style || {}}
+        title={tooltip || undefined}
+      >
         {Event ? (
           <Event
             event={event}
@@ -63,7 +66,7 @@ class EventCell extends React.Component {
         <div
           {...props}
           tabIndex={0}
-          style={{ ...userProps.style, ...style }}
+          style={{ ...userProps.style, ...style, ...(event.style || {}) }}
           className={clsx('rbc-event', className, userProps.className, {
             'rbc-selected': selected,
             'rbc-event-allday': showAsAllDay,

diff --git a/stories/resources/events.js b/stories/resources/events.js
@@ -7,6 +7,9 @@ export default [
     allDay: true,
     start: new Date(2015, 3, 0),
     end: new Date(2015, 3, 1),
+    style: {
+      backgroundColor: 'red',
+    },
   },
   {
     id: 1,
@@ -48,6 +51,10 @@ export default [
     start: new Date(2015, 3, 12, 10, 30, 0, 0),
     end: new Date(2015, 3, 12, 12, 30, 0, 0),
     desc: 'Pre-meeting meeting, to prepare for the meeting',
+    style: {
+      backgroundColor: 'yellow',
+      color: 'black',
+    },
   },
   {
     id: 7,