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

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

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

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

Q&A

解決済

1回答

517閲覧

Ruby on railsでFullcalendarの使用

yuyuyuyuddd

総合スコア8

Ruby on Rails

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

0グッド

0クリップ

投稿2018/01/31 04:53

前提・実現したいこと

Ruby on railsでFullcalendarを使用し、予定表を作成しております。
予定表から、予定と登録することはできることを確認しました。
また、select文でその予定を取得できることも確認しましたが、その値を表示させることができません。
エラーなどはでていません。

ご協力よろしくお願いいたします。

該当のソースコード

js

1$(document).ready(function() { 2 3 var select = function(start, end) { 4 var title = window.prompt("予定名"); 5 start_time = start.unix() 6 var d = new Date( start_time * 1000 ); 7 var year = d.getYear() + 1900; 8 var month = d.getMonth() + 1; 9 var day = d.getDate(); 10 var hour = ( d.getHours() < 10 ) ? '0' + d.getHours() : d.getHours(); 11 var min = ( d.getMinutes() < 10 ) ? '0' + d.getMinutes() : d.getMinutes(); 12 var moment_start = year+"-"+month+"-"+day+" "+hour+":"+min; 13 start_time = moment(moment_start).add(-9, 'hour').format("YYYY-MM-DD HH:mm"); 14 end_time = end.unix() 15 d = new Date( end_time * 1000 ); 16 year = d.getYear() + 1900; 17 month = d.getMonth() + 1; 18 day = d.getDate(); 19 hour = ( d.getHours() < 10 ) ? '0' + d.getHours() : d.getHours(); 20 min = ( d.getMinutes() < 10 ) ? '0' + d.getMinutes() : d.getMinutes(); 21 moment_end = year+"-"+month+"-"+day+" "+hour+":"+min; 22 end_time = moment(moment_end).add(-9, 'hour').format("YYYY-MM-DD HH:mm"); 23 var data = { 24 event: { 25 title: title, 26 start: start_time, 27 end: end_time, 28 allday: false 29 } 30 } 31 $.ajax({ 32 type: "POST", 33 url: "/api/v1/events", 34 data: data, 35 success: function() { 36 calendar.fullCalendar('refetchEvents'); 37 } 38 }).done(function(data){ 39 alert("登録しました!"); 40 }).fail(function(data){ 41 alert("登録できませんでした。"); 42 }); 43 calendar.fullCalendar('unselect'); 44 }; 45 46 calendar = $('#calendar').fullCalendar({ 47 header: { 48 left: 'prev,next today', 49 center: 'title', 50 right: 'month,agendaWeek,agendaDay' 51 }, 52 axisFormat: 'H:mm', 53 timeFormat: 'H:mm', 54 monthNames: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], 55 monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], 56 dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'], 57 dayNamesShort: ['日','月','火','水','木','金','土'], 58 events: "/api/v1/events", 59 editable: true, // 編集可 60 selectable: true, // 選択可 61 selectHelper: true, // 選択時にプレースホルダーを描画 62 ignoreTimezone: false, // 自動選択解除 63 select: select, // 選択時に関数にパラメータ引き渡す 64 buttonText: { 65 prev: '<', // &lsaquo; 66 next: '>', // &rsaquo; 67 prevYear: '<<', // &laquo; 68 nextYear: '>>', // &raquo; 69 today: '今日', 70 month: '月', 71 week: '週', 72 day: '日' 73 }, 74 height: 800, 75 defaultView: 'agendaWeek', 76 eventLimit: true, 77 firstDay: 1, 78 weekends: true, 79 weekMode: 'fixed', 80 weekNumbers: false, 81 slotDuration: '00:30:00', 82 snapDuration: '00:15:00', 83 minTime: "00:00:00", 84 maxTime: "24:00:00", 85 defaultTimedEventDuration: '10:00:00', 86 allDayText:'allday', 87 slotMinutes: 15, 88 snapMinutes: 15, 89 firstHour: 9, 90 eventClick: function(event) { 91 var id = event.id 92 var show_url = "/events/"+id 93 location.href = show_url; 94 }, 95 eventResize: function(event) { //イベントをサイズ変更した際に実行 96 var id = event.id 97 var update_url = "/api/v1/events/"+id 98 var event_start_time = event._start._d 99 var year = event_start_time.getYear() + 1900; 100 var month = event_start_time.getMonth() + 1; 101 var day = event_start_time.getDate(); 102 var hour = ( event_start_time.getHours() < 10 ) ? '0' + event_start_time.getHours() : event_start_time.getHours(); 103 var min = ( event_start_time.getMinutes() < 10 ) ? '0' + event_start_time.getMinutes() : event_start_time.getMinutes(); 104 var moment_start = year+"-"+month+"-"+day+" "+hour+":"+min; 105 var start_time = moment(moment_start).add(-9, 'hour').format("YYYY-MM-DD HH:mm"); 106 var event_end_time = event._end._d 107 var year = event_end_time.getYear() + 1900; 108 var month = event_end_time.getMonth() + 1; 109 var day = event_end_time.getDate(); 110 var hour = ( event_end_time.getHours() < 10 ) ? '0' + event_end_time.getHours() : event_end_time.getHours(); 111 var min = ( event_end_time.getMinutes() < 10 ) ? '0' + event_end_time.getMinutes() : event_end_time.getMinutes(); 112 var moment_end = year+"-"+month+"-"+day+" "+hour+":"+min; 113 var end_time = moment(moment_end).add(-9, 'hour').format("YYYY-MM-DD HH:mm"); 114 var data = { 115 event: { 116 title: event.title, 117 start: start_time, 118 end: end_time, 119 allday: false 120 } 121 } 122 $.ajax({ 123 type: "PATCH", 124 url: update_url, 125 data: data, 126 success: function() { 127 calendar.fullCalendar('refetchEvents'); 128 } 129 }); 130 calendar.fullCalendar('unselect'); 131 }, 132 eventDrop: function(event) { //イベントをドラッグ&ドロップした際に実行 133 var id = event.id 134 var update_url = "/api/v1/events/"+id 135 var event_start_time = event._start._d 136 var year = event_start_time.getYear() + 1900; 137 var month = event_start_time.getMonth() + 1; 138 var day = event_start_time.getDate(); 139 var hour = ( event_start_time.getHours() < 10 ) ? '0' + event_start_time.getHours() : event_start_time.getHours(); 140 var min = ( event_start_time.getMinutes() < 10 ) ? '0' + event_start_time.getMinutes() : event_start_time.getMinutes(); 141 var moment_start = year+"-"+month+"-"+day+" "+hour+":"+min; 142 var start_time = moment(moment_start).add(-9, 'hour').format("YYYY-MM-DD HH:mm"); 143 var event_end_time = event._end._d 144 var year = event_end_time.getYear() + 1900; 145 var month = event_end_time.getMonth() + 1; 146 var day = event_end_time.getDate(); 147 var hour = ( event_end_time.getHours() < 10 ) ? '0' + event_end_time.getHours() : event_end_time.getHours(); 148 var min = ( event_end_time.getMinutes() < 10 ) ? '0' + event_end_time.getMinutes() : event_end_time.getMinutes(); 149 var moment_end = year+"-"+month+"-"+day+" "+hour+":"+min; 150 var end_time = moment(moment_end).add(-9, 'hour').format("YYYY-MM-DD HH:mm"); 151 var data = { 152 event: { 153 title: event.title, 154 start: start_time, 155 end: end_time, 156 allday: false 157 } 158 } 159 $.ajax({ 160 type: "PATCH", 161 url: update_url, 162 data: data, 163 success: function() { 164 calendar.fullCalendar('refetchEvents'); 165 } 166 }); 167 calendar.fullCalendar('unselect'); 168 } 169 }); 170});
コントローラ require "#{Rails.root}/app/controllers/application_controller.rb" module Api module V1 class EventsController < ApplicationController # CSRF対策 protect_from_forgery except: [:create, :update] def index @events = Events.order(:id).limit(params[:limit]).offset(params[:offset]) json = @events render json: json.to_json end def show @event = Events.find(params[:id]) render json: @event.to_json end def edit @event = Events.find(params[:id]) end def update @event = Events.find(params[:id]) event_params.require(:title) event_params.require(:start) event_params.require(:end) # event_params.require(:color) # event_params.require(:allday) respond_to do |format| format.any if @event.update!(event_params) @event.save render json: @event.to_json and return else render json: {status: "ng", code: 500, content: {message: "エラーだよ"}} and return end end end def new @event = Events.new end def create event_params.require(:title) event_params.require(:start) event_params.require(:end) # event_params.require(:color) event_params.require(:allday) @event = Events.new(event_params) respond_to do |format| format.any if @event.save! render json: @event and return else render json: {status: "ng", code: 500, content: {message: "エラーだよ"}} and return end end end def destroy @event = Events.find(params[:id]) @event.destroy render json: @event and return end private def event_params params[:event] .permit( :title, :start, :end, :color, :allday ) end end end end

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

Codeanywhereというクラウド環境で
・Ubuntu14.04
・ruby 2.1.2p95 (2014-05-08 revision 45877) [x86_64-linux]
・Rails 4.1.6

###参考サイト
これをほぼ丸パクリで使用しております。
データベース構成などはこちらをご覧ください。
https://qiita.com/ShoutaWATANABE/items/3d0cddafadb4f275991e

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

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

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

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

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

guest

回答1

0

自己解決

DBの中に、startとendがNULLの箇所が存在しました。

そのデータを削除すると表示させることができました。

ありがとうございました。

投稿2018/01/31 12:49

yuyuyuyuddd

総合スコア8

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問