質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.48%
Ruby

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

3659閲覧

FullCalendarの週表示・日表示において時間軸が表示されない

Aoi_ocean

総合スコア10

Ruby

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/10/16 02:11

前提・実現したいこと

「Ruby on Rails 速習実践ガイド」を少し前に終えたばかりのRuby初心者です。カレンダーを使ったToDoの表示を試みています。まだRubyを勉強し始めたばかりで、実装したい機能を調べながら追加しています。tempusdominus-bootstrap-4.js等を使い、カレンダーを表示させました。しかし、週表示と日表示を追加したところ、時間軸が表示されません。

発生している問題・エラーメッセージ

下の図のようにall-dayの下に時間軸が表示されないです。
イメージ説明

該当のソースコード

application.js

1$(function () { 2 function eventCalendar() { 3 return $('#calendar').fullCalendar({}); 4 }; 5 function clearCalendar() { 6 $('#calendar').html(''); 7 }; 8 $(document).on('turbolinks:load', function () { 9 eventCalendar(); 10 }); 11 $(document).on('turbolinks:before-cache', clearCalendar); 12 13 $('#calendar').fullCalendar({ 14 events: '/tasks.json', 15 header: { 16 left: 'month, agendaWeek, agendaDay', 17 center: 'title', 18 right: 'today, prev, next' 19 }, 20 buttonText: { 21 today: "Today", 22 month: "Month", 23 agendaWeek: 'Week', 24 agendaDay: 'Day' 25 }, 26 eventTextColor: 'white', 27 timeFormat: { 28 agenda: 'h(:mm)' 29 }, 30 defaultView: 'agendaWeek', 31 slotDuration: "00:30:00", 32 slotEventOverlap: false, 33 minTime: "00:00", 34 maxTime: "23:59", 35 nowIndicator: true, 36     slotLabelFormat: { 37 hour: 'numeric', 38 minute: '2-digit', 39 omitZeroMinute: true, 40 meridiem: 'short' 41 } 42 }); 43});

_form.html.slim

1= form_with model: task, local: true do |f| 2 .form-group 3 = f.label :name 4 = f.text_field :name, class: 'form-control', id: 'task_name' 5 .form-group 6 = f.label :description 7 = f.text_area :description, rows: 5, class: 'form-control', id: 'task_description' 8 .form-group 9 .input-group data-target-input= "nearest" 10 = f.label :start_date 11 = f.text_field :start_date, class: 'form-control datepicker', id: 'task_start_date' 12 .input-group-append [data-target= '#task_start_date', data-toggle= 'datetimepicker'] 13 .input-group-text.fa.fa-calendar 14 .form-group 15 .input-group data-target-input= "nearest" 16 = f.label :end_date 17 = f.text_field :end_date, class: 'form-control datepicker', id: 'task_end_date' 18 .input-group-append [data-target= '#task_end_date', data-toggle= 'datetimepicker'] 19 .input-group-text.fa.fa-calendar 20 = f.submit nil, class: 'btn btn-primary' 21 22javascript: 23 $(function () { 24 $('.datepicker').datetimepicker({ 25 format: 'YYYY-MM-DD HH:mm' 26 }); 27 });

試したこと

application.jsにslotLabelFormatを追加したり、"FullCalendar won't show time axis"で検索してみましたが、同じような質問や参考になりそうなサイトが見つからず、ここに質問させていただきました。

補足情報(FW/ツールのバージョンなど)

Ruby 2.5.1
fullcalendar-rails (3.9.0.0)
jquery-rails (>= 4.0.5, < 5.0.0)
jquery-ui-rails (>= 5.0.2)
momentjs-rails (>= 2.9.0)

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

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

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

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

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

mix-peach

2019/10/16 07:14

コンソールに何かエラーは出ていませんか? 一旦オプションを全て外しても、時間軸は表示されないのでしょうか?
Aoi_ocean

2019/10/16 12:13

返信ありがとうございます! cssが原因でした…。 お手数をおかけしました。
guest

回答1

0

自己解決

表示されるイベントからその予定が始まる時刻を削除したいと思い、cssに追加していた.fc-time{display:none;}が原因でした…。

投稿2019/10/16 12:16

Aoi_ocean

総合スコア10

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問