浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【react】react-calendarの装飾をCalendar.cssを使ってカスタマイズする

githubでも紹介されていますが、基本的にはreact-calendarの

見た目をカスタマイズしたい場合は

node_modules内にある’react-calendar/dist/Calendar.css’を以下のようにして

インポートします。

import ‘react-calendar/dist/Calendar.css’;

完了したところでnode_modules/react-calendar/dist/Calendar.cssを編集→ビルド。

例:格子をつけたい場合。


.react-calendar button {
  margin: 0;
  border: 1px solid #a0a096;
  outline: none;
}

例:日にちをタップした時のタイルの色を変更したい場合


.react-calendar__tile--active {
  background: #006edc;
  border-radius: 50%;
  color: white;
}

で見た目が変わっていれば成功です。
必要最低限のコンポーネントは全て揃っているので、どれを変えればいいのか

わからないということはないはず、です。

  • この記事いいね! (0)