前提・実現したいこと
railsのアプリでfullcalenderを利用しています。
カレンダー部分にDBからjsonで引っ張って、イベントを表示しています。
googleカレンダーのようにイベント名の表示だけにしたいです。
該当のソースコード
calender.js
js
1import { Calendar } from '@fullcalendar/core'; 2import dayGridPlugin from '@fullcalendar/daygrid'; 3import interactionPlugin from '@fullcalendar/interaction'; 4import listPlugin from '@fullcalendar/list'; 5import timeGridPlugin from '@fullcalendar/timegrid'; 6 7document.addEventListener('turbolinks:load', function() { 8 9 let calendarEl = document.getElementById('calendar'); 10 let calendar = new Calendar(calendarEl, { 11 navLinks: true, 12 editable: true, 13 nowIndicator: true, 14 initialView: 'dayGridMonth', 15 locale: 'ja', 16 timeZone: 'Asia/Tokyo', 17 height: 600, 18 displayEventTime: false, 19 headerToolbar: { 20 left: "dayGridMonth,timeGridWeek,timeGridDay,listMonth", 21 center: "title", 22 right: "today prev,next" 23 }, 24 buttonText: { 25 today: '今日', 26 month: '月', 27 list: 'リスト', 28 week: '週', 29 day: '日', 30 }, 31 views: { 32 timeGridWeek: { 33 slotMinTime: '07:00:00', 34 slotMaxTime: '22:00:00' 35 }, 36 timeGridDay: { 37 slotMinTime: '07:00:00', 38 slotMaxTime: '22:00:00' 39 } 40 }, 41 eventClick: function(event) { 42 }, 43 dayCellContent: function(e) { 44 e.dayNumberText = e.dayNumberText.replace('日', ''); 45 }, 46 47 eventSources: [{url:'/events.json', 48 color: '#2ECCFA'} 49 ], 50 plugins: [ dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin, ] 51 }); 52 53 calendar.render(); 54}); 55
index.json.jbuilder
json
1json.array!(@events) do |event| 2 if current_user.id == event.user_id 3 json.extract! event, :id, :title, :body 4 json.start event.start_time 5 json.end event.end_time 6 json.url event_url(event, format: :html) 7 end 8end
haml
1省略 2 .Main__body 3 %p#calendar 4省略
sass
1省略 2.fc-content.fc-time.fc-event-time{ 3 display: none; 4} 5省略
試したこと
・displayEventTime: falseをJSに記載
・fc-content.fc-time.fc-event-time{
display: none;
}
をsassに記載
補足情報(FW/ツールのバージョンなど)
ruby '2.6.5'
rails '6.0.0'
fullcalender v5
カレンダー部分は問題なく表示出来ています。
調べましたが、何故消せなかったのか分からなかった為、質問させて頂きました。
よろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。