feat: Add showPlus option for multi-dot marking

src/calendar/day/basic/index.tsx

@@ -15,6 +15,10 @@ export interface BasicDayProps extends ViewProps {
   marking?: MarkingProps;
   /** Date marking style ('dot' | 'multi-dot' | 'period' | 'multi-period' | 'custom'). Default = 'dot' */
   markingType?: MarkingTypes;
+  /** Show plus sign for multi-dot marking type */
+  showPlus?: boolean;
+  /** Plus sign color */
+  plusColor?: string;
   /** onPress callback */
   onPress?: (date?: DateData) => void;
   /** onLongPress callback */
@@ -39,6 +43,8 @@ const BasicDay = (props: BasicDayProps) => {
     onLongPress,
     markingType,
     marking,
+    showPlus, 
+    plusColor,
     state,
     disableAllTouchEventsForDisabledDays,
     disableAllTouchEventsForInactiveDays,
@@ -144,6 +150,8 @@ const BasicDay = (props: BasicDayProps) => {
         dotColor={dotColor}
         dots={dots}
         periods={periods}
+        showPlus={showPlus} 
+        plusColor={plusColor}
       />
     );
   };

src/calendar/day/marking/index.tsx

@@ -6,6 +6,7 @@ import {Theme, MarkingTypes} from '../../../types';
 import {extractDotProps} from '../../../componentUpdater';
 import styleConstructor from './style';
 import Dot, {DotProps} from '../dot';
+import Plus from '../plus';
 
 export enum Markings {
   DOT = 'dot',
@@ -50,6 +51,8 @@ export interface MarkingProps extends DotProps {
   dotColor?: string;
   //multi-dot
   dots?: DOT[];
+  showPlus?: boolean;
+  plusColor?: string;
   //multi-period
   periods?: PERIOD[];
   startingDay?: boolean;
@@ -59,7 +62,7 @@ export interface MarkingProps extends DotProps {
 }
 
 const Marking = (props: MarkingProps) => {
-  const {theme, type, dots, periods, selected, dotColor} = props;
+  const {theme, type, dots, periods, selected, dotColor, showPlus, plusColor} = props;
   const style = useRef(styleConstructor(theme));
 
   const getItems = (items?: DOT[] | PERIOD[]) => {
@@ -69,6 +72,17 @@ const Marking = (props: MarkingProps) => {
         return o.color;
       });
 
+      if (type === Markings.MULTI_DOT && showPlus) {
+        const maxDots = 3;
+        const displayDots = validItems.slice(0, maxDots);
+        const hasExtraDots = validItems.length > maxDots;
+        const rendered = displayDots.map((item, index) => renderDot(index, item));
+        if (hasExtraDots) {
+          rendered.push(renderDot(undefined, { extra: true, key: 'extra' }));
+        }
+        return rendered;
+      }
+
       return validItems.map((item, index) => {
         return type === Markings.MULTI_DOT ? renderDot(index, item) : renderPeriod(index, item);
       });
@@ -111,13 +125,17 @@ const Marking = (props: MarkingProps) => {
     const dotProps = extractDotProps(props);
     let key = index;
     let color = dotColor;
+    const plusSignColor = plusColor;
 
     if (item) {
       if (item.key) {
         key = item.key;
       }
       color = selected && item.selectedDotColor ? item.selectedDotColor : item.color;
     }
+    if (item && item.extra && showPlus) {
+      return <Plus {...dotProps} key={key} color={plusSignColor} marked/>;
+    }
 
     return <Dot {...dotProps} key={key} color={color}/>;
   };

src/calendar/day/plus/index.tsx

@@ -0,0 +1,29 @@
+import React, {useRef} from 'react';
+import {View, Text} from 'react-native';
+import styleConstructor from './style';
+import {Theme} from '../../../types';
+
+export interface PlusProps {
+  theme?: Theme;
+  color?: string;
+  marked?: boolean;
+}
+
+const Plus = ({theme, marked, color}) => {
+  const style = useRef(styleConstructor(theme));
+  const plusStyle = [style.current.plus];
+  const plusTextStyle = [style.current.plusText];
+
+  if (marked) {
+    if (color) {
+      plusTextStyle.push({color});
+    }
+  }
+  return (
+    <View style={plusStyle}>
+      <Text style={plusTextStyle}>+</Text>
+    </View>
+  );
+};
+
+export default Plus;

src/calendar/day/plus/style.ts

@@ -0,0 +1,24 @@
+import {StyleSheet} from 'react-native';
+import * as defaultStyle from '../../../style';
+import {Theme} from '../../../types';
+
+export default function styleConstructor(theme: Theme = {}) {
+  const appStyle = {...defaultStyle, ...theme};
+  return StyleSheet.create({
+    plus: {
+      width: 5,
+      height: 5,
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'relative'
+    },
+    plusText: {
+      fontSize: 7,
+      lineHeight: 6.25,
+      fontWeight: 'bold',
+      color: appStyle.plusColor,
+      textAlign: 'center'
+    },
+    ...(theme['stylesheet.plus'] || {})
+  });
+}

src/componentUpdater.ts

@@ -64,6 +64,8 @@ export function extractDayProps(props: CalendarProps) {
     state,
     marking,
     markingType,
+    showPlus,
+    plusColor,
     theme,
     onPress,
     onLongPress,
@@ -78,6 +80,8 @@ export function extractDayProps(props: CalendarProps) {
     state,
     marking,
     markingType,
+    showPlus,
+    plusColor,
     theme,
     onPress,
     onLongPress,

src/style.ts

@@ -24,6 +24,8 @@ export const todayButtonFontSize = 14;
 export const textDayStyle = undefined;
 export const dotStyle = undefined;
 export const arrowStyle = undefined;
+export const plusStyle = undefined;
+export const plusTextStyle = undefined;
 
 export const calendarBackground = FOREGROUND_COLOR;
 
@@ -41,6 +43,7 @@ export const selectedDotColor = FOREGROUND_COLOR;
 export const disabledDotColor = DISABLED_COLOR;
 export const inactiveDotColor = DISABLED_COLOR;
 export const todayDotColor = SECONDARY_TEXT_COLOR;
+export const plusColor = '#808080';
 export const arrowColor = SECONDARY_TEXT_COLOR;
 export const disabledArrowColor = DISABLED_COLOR;
 export const monthTextColor = DEFAULT_TEXT_COLOR;