自分の手で未来を創るーlav0

自分のために、誰かのために、今ここにないもの、もっと良くしたいもの、何でも自分の手で創っていく。そして、作ったものを公開していきます

Rails カレンダーで期間検索する

投稿されたものをユーザーが期間で検索することができる機能を付ける際、スマホユーザーさんが日付を手入力するのはめんどくさい。そこでカレンダーで選べるようにするためにやったことメモ。

f:id:kslabo51:20191230222442j:plain

 

当然、こういう機能はどのアプリケーションにもつけていらっしゃると思うが、意外に大変だったので、実装時に参考にしたことを一緒にのっけます。

 

fontawesomeを使用し最終的には下記のように導入しました。

f:id:kslabo51:20191230220324p:plain

最初にぶち当たったのが、fontawesomeが反映しなかったこと。

カレンダーは開くけど、まず、ボタン部分のカレンダーマークがなかった。上記カレンダー内にあるような「←」や「→」や「🕐」のマークが最初、出てこなかった。

 

そこで、いったんfontawesomeをあきらめ、image_tagで下記のイラストを、カレンダー埋込んでみた。

f:id:kslabo51:20191230220446p:plain

これはこれでいいなとは思ったのですが、やはりもう少しfontawesomeをいろいろ調べてみようと思いなおしサイト検索。

 

fontawesomeについて記述されている部分があったので試してみた。

qiita.com

しかし、bundle installでエラー。`gem install sassc -v '2.2.1' が必要とのこと。

 

このエラーを調べてみると下記のサイトを発見!僕のローカルがCentOS 6系であることが原因の様子。それでこのサイトの方と同じようにCDNで実装することに。

kei178.me

application.html.erbのhead内にfontawesomeのkitsを入れるとうまくいった。

 

 

そうするとOK!できた! 最初の画像のように実装は完了。

 

次に日付に関して出る可能性のあるエラーを考察

7me.oji.0j0.jp

 

こちらもチェック

haayaaa.hatenablog.com

    

上記を参考にしながら自分のアプリケーションを修正し完了!

カレンダーで期間検索の実装ができました。

 

version Rails 5.1.6