*2016/11/1-更新calendar.coffee、calendar.controller，將_form.html.erb改回new.html.erb。
參考來源(jquery-ui)：https://rubygems.org/gems/fullcalendar-rails/versions
參考來源(CRUD)：http://vinsol.com/fullcalendar-demo
C：會套用前幾篇中提到的one-to-many頁面。
R：使用jquery-ui的套件，將事件的detail顯示在dialog裡。
U：本篇不做。
D：依附在read底下，點選某一日曆上的事件時才會載入delete按鈕，如該事件已有人回復/預訂，則不可刪除。
參考來源(jquery-ui)：https://rubygems.org/gems/fullcalendar-rails/versions
參考來源(CRUD)：http://vinsol.com/fullcalendar-demo
C：會套用前幾篇中提到的one-to-many頁面。
R：使用jquery-ui的套件，將事件的detail顯示在dialog裡。
U：本篇不做。
D：依附在read底下，點選某一日曆上的事件時才會載入delete按鈕，如該事件已有人回復/預訂，則不可刪除。
首先安裝 jquery-ui-rails
打開Gemfile檔，加入
# jquery-ui
gem 'jquery-ui-rails'
編輯application.js，加入
//= require jquery-ui
編輯application.css，加入
*= require jquery-ui
執行指令
$ bundle install
編輯calendars_controller.rb
before_action :set_calendar, :only => [ :destroy]
def index
@calendars = Calendar.
select("calendars.id", "IF(calendars.user_id = '#{current_user.id}', 1, 0) AS isedit",
"IF(rcalendars.fb_nickname IS NULL, 1, 0) AS reserved",
"CONCAT(calendars.vdate , ' ', calendars.vtime, ':00:00') AS dt",
"CONCAT(users.username, ' ', IFNULL(rcalendars.fb_nickname, '')) AS title",
"CONCAT(calendars.vdate , ' ', calendars.vtime, '點<br/>', IFNULL(rcalendars.content, '')) AS description").
joins("LEFT JOIN users ON users.id = calendars.user_id LEFT JOIN rcalendars ON rcalendars.calendar_id = calendars.id")
#if json file(index.json.jbuilder) like to link use json.url calendar_path(calendar)
end
def new
@calendar = []
15.times do
@calendar << Calendar.new
end
render :layout => false
end
def create
if params.has_key?("calendar")
@calendar = Calendar.create(calendar_params(params["calendar"]))
else
params["calendars"].each do |calendar|
if calendar["issave"] && calendar["vdate"] != ""
@calendar = Calendar.create(calendar_params(calendar))
end
end
end
#json
respond_to do |format|
if @calendar.save
format.html { redirect_to calendars_url, notice: 'calendar was successfully created.' }
format.json { render action: 'index', status: :created, location: @calendar }
else
format.html { render action: 'new' }
format.json { render json: @calendar.errors, status: :unprocessable_entity }
end
end
#json
end
def destroy
@calendar.destroy
redirect_to calendars_url
flash[:alert] = "calendar was successfully deleted"
end
private
# Use callbacks to share common setup or constraints between actions.
def set_calendar
@calendar = Calendar.find(params[:id])
end
# Never trust parameters from the scary internet, only allow the white list through.
def calendar_params(my_params)
my_params.permit(:user_id, :vdate, :vtime)
end
編輯calendar.coffee
$(document).ready ->
# page is now ready, initialize the calendar...
$('#new_event').click (event) ->
$.get '/calendars/new', (data) ->
#初始將a.html include div#iframe
$('#create_event').html data
return
$('#create_event_dialog').dialog
title: '新增'
modal: true
width: 500
close: (event, ui) ->
$('#create_event_dialog').dialog 'destroy'
return
return
$('#create_event_dialog, #desc_dialog').on 'submit', '#event_form', (event) ->
$spinner = $('.spinner')
show_spinner = ->
$spinner.show()
return
hide_spinner = ->
$spinner.hide()
return
handle_error = (xhr) ->
alert xhr.responseText
return
event.preventDefault()
$.ajax
type: 'POST'
data: $(this).serialize()
url: $(this).attr('action')
beforeSend: show_spinner
complete: hide_spinner
success: refetch_events_and_close_dialog
error: handle_error
return
$('#calendar').fullCalendar
header:
left: 'prev,next today'
center: 'title'
right: 'month'
defaultView: 'month'
loading: (bool) ->
if bool
$('#loading').show()
else
$('#loading').hide()
return
events: '/calendars.json'
timeFormat: 'Ahh點'
eventClick: (event, jsEvent, view) ->
showEventDetails event
return
return
showEventDetails = (event) ->
$('#event_desc').html event.description
title = event.title
if event.isedit and event.reserved
$('#delete_event').html '<form class="button_to" method="post" action="/calendars/' + event.id + '"><input type="hidden" name="_method" value="delete" /><input type="hidden" name="authenticity_token" value="' + $('meta[name="csrf-token"]').attr('content') + '" /><input data-confirm="Are you sure?" type="submit" value="Delete" /></form>'
else
$('#delete_event').html ''
$('#desc_dialog').dialog
title: title
modal: true
width: 500
close: (event, ui) ->
$('#desc_dialog').dialog 'destroy'
return
return
refetch_events_and_close_dialog = ->
$('#calendar').fullCalendar 'refetchEvents'
$('.dialog:visible').dialog 'destroy'
return
編輯calendars.scss
.fc-h-event {
cursor: pointer;
}
編輯calendars/index.html.erb
<div><%=link_to '新增', new_calendar_path, :id => 'new_event' %></div>
<div id="calendar"></div>
<!--隱藏表單 //-->
<div id = "desc_dialog" class="dialog" style ="display:none;">
<div id = "event_desc">
</div>
<br/>
<br/>
<div id = "event_actions">
<span id = "edit_event"></span>
<span id = "delete_event"></span>
</div>
</div>
<div id = "create_event_dialog" class="dialog" style ="display:none;">
<div id = "create_event">
</div>
</div>
新增的畫面
點開日曆事件時的畫面
可編輯自己的部份：
可編輯自己的部份：
不可編輯他人的資料：
後台總算告個段落，只剩下套版了。
後台總算告個段落，只剩下套版了。
