gpt4 book ai didi

jquery - 如何在 Rails 中正确使用 Fullcalendar jQuery 插件

转载 作者:数据小太阳 更新时间:2023-10-29 07:03:29 26 4
gpt4 key购买 nike

我正在使用 rails 4 中的 gem 'fullcalendar-rails' 来使用 jquery fullcalendar,顺便说一句,我是 rails 的新手,我花了很多天时间试图让它工作,但我找不到从日历到 rails Controller 的正确发布,然后将其保存到数据库的指南。

我试过这个指南,但似乎没有什么能正常工作,有人知道如何做吗?

http://www.rkonrails.com/blog/2013/10/full-calendar-rails-jquery-full-calendar-in-rails/

http://blog.crowdint.com/2014/02/18/fancy-calendars-for-your-web-application-with-fullcalendar.html

实际上这是我的代码:

事件模型

  class Event < ActiveRecord::Base
def self.between(start_time, end_time)
where('starts_at > :lo and starts_at < :up',
:lo => Event.format_date(start_time),
:up => Event.format_date(end_time)
)
end

def self.format_date(date_time)
Time.at(date_time.to_i).to_formatted_s(:db)
end

def as_json(options = {})
{
:id => self.id,
:title => self.title,
:description => self.description || "",
:start => starts_at.rfc822,
:end => ends_at.rfc822,
:allDay => self.all_day,
:recurring => false,
:url => Rails.application.routes.url_helpers.event_path(id)
}
end
end

事件 Controller

class EventsController < ApplicationController
def new
@event = Event.new
respond_to do |format|
format.html # new.html.erb
format.js
end
end

def create
@event = Event.new params['event']

if @event.save
render nothing: true
else
render :json => { }, :status => 500
end
end

def index
@events = Event.between(params['start'], params['end']) if (params['start'] && params['end'])
respond_to do |format|
format.html # index.html.erb
format.json { render :json => @events }
end
end
end

日历.JS.咖啡

$(document).ready -> 
$('#calendar').fullCalendar
editable: false,

columnFormat: {
month: 'dddd',
week: 'dddd d',
day: 'ddd'
}
buttonText: {
today: 'today',
month: 'month',
week: 'week',
day: 'day'
}

minTime: "08:00:00"
maxTime: "23:00:00"
header:
left: 'prev,next today',
center: 'title',
right: ''
firstDay: 1


selectable: true
selectHelper: true
select: (start, end) ->
title = prompt("Event Title:")
eventData = undefined
if title
eventData =
title: title
start: start
end: end
$("#calendar").fullCalendar "renderEvent", eventData, true # stick? = true
$("#calendar").fullCalendar "unselect"


defaultView: 'agendaWeek',
allDaySlot: false,
height: 500,
slotMinutes: 30,
eventSources: [{
url: '/events',
}],
timeFormat: 'h:mm t{ - h:mm t} ',
dragOpacity: "0.5"
eventDrop: (event, dayDelta, minuteDelta, allDay, revertFunc) ->
updateEvent(event);
eventResize: (event, dayDelta, minuteDelta, revertFunc) ->
updateEvent(event);

updateEvent = (the_event) ->
$.update "/events/" + the_event.id,
event:
title: the_event.title,
starts_at: "" + the_event.start,
ends_at: "" + the_event.end,
description: the_event.description

事件迁移

  create_table "events", force: true do |t|
t.string "title"
t.string "starts_at"
t.string "ends_at"
t.string "description"
t.string "allDay"
t.datetime "created_at"
t.datetime "updated_at"
end

最佳答案

因此,经过大量研究后,我找到了使它在 fullcanlendar 和 rails 中工作的正确方法,所以我会把代码交给你。这是使用周历的示例。

如果您的语言是英语,则忽略名称的更改,但如果您不是英语,则可以使用它来将其更改为您的语言。 monthNames、monthNamesShort、dayNames、dayNamesShort 和 buttonText 中的“今天”按钮。

在“用户名”中,您可以验证任何您想要的内容,例如标题或其他参数。

日历.js

var updateEvent;

