# カレンダーの予定作成機能1 次に予定を作成できるようにします。 `feature/add-schedule-func`にて作業します。 ```bash git switch -c feature/add-schedule-func ``` 予定作成は、モーダルにて行うので、`react-modal`というライブラリをインストールしましょう。 ```bash npm i react-modal ``` また、`react-modal`の型もインストールします。 ```bash npm i -D @types/react-modal ``` では、`organisms`配下に`CreateScheduleModal.tsx`を作成しましょう。このコンポーネントにて、`react-modal`の`Modal`で全体を括ることで、モーダルとして表示することができます。こちらは`isOpen`という`onRequestClose`という`props`を受け取り、`isOpen`は`boolean`の値を受け取り、`true`の場合にモーダルが表示されます。onRequestCloseはモーダル外をクリックした際に発火する関数を渡し、通常では`isOpen`を`false`にするような関数を渡すことで、画面外をクリックした際にモーダルが閉じるようにします。

import Modal from "react-modal";

type PropsType = {
  isOpen: boolean;
  closeModal: () => void;
};

const customStyles = {
  content: {
    top: "50%",
    left: "50%",
    width: "30%",
    height: "50vh",
    transform: "translate(-50%, -50%)",
  },
};

export const CreateScheduleModal = ({
  isOpen,
  closeModal,
}: PropsType) => {
  return (
    <Modal isOpen={isOpen} style={customStyles} onRequestClose={closeModal}>
      <div>
        <h3 className="text-center text-3xl text-lime-800 font-bold pb-5">
          予定作成
        </h3>
      </div>
    </Modal>
  );
};

では、こちらのモーダルをカレンダーのナビゲーションにボタンを追加し、ボタンを押した際にモーダルが表示するようにしましょう。 `isOpen`というstateを定義し、`closeModal`というisOpenをfalseにする関数を定義します。そして、`予定作成`というボタンの`onClick`にて、`isOpen`を`true`として、`CreateScheduleModal`を呼び出すようにしましょう。

import { Dispatch, SetStateAction, useState } from "react"
import { addMonths } from "date-fns"
import { FaArrowAltCircleLeft, FaArrowAltCircleRight } from "react-icons/fa"
import { PrimaryBtn } from "../atoms/PrimaryBtn"
import { CreateScheduleModal } from "./CreateScheduleModal"

type PropsType = {
  setCurrentDate: Dispatch<SetStateAction<Date>>
};

export const CalendarNav = ({ setCurrentDate }: PropsType) => {
  const [isOpen, setIsOpen] = useState(false)
  const closeModal = () => setIsOpen(false)

  const changeToday = () => setCurrentDate(new Date())
  const changePrevMonth = () =>
    setCurrentDate((prevDate) => addMonths(prevDate, -1))
  const changeNextMonth = () =>
    setCurrentDate((prevDate) => addMonths(prevDate, 1))

  return (
    <div className="w-[80%] flex justify-between mb-2">
      <div className="flex items-center text-white gap-4">
        <FaArrowAltCircleLeft
          className="text-lime-800 text-2xl"
          onClick={changePrevMonth}
        />
        <PrimaryBtn size="sm" onClick={changeToday}>
          今日
        </PrimaryBtn>
        <FaArrowAltCircleRight
          className="text-lime-800 text-2xl"
          onClick={changeNextMonth}
        />
      </div>
      <PrimaryBtn size="sm" onClick={() => setIsOpen(true)}>
        予定作成
      </PrimaryBtn>
      <CreateScheduleModal
        isOpen={isOpen}
        closeModal={closeModal}
      />
    </div>
  )
}

これで`予定作成`というボタンを押した際に、モーダルが表示されるようになったかと思います。

ここまでの作業をcommitしましょう。 ```bash git add . ``` ```bash git commit ``` commitメッセージは ``` feat: カレンダーナビゲーションに予定作成のボタンを追加し、モーダルを表示するようにした ``` としましょう。