日付を日めくりカレンダー風に表示してみよう

概要

例えば、アンケートやレポートをユーザに提出してもらうシステムを想定します。

画面上でその提出期限をユーザに示す場合、
%Y/%m/%d %H:%M 形式の日付文字列を表示するのは素っ気ないと感じました。

そこで今回、期限日を日めくりカレンダー風に表示するようにしてみました。

例

コード

CSS (SCSS)

himekuri.css.scss

.himekuri-calendar {
  $width: 48px;

  font-weight: bold;
  padding: 0 10px;
  text-align: center;

  .himekuri-calendar__year {
    width: $width;
    font-size: 10px;
  }

  .himekuri-calendar__month {
    border-width: 1px;
    border-style: solid;
    color: #FFFFFF;
    width: $width;
    font-size: 10px;
  }

 .himekuri-calendar__date {
    background-color: #FFFFFF;
    border-width: 1px;
    border-style: solid;
    border-bottom: none;
    width: $width;
    margin-top: -2px;
    font-size: 22px;
  }

  .himekuri-calendar__day {
    background-color: #FFFFFF;
    border-width: 1px;
    border-style: solid;
    border-top: none;
    width: $width;
    margin-top: -4px;
    padding-bottom: 4px;
    font-size: 10px;
  }

  .himekuri-calendar__word {
    background-color: #FFFFFF;
    width: $width;
    font-size: 11px;
  }
}

@mixin himekuri-calendar($color) {
  .himekuri-calendar__year {
    color: $color;
  }

  .himekuri-calendar__month {
    background-color: $color;
    border-color: $color;
  }

  .himekuri-calendar__date {
    color: $color;
    border-color: $color;
  }

  .himekuri-calendar__day {
    color: $color;
    border-color: $color;
  }

  .himekuri-calendar__word {
    color: $color;
    border-color: $color;
  }
}

.himekuri-calendar {
  @include himekuri-calendar(#2C3E50);
}

.himekuri-calendar.muted {
  @include himekuri-calendar(#B4BCC2);
}

.himekuri-calendar.info {
  @include himekuri-calendar(#3498DB);
}

.himekuri-calendar.warning {
  @include himekuri-calendar(#F39C12);
}

.himekuri-calendar.danger {
  @include himekuri-calendar(#E74C3C);
}

Helper

application_helper.rb

def himekuri_calendar(date: nil, status: nil, word: nil)
  calendar_classes = ['himekuri-calendar']
  calendar_classes << status if status

  content_tag(:div, class: calendar_classes * ' ') do
    concat(content_tag(:div, class: 'himekuri-calendar__year') do
      date.try(:strftime, '%Y') || '　'
    end)
    concat(content_tag(:div, class: 'himekuri-calendar__month') do
      date.try(:strftime, '%m') || '-'
    end)
    concat(content_tag(:div, class: 'himekuri-calendar__date') do
      date.try(:strftime, '%d') || '-'
    end)
    concat(content_tag(:div, class: 'himekuri-calendar__day') do
      date ? I18n.l(date, format: '(%a)') : '　'
    end)
    concat(content_tag(:div, class: 'himekuri-calendar__word') do
      word
    end)
  end
end

HTML (Slim)

usage.html.slim

/ 期限が迫ってるよ！ … 赤色
= himekuri_calendar(date: report1.term, status: 'danger',  word: '締切')
/ 期限が近いよ！ … 橙色
= himekuri_calendar(date: report2.term, status: 'warning', word: '締切')
/ 期限はないよ♪ … 紺色
= himekuri_calendar(date: report3.term, word: '締切なし')