feat: custom container style of event item

documentation/docs/guides/events.md

@@ -85,6 +85,12 @@ Color of the event
 
 <span style={{color: "grey"}}>string</span>
 
+### containerStyle
+
+Container style of the event
+
+<span style={{color: "grey"}}>ViewStyle</span>
+
 ### Other props
 
 You can add more properties to use with **[renderEventContent](#)**

example/src/screens/Calendar.tsx

@@ -24,7 +24,7 @@ interface CalendarProps {
   navigation: NavigationProp<any>;
 }
 
-const generateColor = () => {
+const randLightColor = () => {
   return (
     'hsl(' +
     360 * Math.random() +
@@ -36,6 +36,16 @@ const generateColor = () => {
   );
 };
 
+const randColor = () => {
+  return (
+    '#' +
+    Math.floor(Math.random() * 16777215)
+      .toString(16)
+      .padStart(6, '0')
+      .toUpperCase()
+  );
+};
+
 const unavailableHour = {
   '0': [{ start: 0, end: 24 }],
   '1': [
@@ -98,7 +108,8 @@ const Calendar = ({ route, navigation }: CalendarProps) => {
       title: randomId,
       start: event.start,
       end: event.end,
-      color: generateColor(),
+      color: randLightColor(),
+      containerStyle: { borderColor: randColor(), borderWidth: 1 },
     };
     setEvents((prev) => [...prev, newEvent]);
   };

src/components/Timeline/DragEditItem.tsx

@@ -250,6 +250,7 @@ const DragEditItem = ({
               backgroundColor: event.color ? event.color : EVENT_DEFAULT_COLOR,
               top: defaultTopPosition,
             },
+            event.containerStyle,
             animatedStyle,
           ]}
         >

src/components/Timeline/EventBlock.tsx

@@ -1,3 +1,4 @@
+import isEqual from 'lodash/isEqual';
 import React, { memo } from 'react';
 import { StyleSheet, Text, TouchableOpacity } from 'react-native';
 import Animated, {
@@ -69,6 +70,7 @@ const EventBlock = ({
           width: event.width,
           opacity: eventOpacity,
         },
+        event.containerStyle,
         eventStyle,
       ]}
     >
@@ -89,7 +91,15 @@ const EventBlock = ({
   );
 };
 
-export default memo(EventBlock);
+const areEqual = (prev: EventBlockProps, next: EventBlockProps) => {
+  const isSameEvent = isEqual(prev.event, next.event);
+  const isSameSelectedId = prev.selectedEventId === next.selectedEventId;
+  const isSameColumnWidth = prev.columnWidth === next.columnWidth;
+  const isSameDayIndex = prev.dayIndex === next.dayIndex;
+  return isSameEvent && isSameSelectedId && isSameColumnWidth && isSameDayIndex;
+};
+
+export default memo(EventBlock, areEqual);
 
 const styles = StyleSheet.create({
   eventBlock: {

src/types.ts

@@ -1,4 +1,4 @@
-import type { GestureResponderEvent } from 'react-native';
+import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
 import type { LOCALES } from './constants';
 
@@ -179,6 +179,7 @@ export interface EventItem {
   end: string;
   title?: string;
   color?: string;
+  containerStyle?: StyleProp<ViewStyle>;
   [key: string]: any;
 }