From 7325f9526ae384c161d547d3ae2928d380ed288e Mon Sep 17 00:00:00 2001 From: carlosferreira23 Date: Thu, 24 Oct 2024 00:20:08 -0300 Subject: [PATCH 1/2] feat: Customize by day of the week --- src/calendar/day/basic/index.tsx | 20 ++++++++++++++++++-- src/calendar/day/basic/style.ts | 14 ++++++++++++++ src/interface.ts | 12 ++++++++++++ 3 files changed, 44 insertions(+), 2 deletions(-) diff --git a/src/calendar/day/basic/index.tsx b/src/calendar/day/basic/index.tsx index ef978170b3..cb25ce3121 100644 --- a/src/calendar/day/basic/index.tsx +++ b/src/calendar/day/basic/index.tsx @@ -1,7 +1,7 @@ import React, {Fragment, useCallback, useRef} from 'react'; import {TouchableOpacity, Text, View, ViewProps} from 'react-native'; -import {xdateToData} from '../../../interface'; +import {getWeekDayNumber, xdateToData} from '../../../interface'; import {Theme, DayState, MarkingTypes, DateData} from '../../../types'; import styleConstructor from './style'; import Marking, {MarkingProps} from '../marking'; @@ -58,7 +58,16 @@ const BasicDay = (props: BasicDayProps) => { const isMultiPeriod = markingType === Marking.markings.MULTI_PERIOD; const isCustom = markingType === Marking.markings.CUSTOM; const dateData = date ? xdateToData(date) : undefined; - + const weekDayNumber = date ? getWeekDayNumber(date) : undefined; + const weekDayStyles = { + 0: 'sunday', + 1: 'monday', + 2: 'tuesday', + 3: 'wednesday', + 4: 'thursday', + 5: 'friday', + 6: 'saturday', + }; const shouldDisableTouchEvent = () => { const {disableTouchEvent} = _marking; let disableTouch = false; @@ -84,6 +93,8 @@ const BasicDay = (props: BasicDayProps) => { } } else if (isToday) { styles.push(style.current.today); + } else if (typeof weekDayNumber === 'number' && weekDayStyles[weekDayNumber]) { + styles.push(style.current[weekDayStyles[weekDayNumber]]); } //Custom marking type @@ -112,6 +123,11 @@ const BasicDay = (props: BasicDayProps) => { styles.push(style.current.todayText); } else if (isInactive) { styles.push(style.current.inactiveText); + } else if (typeof weekDayNumber === 'number' && weekDayStyles[weekDayNumber]) { + const weekDayNumberTextStyle = `${weekDayStyles[weekDayNumber]}Text`; + if (style.current[weekDayNumberTextStyle]) { + styles.push(style.current[weekDayNumberTextStyle]); + } } //Custom marking type diff --git a/src/calendar/day/basic/style.ts b/src/calendar/day/basic/style.ts index 81bb339a7d..eede25dac1 100644 --- a/src/calendar/day/basic/style.ts +++ b/src/calendar/day/basic/style.ts @@ -41,6 +41,20 @@ export default function styleConstructor(theme: Theme = {}) { selectedText: { color: appStyle.selectedDayTextColor }, + sunday: {}, + sundayText: {}, + monday: {}, + mondayText: {}, + tuesday: {}, + tuesdayText: {}, + wednesday: {}, + wednesdayText: {}, + thursday: {}, + thursdayText: {}, + friday: {}, + fridayText: {}, + saturday: {}, + saturdayText: {}, disabledText: { color: appStyle.textDisabledColor }, diff --git a/src/interface.ts b/src/interface.ts index 14ab054eb0..08c3efd7b8 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -52,3 +52,15 @@ export function toMarkingFormat(d: XDate) { } return 'Invalid Date'; } + +export function getWeekDayNumber(date: XDate | string) { + let parsedDate; + if (typeof date === 'string') { + parsedDate = new XDate(date); + } else if (date instanceof XDate) { + parsedDate = date; + } else { + return 'Invalid Date'; + } + return parsedDate.getDay(); +} \ No newline at end of file From 872d2ff6a4a4afa62c8d06bb89982140fee257b4 Mon Sep 17 00:00:00 2001 From: carlosferreira23 Date: Mon, 25 Nov 2024 09:58:27 -0300 Subject: [PATCH 2/2] fix: week day styles --- src/calendar/day/basic/index.tsx | 11 +++++------ src/interface.ts | 15 ++------------- 2 files changed, 7 insertions(+), 19 deletions(-) diff --git a/src/calendar/day/basic/index.tsx b/src/calendar/day/basic/index.tsx index cb25ce3121..07e0630b04 100644 --- a/src/calendar/day/basic/index.tsx +++ b/src/calendar/day/basic/index.tsx @@ -1,7 +1,7 @@ import React, {Fragment, useCallback, useRef} from 'react'; import {TouchableOpacity, Text, View, ViewProps} from 'react-native'; -import {getWeekDayNumber, xdateToData} from '../../../interface'; +import {xdateToData} from '../../../interface'; import {Theme, DayState, MarkingTypes, DateData} from '../../../types'; import styleConstructor from './style'; import Marking, {MarkingProps} from '../marking'; @@ -58,7 +58,6 @@ const BasicDay = (props: BasicDayProps) => { const isMultiPeriod = markingType === Marking.markings.MULTI_PERIOD; const isCustom = markingType === Marking.markings.CUSTOM; const dateData = date ? xdateToData(date) : undefined; - const weekDayNumber = date ? getWeekDayNumber(date) : undefined; const weekDayStyles = { 0: 'sunday', 1: 'monday', @@ -93,8 +92,8 @@ const BasicDay = (props: BasicDayProps) => { } } else if (isToday) { styles.push(style.current.today); - } else if (typeof weekDayNumber === 'number' && weekDayStyles[weekDayNumber]) { - styles.push(style.current[weekDayStyles[weekDayNumber]]); + } else if (typeof dateData?.weekDay === 'number' && weekDayStyles[dateData?.weekDay]) { + styles.push(style.current[weekDayStyles[dateData?.weekDay]]); } //Custom marking type @@ -123,8 +122,8 @@ const BasicDay = (props: BasicDayProps) => { styles.push(style.current.todayText); } else if (isInactive) { styles.push(style.current.inactiveText); - } else if (typeof weekDayNumber === 'number' && weekDayStyles[weekDayNumber]) { - const weekDayNumberTextStyle = `${weekDayStyles[weekDayNumber]}Text`; + } else if (typeof dateData?.weekDay === 'number' && weekDayStyles[dateData?.weekDay]) { + const weekDayNumberTextStyle = `${weekDayStyles[dateData?.weekDay]}Text`; if (style.current[weekDayNumberTextStyle]) { styles.push(style.current[weekDayNumberTextStyle]); } diff --git a/src/interface.ts b/src/interface.ts index 08c3efd7b8..fd2df7e0a2 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -15,7 +15,8 @@ export function xdateToData(date: XDate | string) { month: d.getMonth() + 1, day: d.getDate(), timestamp: new XDate(dateString, true).getTime(), - dateString: dateString + dateString: dateString, + weekDay: d.getDay(), }; } @@ -51,16 +52,4 @@ export function toMarkingFormat(d: XDate) { return year + '-' + doubleDigitMonth + '-' + doubleDigitDay; } return 'Invalid Date'; -} - -export function getWeekDayNumber(date: XDate | string) { - let parsedDate; - if (typeof date === 'string') { - parsedDate = new XDate(date); - } else if (date instanceof XDate) { - parsedDate = date; - } else { - return 'Invalid Date'; - } - return parsedDate.getDay(); } \ No newline at end of file