feat: Work in progress

example/App.tsx

@@ -1,11 +1,12 @@
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { Calendar } from 'rn-calendar';
 
 export default function App() {
   return (
     <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app!</Text>
       <StatusBar style="auto" />
+      <Calendar value={new Date()} />
     </View>
   );
 }

example/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
-    "start": "expo start",
+    "start": "expo start -c",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web"
@@ -12,11 +12,12 @@
     "expo": "~49.0.7",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
-    "react-native": "0.72.3"
+    "react-native": "0.72.3",
+    "rn-calendar": "../"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@types/react": "~18.0.14",
+    "@types/react": "~18.2.14",
     "typescript": "^5.1.3"
   },
   "private": true

example/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
+    "jsx": "preserve",
     "strict": true
   }
 }

package.json

@@ -2,10 +2,11 @@
   "name": "rn-calendar",
   "version": "1.0.0",
   "description": "React Native Calendar",
-  "main": "index.js",
   "author": "Emir Marques - <emirdeliz@gmail.com>",
+  "main": "src/Calendar.tsx",
   "license": "MIT",
   "dependencies": {
+    "@expo/vector-icons": "^13.0.0",
     "react": "18.2.0",
     "react-native": "0.72.3",
     "styled-components": "^6.0.4"

src/Calendar.style.ts

@@ -1,17 +1,26 @@
 import styled from 'styled-components/native';
 
-const DAY_PADDING = 10;
+export const DAY_SIZE = 40;
 
 const CALENDAR_WIDTH = 300;
 
 export const Calendar = styled.View`
   width: ${CALENDAR_WIDTH}px;
+  border: solid 1px #F2F2F2;
+  border-radius: 10px;
+  padding: 8px;
 `;
 
-export const Row = styled.View`
-  flex-direction: row;
+export const DaysContainer = styled.View`
+  flex-flow: row wrap;
 `;
 
-export const Day = styled.TouchableOpacity`
-  padding: ${DAY_PADDING}px;
+export const DayLink = styled.View`
+  width: ${DAY_SIZE}px;
+  height: ${DAY_SIZE}px;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const Day = styled.Text`
 `;

src/Calendar.tsx

@@ -1,31 +1,51 @@
-import { memo, useState } from 'react';
-import * as S from './Calendar.style';
+import { ReactNode, memo, useState } from 'react';
 import { useCalendar } from './hooks/useCalendar';
-import { DaysWeek } from './components';
+import { DaysWeek, Button, MonthCurrent } from './components';
+import * as S from './Calendar.style';
 
 export interface CalendarProps {
   min?: Date;
   max?: Date;
   value?: Date;
+  monthLabel?: Array<ReactNode>;
+  weekLabel?: Array<ReactNode>;
 }
 
-export const Calendar = memo(({ min, max, value }: CalendarProps) => { 
-  const {
-    buildCalendarDay,
-    buildMonth,
-    dayOfWeekAsString,
-    monthsAsString
-  } = useCalendar();
+export const Calendar = memo(({
+  min,
+  max,
+  value,
+  monthLabel,
+  weekLabel
+}: CalendarProps) => { 
+  const { buildMonth } = useCalendar();
   const [calendarDate, setCalendarDate] = useState<Date>(value || new Date());
-
   const month = buildMonth(calendarDate, { min, max, value });
+
   return (
     <S.Calendar>
-      <DaysWeek />
-      {month.forEach((item, index) => { 
-        const day = index + 1;
-        <S.Day key={day}>{index + 1}</S.Day>
-      })}    
+      <MonthCurrent
+        monthLabel={monthLabel}
+        calendarDate={calendarDate}
+        updateCalendarDate={(d) => setCalendarDate(d)}
+      />
+      <DaysWeek weekLabel={weekLabel} />
+      <S.DaysContainer>
+        {month.map((item, index ) => { 
+          const { date, isDisabled, isObsolete, isSelected } = item;
+          const day = date.getDate();
+          return (
+            <S.DayLink key={index}>
+              <Button.Text
+                disabled={isDisabled || isObsolete}
+                fontWeight={isSelected ? 'bold' : 'normal'}
+              >
+                {day}
+              </Button.Text>
+            </S.DayLink>
+          );
+        })}
+      </S.DaysContainer>
     </S.Calendar>
   );
 })

src/components/Button/Button.style.ts

@@ -0,0 +1,10 @@
+import styled from 'styled-components/native';
+import { ButtonProps } from './Button';
+
+export const Button = styled.TouchableOpacity<ButtonProps>`
+  opacity: ${({ disabled }) => (disabled ? 0.3 : 1)};
+`;
+
+export const Label = styled.Text<{ fontWeight?: 'bold' | 'normal' }>`
+  font-weight: ${({ fontWeight }) => fontWeight || 'normal'};
+`;

src/components/Button/Button.tsx

@@ -0,0 +1,26 @@
+import { ReactNode, memo } from 'react';
+import * as S from './Button.style';
+
+export interface ButtonProps {
+  children?: ReactNode;
+  disabled?: boolean; 
+  onPress?: () => void;
+}
+
+const ButtonBase = memo(({ children, disabled, onPress }: ButtonProps) => {
+  return (
+    <S.Button disabled={disabled} onPress={onPress}>
+      {children}
+    </S.Button>
+  );
+});
+
+export const Button = (props: ButtonProps) => <ButtonBase {...props} />
+Button.Text = ({ children, fontWeight, ...props }: ButtonProps &
+  { fontWeight?: 'bold' | 'normal'; }) => (
+  <ButtonBase {...props}>
+    <S.Label fontWeight={fontWeight}>
+      {children}
+    </S.Label>
+  </ButtonBase>
+);

src/components/DaysWeek/DaysWeek.style.ts

@@ -1,9 +1,17 @@
 import styled from 'styled-components/native';
+import { DAY_SIZE } from '../../Calendar.style';
 
 export const DaysWeekContainer = styled.View`
+  flex-direction: row;
+`;
 
+export const DayWeekContainer = styled.View`
+  width: ${DAY_SIZE}px;
+  height: ${DAY_SIZE}px;
+  align-items: center;
+  justify-content: center;
 `;
 
 export const DayWeek = styled.Text`
-
+  font-weight: 800;
 `;

src/components/DaysWeek/DaysWeek.tsx

@@ -1,18 +1,24 @@
-import { memo } from "react";
+import { ReactNode, memo } from "react";
 import { useCalendar } from "../../hooks/useCalendar";
 import * as S from './DaysWeek.style';
 
-export const DaysWeek = memo(() => {
+interface DaysWeekProps { 
+  weekLabel?: Array<ReactNode>;
+}
+
+export const DaysWeek = memo(({ weekLabel }: DaysWeekProps) => {
   const daysIndex = [0, 1, 2, 3, 4, 5, 6];
   const { dayOfWeekAsString } = useCalendar();
   return (
     <S.DaysWeekContainer>
       {daysIndex.map((day) => {
         const key = day;
         return (
-          <S.DayWeek key={key}>
-            {dayOfWeekAsString(day)}
-          </S.DayWeek>
+          <S.DayWeekContainer key={key}>
+            <S.DayWeek>
+              {dayOfWeekAsString(day, weekLabel)}
+            </S.DayWeek>
+          </S.DayWeekContainer>
         );
       })}
     </S.DaysWeekContainer>

src/components/MonthCurrent/MonthCurrent.style.ts

@@ -0,0 +1,12 @@
+import styled from 'styled-components/native';
+
+export const MonthCurrent = styled.View`
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 5px;
+`;
+
+export const MonthYear = styled.Text`
+`;

src/components/MonthCurrent/MonthCurrent.tsx

@@ -0,0 +1,51 @@
+import { ReactNode, memo } from 'react';
+import { FontAwesome } from '@expo/vector-icons';
+import { Button } from '../Button/Button';
+import { useCalendar } from '../../hooks/useCalendar';
+import * as S from './MonthCurrent.style';
+
+interface MonthCurrentProps {
+  calendarDate: Date;
+  monthLabel?: Array<ReactNode>;
+  updateCalendarDate: (d: Date) => void;
+}
+
+export const MonthCurrent = memo(({
+  calendarDate,
+  monthLabel,
+  updateCalendarDate
+}: MonthCurrentProps) => { 
+  const { monthsAsString } = useCalendar();
+  const currentMonth = calendarDate.getMonth();
+  const monthName = monthsAsString(currentMonth, monthLabel);
+
+  const updateMonth = (monthIncrement: number) => { 
+    const newDate = new Date(calendarDate);
+    newDate.setMonth(newDate.getMonth() + monthIncrement);
+    updateCalendarDate(newDate);
+  }
+
+  const updateYear = (yearIncrement: number) => { 
+    const newDate = new Date(calendarDate);
+    newDate.setFullYear(newDate.getFullYear() + yearIncrement);
+    updateCalendarDate(newDate);
+  }
+
+  return (
+    <S.MonthCurrent>
+      <Button onPress={() => updateYear(-1)}>
+        <FontAwesome name="angle-double-left" color="black" />
+      </Button>
+      <Button onPress={() => updateMonth(-1)}>
+        <FontAwesome name="angle-left" color="black" />
+      </Button>
+      <S.MonthYear>{monthName} {String(calendarDate.getFullYear())}</S.MonthYear>
+      <Button onPress={() => updateMonth(1)}>
+        <FontAwesome name="angle-right" color="black" />
+      </Button>
+      <Button onPress={() => updateYear(1)}>
+        <FontAwesome name="angle-double-right" color="black" />
+      </Button>
+    </S.MonthCurrent>
+  );
+})

src/components/index.ts

@@ -1 +1,3 @@
-export * from './DaysWeek/DaysWeek';
+export * from './Button/Button';
+export * from './DaysWeek/DaysWeek';
+export * from './MonthCurrent/MonthCurrent';

src/hooks/useCalendar.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 import { CalendarProps } from "../Calendar";
 
 enum DaysOfWeek {
@@ -26,8 +27,8 @@ enum Months {
 }
 
 export const useCalendar = () => {
-  const dayOfWeekAsString = (dayIndex: number) => {
-    return [
+  const dayOfWeekAsString = (dayIndex: number, weekLabel?: Array<ReactNode>) => {
+    return weekLabel ? weekLabel[dayIndex] : [
       DaysOfWeek.MONDAY.substring(0, 3),
       DaysOfWeek.TUESDAY.substring(0, 3),
       DaysOfWeek.WEDNESDAY.substring(0, 3),
@@ -38,8 +39,8 @@ export const useCalendar = () => {
     ][dayIndex];
   };
 
-  const monthsAsString = (monthIndex: number) => {
-    return [
+  const monthsAsString = (monthIndex: number, monthLabel?: Array<ReactNode>) => {
+    return monthLabel ? monthLabel[monthIndex] : [
       Months.JANUARY,
       Months.FEBRUARY,
       Months.MARCH,
@@ -55,19 +56,23 @@ export const useCalendar = () => {
     ][monthIndex];
   };
 
-  const buildCalendarDay = (currentDate: Date, { value, min, max }: CalendarProps) => {
+  const buildCalendarDay = (
+    currentDate: Date,
+    isObsolete: boolean,
+    { value, min, max }: CalendarProps
+  ) => {
     const currentDay = currentDate.getDate();
     const isSelected =
       value?.getDate() === currentDay && value?.getMonth() === currentDate.getMonth();
-    const isObsolete = currentDate.getMonth() !== value?.getMonth();
     const dateDay = new Date(value?.getFullYear() || 0, value?.getMonth() || 0, currentDay);
-    const isDisabledDay =
+    const isDisabled =
       (min && dateDay.getTime() < min.getTime()) || (max && dateDay.getTime() > max.getTime());
 
     return {
       isSelected,
       isObsolete,
-      isDisabledDay,
+      isDisabled,
+      date: dateDay
     };
   };
 
@@ -89,15 +94,15 @@ export const useCalendar = () => {
     const days = [];
     while (dayMerge > 0) {
       lastMonth.setDate(dayDiff);
-      days.push(buildCalendarDay(lastMonth, { value, min, max }));
+      days.push(buildCalendarDay(lastMonth, true, { value, min, max }));
       dayMerge -= 1;
       dayDiff += 1;
     }
 
-    days.push(buildCalendarDay(currentDate, { value, min, max }));
+    days.push(buildCalendarDay(currentDate, false, { value, min, max }));
     currentDate.setDate(currentDate.getDate() + 1);
     while (currentDate.getDate() !== 1) {
-      days.push(buildCalendarDay(currentDate, { value, min, max }));
+      days.push(buildCalendarDay(currentDate, false, { value, min, max }));
       currentDate.setDate(currentDate.getDate() + 1);
     }
     return days;