Q&A
前提・実現したいこと
現在、以下のサイトを参考に rails + fullcalendar を用いて、イベント予約アプリを開発しています。
【Rails】 5分でFullCalandar実装する方法
【初心者向け・動画付き】Railsで日時をフォーマットするときはstrftimeよりも、lメソッドを使おう
その中で、以下の画像のように日付を表示させたいのですが、公式ドキュメントや Github Issues にも参考になりそうな記事がなかったのでこちらでご質問させていただきました。
現在の画面
実現したい画面
該当のソースコード
applicationjs
1// This is a manifest file that'll be compiled into application.js, which will include all the files 2// listed below. 3// 4// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's 5// vendor/assets/javascripts directory can be referenced here using a relative path. 6// 7// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 8// compiled file. JavaScript code in this file should be added after the last require_* statement. 9// 10// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 11// about supported directives. 12// 13//= require rails-ujs 14//= require activestorage 15//= require turbolinks 16//= require_tree . 17//= require jquery 18//= require moment 19//= require fullcalendar 20 21$(function () { 22 // 画面遷移を検知 23 $(document).on('turbolinks:load', function () { 24 if ($('#calendar').length) { 25 26 function Calendar() { 27 return $('#calendar').fullCalendar({ 28 }); 29 } 30 function clearCalendar() { 31 $('#calendar').html(''); 32 } 33 34 $(document).on('turbolinks:load', function () { 35 Calendar(); 36 }); 37 $(document).on('turbolinks:before-cache', clearCalendar); 38 39 //events: '/events.json', 以下に追加 40 $('#calendar').fullCalendar({ 41 events: '/events.json', 42 //カレンダー上部を年月で表示させる 43 titleFormat: 'YYYY年 M月', 44 // 月名称 45 monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], 46 // 月名称 47 monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], 48 dayNames: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'], 49 //曜日を日本語表示 50 dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'], 51 //ボタンのレイアウト 52 header: { 53 left: 'prev, next today', 54 center: 'title', 55 right: 'month, agendaWeek, agendaDay' 56 }, 57 firstDay: 1, // 1:月曜日 58 weekends: true, 59 allDaySlot: true, 60 weekMode: 'fixed', 61 defaultView: 'month', 62 businessHours: true, 63 //終了時刻がないイベントの表示間隔 64 defaultTimedEventDuration: '03:00:00', 65 buttonText: { 66 today: '今日', 67 month: '月', 68 week: '週', 69 day: '日' 70 }, 71 // Drag & Drop & Resize 72 editable: true, 73 selectable: true, 74 //イベントの時間表示を２４時間に 75 timeFormat: "HH:mm", 76 //イベントの色を変える 77 eventColor: '#87cefa', 78 //イベントの文字色を変える 79 eventTextColor: '#000000', 80 eventRender: function (event, element) { 81 element.css("font-size", "0.8em"); 82 element.css("padding", "5px"); 83 } 84 }); 85 } 86 }); 87}); 88
試したこと
実現したい画面の元になっている以下の記事も参考にオプションを書き足してみましたが、
解決には至りませんでした。
補足情報（FW/ツールのバージョンなど）
rails -v 5.2.4
fullcalendar の Github
fullcalendar 公式ドキュメント
回答2件
0
ベストアンサー
私も同じところでつまづき、公式ドキュメントを漁っていたところ解決させることが出来たので共有します。
参考URL >> https://fullcalendar.io/docs/v3/view-specific-options
viewsオプションでmonth,week,day毎に分けてcolumnFormatを指定してやるといい感じになりました。
$('#calendar').fullCalendar({
dayNames: ['日', '月', '火', '水', '木', '金', '土'],
dayNamesShort: ['(日)', '(月)', '(火)', '(水)', '(木)', '(金)', '(土)'],
views: {
month: {
columnFormat: 'dddd' //like '土'
},
week: {
columnFormat: 'M/D ddd' //like '6/6(土)'
},
day: {
columnFormat: 'M/D ddd' // like '6/6(土)'
}
},
});
gemのfullcalendar-railsのバージョンを確認して、v3なら問題なく動くと思います。
投稿2020/06/05 20:38
総合スコア11
0
初めまして。完全な回答ではなくて申し訳ないのですが、自分もkatoさまと全く同じところで躓いているところです。ほぼ同じ投稿をされていて驚きました(笑)
で、teratailとは別に、プログラミングされてる方に同じ質問をしたところ、ここ⇨（リンク内容）に参考になる内容が記されてると教えてもらえました。
ただ残念ながら自分のレベルでは理解できない範囲だったので今は問題を横に置いて別作業をしてます。
何かkatoさまのお役に立ったらと思いコメントさせてもらいました。
もし解決されましたらコメントいただけたら嬉しく思います。どうぞよろしくお願いします。
投稿2020/05/10 09:59
総合スコア33
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/07 09:50