简而言之，我正在尝试向我的rails应用程序添加日历。我已经决定使用完整日历（http://arshaw.com/fullcalendar/）。我的问题是JS代码没有被渲染。日历未显示。但是，Firebug显示JS文件已被调用。我在 Dreamweaver 中测试了文件，日历功能正常。知道为什么它不渲染吗？Javascript和CSS文件放置在应用程序/资产下各自的文件夹中。这是我处理完整日历的代码。任何帮助将不胜感激。
app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require jquery.masonry.min.js
//= require bootstrap
//= require_tree .
资产/样式表/应用程序.css
*= require_self
*= require_tree .
*/
app/views/layouts/application.html.erb
<head>
<title>One Month Rails</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<script>
$(document).ready(function() {
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events div.external-event').each(function() {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function(date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
});
});
</script>
</head>
app/views/layouts/page.html.erb
<div id='wrap'>
<div id='external-events'>
<h4>Draggable Events</h4>
<div class='external-event'>My Event 1</div>
<div class='external-event'>My Event 2</div>
<div class='external-event'>My Event 3</div>
<div class='external-event'>My Event 4</div>
<div class='external-event'>My Event 5</div>
<p>
<input type='checkbox' id='drop-remove' /> <label for='drop-remove'>remove after drop</label>
</p>
</div>
<div id='calendar'></div>
<div style='clear:both'></div>
</div>
您可能想查看 https://github.com/bokmann/fullcalendar-rails。此外，这里还有功能齐全的应用程序 https://github.com/bokmann/rails3_fullcalendar。下载该应用程序并看一看。