🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2669閲覧

fullcalender v5で時間表示を非表示にしたい

a-ichi

総合スコア16

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/01/08 10:16

前提・実現したいこと

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

イメージ説明

カレンダー部分は問題なく表示出来ています。


調べましたが、何故消せなかったのか分からなかった為、質問させて頂きました。
よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

自己解決しました。
bootstrapが悪さをしていたようです。

投稿2021/01/08 11:20

a-ichi

総合スコア16

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問