HTML
CSS
slick.js
pug
NIJIBOXDay 12

レスポンシブのウィークリーカレンダーを作ってみた

More than 1 year has passed since last update.

採用サイトでよく見かける「この人の1週間のスケジュールをcheck!」的な、1週間表示のカレンダーを作ってみました。

caleder-pc.png
calender-sp.png

よくある〜こういうの〜!

仕様

  1. PC表示だと月〜金の5日分、SPだと1日分のスケジュールが表示される
  2. SP表示では、スワイプか前後ボタン押下で表示されるスケジュールが切り替わる
  3. SP表示で予定をスワイプした際に、時間の列は一緒にスワイプされない
  4. ボタンが付いてる予定をクリックすると、コメントが記載されたモーダルが出てくる

ん〜どうやって作ろうかな〜

ざっくりとした方針

  • ソース使い回していろんな予定のカレンダー作りたいし、修正はフロント側で完結させたいので、予定部分を画像で貼るのはナシ
  • tableタグで組むのはダルいしレスポンシブ化しんどそうだからそれもナシ
  • 他の人が直感的に編集できるような作りにする
  • SPでスワイプ&ボタン押してスライド、ていうのは、プラグインのslick.jsで実装しちゃえばいいんじゃない?

本邦初公開のソースコード

で、こうしました。htmlは閉じタグがいっぱい出てきて萎えるのでpugで書いています。
Schedule_Tableというでかいdivの中に6つのSchedule_TableItem(時間の列+月〜金の予定列)が入っているという構造です。
ちょいちょい入っているaタグは、モーダルのトリガーです(モーダルの中身の記述は、長くなるんで省略しました)。

schedule.jade
.Schedule_Table
  .Schedule_TableItem.head
    .heading
    .content
      - for (var i = 10; i < 23; i++) {
        .block.t-1: p #{[i]}:00
      - }
  .Schedule_TableInner.slider
    .Schedule_TableItem.column.mon
      p.heading 月
      .content
        .block.t-2: p プログラム制作
        .block.t-1: p ごはん
        a.block.t-7(href="#mon"): p プログラム制作
          span.btn
        .block.t-3.t-off
    .Schedule_TableItem.column.tue
      p.heading 火
      .content
        a.block.t-2(href="#tue"): p プログラム制作
          span.btn
        .block.t-1: p ごはん
        .block.t-2: p 資料作成
        .block.t-2: p Skypeミーティング
        .block.t-1: p 社内ミーティング
        .block.t-2: p 社外で打合せ
        .block.t-3.t-off
    .Schedule_TableItem.column.wed
      p.heading 水
      .content
        a.block.t-2(href="#wed"): p 社内ミーティング
          span.btn
        .block.t-1: p ごはん
        .block.t-4: p 資料作成
        .block.t-2: p プログラム制作
        .block.t-4.t-off
    .Schedule_TableItem.column.thu
      p.heading 木
      .content
        .block.t-2: p プログラム制作
        .block.t-1: p ごはん
        a.block.t-4(href="#thu"): p 資料作成
          span.btn
        .block.t-3: p 社外で打合せ
        .block.t-3.t-off
    .Schedule_TableItem.column.fri
      p.heading 金
      .content
        .block.t-2: p プログラム制作
        .block.t-1: p ごはん
        .block.t-2: p ミーティング
        a.block.t-2(href="#fri"): p 資料作成
          span.btn
        .block.t-3: p プログラム制作
        .block.t-3.t-off

ざっくりとした解説

カレンダーの10:00〜22:00にあたる部分のheightを予め指定しておいて、こう。

.Schedule_TableItem .content .block.t-1 {
  height: calc(100% / 13 * 1);
}
.Schedule_TableItem .content .block.t-2 {
  height: calc(100% / 13 * 2);
}
/* 以下略 同じ要領でこれを.t-13まで繰り返す */

1時間の予定なら.t-1、4時間の予定なら.t-4といった感じでクラスをつければ、希望の高さに収まるようにしてみました。

ちなみに.t-offとスタイルを指定すると、予定ナシ部分の、斜線のスタイルが当たるようにしています。
この斜線もcssで実装してみました。

.Schedule_TableItem .content .block.t-off {
  background-image: linear-gradient(-45deg, #fff 40%, #cecece 40%, #cecece 50%, #fff 50%, #fff 90%, #cecece 90%, #cecece);
  background-size: 8px 8px;
}

SP版の実装を頑張る

超お手軽にカルーセルが実装できる素敵なプラグイン、slick.jsが大活躍。
http://kenwheeler.github.io/slick/
.sliderというクラスが付いた要素内の子要素がカルーセル化されるようにしました。

さてさて今こんな感じです。
calender-sp-failed.png

SP版のデザインは、この「火」というタブが画面いっぱいに広がってるので、これに対応します。
曜日の列のwidthは画面幅いっぱいに指定、対して固定表示となる時間の列に関しては、position:absoluteで位置固定&z−index指定で最前面に表示させる、という手を使いました。固定された要素の背後でカルーセル要素がしゅるしゅる動くようにしたわけですね。
んでこれだけだと文字の位置がずれるので、padding-leftで時間の列と同じ分だけの幅を指定して、

.Schedule_TableItem.column{
  width: 94.5vw;
}
.Schedule_TableItem.head{
  border: none;
  width: 21.875vw;
  position: absolute;
  bottom: 0;
  z-index: 10;
}
.Schedule_TableItem.column .block{
  padding-left: 21.875vw;
}

完成〜〜〜!!!

まとめ

作るのはまあまあ大変だったけど、割とシンプルな記述&使い回しやすいやつができたんじゃない??という気持ちです。
実はこれ、今リニューアル画策中の弊社中途採用サイトで作ったやつだったりするんで(ここに挙げたソースはまあそれを流用したサンプルですけども)、今後公開されたらここにリンク貼ったりしたいな〜。