$(document).ready(function() {
var todayDate = new Date();
todayDate.setHours(0,0,0,0);

$('#calendar').fullCalendar({
editable: false,
slotEventOverlap: false,
monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
columnFormat: {
month: 'dddd',
week: 'dddd d',
day: 'ddd'
},
buttonText: {
today: 'Hoy',
month: 'month',
week: 'week',
day: 'day'
},
minTime: "08:00:00",
maxTime: "23:00:00",
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
firstDay: 1,
//this section is triggered when the event cell it's clicked
selectable: true,
selectHelper: true,
select: function(start, end) {
var user_name;
user_name = prompt("User name: ");
var eventData;
//this validates that the user must insert a name in the input
if (user_name) {
eventData = {
title: "Reserved",
start: start,
end: end,
user_name: user_name
};
//here i validate that the user can't create an event before today
if (eventData.start < todayDate){
alert('You can't choose a date that already past.');
$("#calendar").fullCalendar("unselect");
return
}
//if everything it's ok, then the event is saved in database with ajax
$.ajax({
url: "events",
type: "POST",
data: eventData,
dataType: 'json',
success: function(json) {
alert(json.msg);
$("#calendar").fullCalendar("renderEvent", eventData, true);
$("#calendar").fullCalendar("refetchEvents");
}
});
}
$("#calendar").fullCalendar("unselect");
},
defaultView: 'agendaWeek',
allDaySlot: false,
height: 500,
slotMinutes: 30,
eventSources: [
{
url: '/events'
}
],
timeFormat: 'h:mm t{ - h:mm t} ',
dragOpacity: "0.5"
});
};

在事件模型中有 4 个属性是使其工作所必需的,它们是开始、结束、标题和 allDay 变量。

as_json 方法从数据库中获取每个事件并将其格式化发送到日历中的每个单元格,因此“url”属性将成为每个事件“显示”的链接,因此如果您单击该链接,它将发送你到那个 View (这不是在这个例子中)。

event.rb(模型)

class Event < ActiveRecord::Base

# scope :between, lambda {|start_time, end_time| {:conditions => ["? < starts_at and starts_at < ?", Event.format_date(start_time), Event.format_date(end_time)] }}
def self.between(start_time, end_time)
where('start_at > :lo and start_at < :up',
:lo => Event.format_date(start_time),
:up => Event.format_date(end_time)
)
end

def self.format_date(date_time)
Time.at(date_time.to_i).to_formatted_s(:db)
end

def as_json(options = {})
{
:id => self.id,
:title => self.title,
:start => start_at.rfc822,
:end => end_at.rfc822,
:allDay => allDay,
:user_name => self.user_name,
:url => Rails.application.routes.url_helpers.events_path(id),
:color => "green"
}
end
end

这里没有什么可添加的,代码是不言自明的。

events_controller.rb

class EventsController < ApplicationController
def new
@event = Event.new
respond_to do |format|
format.html
format.js
end
end

def create
@event = Event.new(event_params)

if @event.save
render json: {msg: 'your event was saved.'}
else
render json: {msg: 'error: something go wrong.' }, status: 500
end
end

def index
@events = Event.between(params['start'], params['end']) if (params['start'] && params['end'])

respond_to do |format|
format.html
format.json { render :json => @events }
end
end

def event_params
params.permit(:title).merge start_at: params[:start].to_time, end_at: params[:end].to_time, user_name: params[:user_name]
end

创建事件迁移

class CreateEvents < ActiveRecord::Migration
def change
create_table :events do |t|
t.string :title
t.datetime :start_at
t.datetime :end_at
t.string :allDay
t.string :user_name

t.timestamps
end
end
end

通过这个示例,您可以在 Rails 中毫无问题地保存和显示您的事件,但是如果您想更改事件中数据的显示方式,我建议您更改日历的 css 属性,例如:

如果你只想在事件中显示标题而不显示开始和结束时间,你必须这样做:

.fc-event-time {
display: none;
}

如果你想让标题居中:

.fc-event-title{
text-align: center;
}

如您所见,这非常简单,您不需要更改完整日历的原始代码。

希望对你有帮助!! :D!!

关于jquery - 如何在 Rails 中正确使用 Fullcalendar jQuery 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24833548/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com