Edited at

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

More than 3 years have passed since last update.


概要

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

画面上でその提出期限をユーザに示す場合、

%Y/%m/%d %H:%M 形式の日付文字列を表示するのは素っ気ないと感じました。

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


Himekuri


コード


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: '締切なし')