p61-project/app/application/habits/history.tsx

import { useState } from "react"
import { Calendar } from "react-native-calendars"
import { SafeAreaView } from "react-native-safe-area-context"

const HistoryPage: React.FC = () => {
  const [selected, setSelected] = useState("")

  return (
    <SafeAreaView
      style={[
        {
          flex: 1,
          alignItems: "center",
          justifyContent: "center",
        },
      ]}
    >
      <Calendar
        onDayPress={(day) => {
          setSelected(day.dateString)
        }}
        markedDates={{
          "2023-03-01": { selected: true, marked: true, selectedColor: "blue" },
          "2023-03-02": { marked: true },
          "2023-03-03": { selected: true, marked: true, selectedColor: "blue" },
          [selected]: {
            selected: true,
            disableTouchEvent: true,
            selectedColor: "orange",
          },
        }}
        theme={{
          backgroundColor: "#000000",
          calendarBackground: "#000000",
          textSectionTitleColor: "#b6c1cd",
          selectedDayBackgroundColor: "#00adf5",
          selectedDayTextColor: "#ffffff",
          todayTextColor: "#00adf5",
          dayTextColor: "#2d4150",
          textDisabledColor: "#d9efff",
        }}
      />
    </SafeAreaView>
  )
}

export default HistoryPage