前提・実現したいこと
fullcalendarの終日表示の『曜日』の前に『日にち』を表示させたいです。
●閲覧ありがとうございます。ただ今スタジオ予約アプリを作っていまして、その1日表示のヘッダー部分に曜日しか表記されていません。このままでは1日表示の時に何日なのかが解り難いと思い、曜日の前に日にちを表記させたいのですが調べ尽しても答えに辿り着けず困っています。
公式ドキュメント(リンク内容)のDate&Timeページを見ると、columnheaderやcolumnheaderformat部分にヒントになる記述がありそうなのですが、グーグル翻訳して見ても記述方法が理解できずに困ってる状態です。
ただ、この記事にある(リンク内容)
columnFormat: { month: 'ddd', // 月 week: "d'('ddd')'", // 7(月) day: "d'('ddd')'" // 7(月) },
の部分をapplication.jsに書くと、何故か希望通りの表示にはならないのですが、反応はするんです。
【⇩上記コードを足したapplication.js】
// This is a manifest file that'll be compiled into application.js, which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's // vendor/assets/javascripts directory can be referenced here using a relative path. // // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file. JavaScript code in this file should be added after the last require_* statement. // // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details // about supported directives. // //= require rails-ujs //= require activestorage //= require turbolinks //= require jquery //= require moment //= require fullcalendar //= require fullcalendar/lang/ja //= require_tree . $(function () { // 画面遷移を検知 $(document).on('turbolinks:load', function () { if ($('#calendar').length) { function Calendar() { return $('#calendar').fullCalendar({ }); } function clearCalendar() { $('#calendar').html(''); } $(document).on('turbolinks:load', function () { Calendar(); }); $(document).on('turbolinks:before-cache', clearCalendar); $(document).ready(function () { //events: '/events.json', 以下に追加 $('#calendar').fullCalendar({ events: '/events.json', //カレンダー上部を年月で表示させる titleFormat:'YYYY年 M月', monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], //曜日を日本語表示 dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'], //ボタンのレイアウト header: { left: '', center: 'prev title next', right: 'month agendaWeek agendaDay today' }, //終了時刻がないイベントの表示間隔 defaultTimedEventDuration: '01:00:00', buttonText: { prev:'<', next:'>', // prevYear: '前年', // nextYear: '翌年', today: '今日', month: '月', week: '週', day: '日' }, columnFormat: { month: 'ddd', // 月 week: "d'('ddd')'", // 7(月) day: "d'('ddd')'" // 7(月) }, firstDay : 1, // 終日スロットを表示 allDaySlot: false, // 終日スロットのタイトル allDayText: '', // Drag & Drop & Resize editable: false, slotDuration: '00:30', //イベントの時間表示を24時間に timeFormat: "HH:mm", //イベントの色を変える eventColor: '#87cefa', //イベントの文字色を変える eventTextColor: '#000000', eventRender: function(event, element) { element.css("font-size", "0.8em"); element.css("padding", "5px"); } }); }); } }); });
反応してるということは、{}の中のコードさえ適切であれば、日にちと曜日を表記できるのでは?と思ってるのですが、それが解らす困っています。
どなたか、ご教示いただける方いらっしゃいましたらよろしくお願いします。
補足情報(FW/ツールのバージョンなど)
OS macbookpro catalina 10.15.3
ruby 2.3.1p112
Rails 5.2.4.2
rbenv 1.1.2-28-gc2cfbd1
参考にした記事
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/10 23:06