0

要するに、レールアプリにカレンダーを追加しようとしています。fullCalendar ( http://arshaw.com/fullcalendar/ ) に決めました。私の問題は、JS コードがレンダリングされていないことです。カレンダーが表示されません。ただし、Firebug は、JS ファイルが呼び出されたことを示しています。Dreamweaver でファイルをテストし、予定どおりにカレンダー機能をテストしました。なぜレンダリングされないのですか？Javascript および CSS ファイルは、app/assets の下のそれぞれのフォルダーに配置されます。これがfullCalendarを扱う私のコードです。どんな助けでも大歓迎です。

アプリ/資産/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require jquery.masonry.min.js
//= require bootstrap
//= require_tree .

アプリ/アセット/スタイルシート/application.css

*= require_self
*= require_tree .
*/

アプリ/ビュー/レイアウト/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>

アプリ/ビュー/レイアウト/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>
4

1 に答える 1

0

https://github.com/bokmann/fullcalendar-railsを確認してください。さらに、 https://github.com/bokmann/rails3_fullcalendarに完全に機能するアプリがあります。アプリをダウンロードして、見てみましょう。

于 2013-09-23T21:09:05.733 に答える