【备忘录】引入React-Calendar组件

安装步骤

# npmを使う場合
npm i react-calendar

# yarnを使う場合
yarn add react-calendar

代码 (daima)

基本用法

import { useState } from 'react'
import Calendar from 'react-calendar'
import 'react-calendar/dist/Calendar.css' // カレンダーのcss

const MyCalendar = () => {
  const [value, setValue] = useState()

  return (
    <div>
      <Calendar
        value={value}
        onClickDay={(e) => setValue(e)}
      />
      <div>{value}</div>
    </div>
  )
}

CSS可以用于控制网页的样式和布局。

如果将星期日作为一周的结束，应用以下CSS

/* 土曜日だけ青色にする */
.react-calendar .react-calendar__month-view__days__day--weekend:nth-child(7n-1) {
  color: #00F;
}

/* active時の文字の色（選択後の日付の色） */
.react-calendar__tile--active {
  color: white !important;
}

/* 土曜を全部青色にしても今月以外は灰色にする */
.react-calendar .react-calendar__month-view__days__day--neighboringMonth {
  color: #757575 !important;
}

实施界面