FullCalendarとBoostrap Calendarではどちらを使おうか悩み中です！

Question

こんばんは！

現在、スマホに以下の表示ができるスケジュールを作成しています。
・日、週、月 のそれぞれの表示機能がある
・レスポンシブ（スマホでみても問題がないもの）

を開発しており、それで採用したカレンダー以下のものです。
・Bootstrap Calendar
http://bootstrap-calendar.azurewebsites.net/index-bs3.html

・FullCalendar
http://fullcalendar.io/docs/utilities/date_formatting_string/

最初はBootStrap Calendarで開発していたのですが、Viewを「日」表示にして、スマホで確認すると（画像は擬似的にブラウザを狭めています）一日の予定項目が以下のようにデザイン崩れをおこしました。

![イメージ説明]WIDTH:342

これまずいと思って次に、FullCalendarを見つけてスマホ用のスケジュール作成として開発していたのですが、どうも調べれば調べるほどレスポンシブデザインとして使った事例がなく、もし、FullCalendarをスマホ用のサイトでうまくご使用されている例がありましたらご教授していただけないでしょうか？

もしくは、他にも、「日」「週」「月」別に表示できスマホでも対応できるAPIをご存じの方がいらっしゃいましたらご教授いただけたらと思います。どうかよろしくお願いたします。

Answer 1

ある程度CSSが分かれば、Bootstrap Calendar の方が改良しやすいと思います。
レスポンシブデザインはメディアクエリに記述されています。Bootstrapの場合は最低のメディアクエリが768pxなので、320pxくらいまでのメディアクエリを追加して、カスタマイズするのはどうでしょうか？

@media screen and (min-width: 0px) and (max-device-width: 320px) {
  /* ここに 横幅 320pxのcssを記述 */
}
@media screen and (min-width: 321px) and (max-device-width: 767px) {
  /* ここに 横幅 321pxから767px のcssを記述 */
}

ぱっと見た感じですとcalendar.cssのmax-widthをメディアクエリごとに変える必要がありそうです。

#cal-day-box .day-event {
  position: relative;
  max-width: 200px; /* ここを100px くらいに調整する */
  overflow: hidden;
}

Answer 2

ありがとうございました！早速実践します！