diff --git a/src/calendar/day/basic/index.tsx b/src/calendar/day/basic/index.tsx
index ae251e40b9..4b36997c0b 100644
--- a/src/calendar/day/basic/index.tsx
+++ b/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}
/>
);
};
diff --git a/src/calendar/day/marking/index.tsx b/src/calendar/day/marking/index.tsx
index 4d98a561e3..0269683fa3 100644
--- a/src/calendar/day/marking/index.tsx
+++ b/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,6 +125,7 @@ const Marking = (props: MarkingProps) => {
const dotProps = extractDotProps(props);
let key = index;
let color = dotColor;
+ const plusSignColor = plusColor;
if (item) {
if (item.key) {
@@ -118,6 +133,9 @@ const Marking = (props: MarkingProps) => {
}
color = selected && item.selectedDotColor ? item.selectedDotColor : item.color;
}
+ if (item && item.extra && showPlus) {
+ return ;
+ }
return ;
};
diff --git a/src/calendar/day/plus/index.tsx b/src/calendar/day/plus/index.tsx
new file mode 100644
index 0000000000..cd62ca7055
--- /dev/null
+++ b/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 (
+
+ +
+
+ );
+};
+
+export default Plus;
diff --git a/src/calendar/day/plus/style.ts b/src/calendar/day/plus/style.ts
new file mode 100644
index 0000000000..6523efb107
--- /dev/null
+++ b/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'] || {})
+ });
+}
diff --git a/src/componentUpdater.ts b/src/componentUpdater.ts
index a66c5faee8..0ec0c60003 100644
--- a/src/componentUpdater.ts
+++ b/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,
diff --git a/src/style.ts b/src/style.ts
index a874d42482..bdb707b442 100644
--- a/src/style.ts
+++ b/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;