[react calendar] カレンダーを使って予約機能を作ろう＿１

韓国のIT教室に通い始めて３ヶ月が経った。
そして、みんなが心配していたチームプロジェクトが始まった。
第１プロゼクトのテーマは「リアルタイムで病院の予約システムを作る」

そこで私はメインの機能である予約ページを担当することになった。

この３ヶ月間で習ったこと以外のものを調べて作り上げなきゃいけなくなった。
最初はどんなページにすればいいのか頭に浮かばなくてボッとしていたが、とりあえずカレンダーが必要なのではないかと気づいた。

カレンダーを作ったこのは一度もなく、とりあえず「react calendar」と検索してみたらそのままのライブラリーが出てきた。

ライブラリーを使ったこともない。
とりあえずやるしかない。

React Calendar ダウンロード

npm i react-calendar

日付けなど計算する

  //minDate と　maxDateを設定して他はクリックできないように設定
  const minDate = new Date(); 
  minDate.setDate(minDate.getDate()+1) // 現在＋１にして過去は選択不可

  const maxDate = new Date();
  maxDate.setMonth(maxDate.getMonth() + 3); //　月に＋３をして３ヶ月後は選択不可
  
  // 選択中の日 update
  const [value, onChange] = useState(minDate) //minDateで初期設定


  //週末計算
  const isWeekend = (date) => {
    const day = date.getDay();
    return day == 6 || day == 0; // 6:土曜日,0:日曜日
  };


   // tileDisabled を使って週末は選択不可能にする
  const tileDisabled = ({ date }) => {
    return isWeekend(date);
  };

return（）の中で <Calendar>　呼び出す

<Calendar
  onChange={onChange} 
  value={value} 
  showNeighboringMonth={false}
  next2Label={null}  次のbuttonを隠す
  prev2Label={null} 前のbuttonを隠す
  minDetail="year"  
  minDate={minDate}
  maxDate={maxDate}
  tileDisabled={tileDisabled}
/>

Reactカレンダーのデザイン

Reactカレンダーは、CSSのクラス名がすでに保存されているため、適用が簡単だった。
私は次のようにデザインをした。

.react-calendar__navigation__label  {
  /*  上段の年、月 */
  font-size: 17px;
  font-weight: 600;
  color: rgb(0, 0, 0);
}


/* 月の　navigation button */
.react-calendar__navigation button:enabled:hover ,
.react-calendar__navigation button:enabled:focus,
.react-calendar__navigation button
{
 
  background-color: rgb(255, 255, 255);
  font-size: 1.2rem;
  border-radius: 50px;
}


/* 年 navigation button */
.react-calendar__navigation button:nth-child(2),
.react-calendar__navigation button:nth-child(2):enabled:hover,
.react-calendar__navigation button:nth-child(2):enabled:focus{
  background-color: white;
  /* border-radius: 0px; */
}


.react-calendar__month-view__weekdays__weekday {
  /* 曜日 css */
    font-size: 1rem;
    font-weight: 600;
}


.react-calendar__month-view__weekdays__weekday abbr {
  text-decoration: none;
}


.react-calendar__month-view__weekdays__weekday--weekend abbr[title="일요일"]{
  color: red;
}
.react-calendar__month-view__weekdays__weekday--weekend abbr[title="토요일"]{
  color: blue;
}


.react-calendar__month-view__weekdays__weekday--weekend {
  color: #0050B5;
}


.react-calendar__tile {
  color: black;
  text-align: center;
}


.react-calendar__month-view__days__day-names,
  .react-calendar__month-view__days__day {
    font-family: 'Arial', sans-serif;
    font-size: 15px;
  }


.react-calendar__tile--now {
 /* 今日 */
  abbr{
    color:rgb(255, 0, 0);
  }
}


.react-calendar__tile--now::after{
  content: '*';
  color:rgb(255, 0, 0);
}


.react-calendar__tile--active {
  /* 現在選択されている日  */
  background: var( #0050B5);
  color: white;
  border-radius: 15px;
}


.react-calendar__tile:enabled:hover,
.react-calendar__tile:enabled:focus {
  /* hover */
  background: var(--festie-primary-orange, #0050B5);
  border-radius: 15px;
  color: white;
}


/* disabled　 */
.react-calendar__tile:disabled {
  background-color:white;
  color: darkgrey;
  border-radius: 15px;
}

次の通りにカレンダーが完成した。
韓国でプロゼクトを作っているのでページは全部韓国語になっている

次回は診療科目の選択や、予約中の時間帯を表すコード、予約できない時間帯のボタンはクリックできないようにするなどを投稿する予定だ。