Javascript “完整日历”；未捕获类型错误：$（…）。fullCalendar不是函数；在RubyonRails中

我正在尝试将日历添加到我的web应用程序中，但它不起作用。我按照下面的说明操作，无法填充日历

我是否也需要编写所有Javascript？这似乎是安装日历的快速步骤。我肯定我错过了一些安装步骤，但这是我在网上发现的

添加到文件


gem 'fullcalendar-rails'
gem 'momentjs-rails'


2.捆绑安装并重新启动rails服务器


3.添加到application.js


//= require moment
//= require fullcalendar

添加到host.html.erb并使用脚本代码

  <script>

    window.reservations = <%= raw @events.to_json %>
    window.days = <%= raw @days.to_json %>

    function showReservations(data) {
      return data.map(function (e) {
        if (e['start_date'] !== e['end_date']) {
          e['end_date'] = moment.utc(e['end_date']).add(1, 'days')
        }

        return {
          name: e.fullname,
          start: e['start_date'],
          end: e['end_date'],
          avatar: e.image,
          status: e.status
        }
    });
  };

  $('#calendar').fullCalendar({
    header: {
      left: 'title',
      center: '',
      right: 'prev,next'
    },
    defaultDate: $('#start-date').val(),
    events: showReservations(reservations),
    eventRender: function(event, element, view) {
      return $(`
        <a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end">
          <div class="fc-content ${event.status}">
            <span class="fc-title"><img class="img-circle avatar-small" src="${event.avatar}"> ${event.name}</span>
          </div>
        </a>
      `);
    },
    dayRender: function(date, cell) {
      var dayInfo = $.grep(days, function(e) {
        return e.day === date.format();
      });

      console.log(dayInfo);

      <% if !@rooms.blank? %>
        if (dayInfo.length > 0) {
          if (dayInfo[0].status == "Not_Available") {
            cell.addClass('fc-past');
          } else {
            cell.append('<span class="day-price">' + '$' + dayInfo[0].price + '</span>')
          }
        } else {
          cell.append('<span class="day-price">' + '$<%= @room.price %>' + '</span>')
        }
      <% end %>


    },
    selectable: true,
    select: function(start, end, jsEvent, view) {
      var start_date = moment(start);
      var end_date = moment(end).subtract(1, "days");

      <% if @rooms.blank? %>
          $('#calendar').fullCalendar('unselect');
      <% end %>

      var overlap = reservations.filter(function(e) {
        var r_start_date = moment(e.start_date);
        var r_end_date = moment(e.end_date).subtract(1, "days");

        return (r_start_date.isSameOrBefore(end_date) && r_end_date.isSameOrAfter(start_date))
      }).length > 0;

      if(start.isBefore(moment()) || overlap) {
        $('#calendar').fullCalendar('unselect')
      } else {
        $('#new_calendar').modal('show');

        $('#calendar_start_date').datepicker({
          dateFormat: "yy-mm-dd",
          setDate: start_date
        });
        $('#calendar_start_date').val(start_date.format("YYYY-MM-DD"));

        $('#calendar_end_date').datepicker({
          dateFormat: "yy-mm-dd",
          setDate: end_date
        });
        $('#calendar_end_date').val(end_date.format("YYYY-MM-DD"));
      }
  },
}
  $('.fc-prev-button').click(function() {
    var current = new Date($('#start-date').val());
    var prev = new Date(current.getFullYear(), current.getMonth() - 1, 1)
    $('#start-date').val(moment(prev).format('YYYY-MM-DD'))
    $('#start-date').trigger('change')
  });

  $('.fc-next-button').click(function() {
    var current = new Date($('#start-date').val());
    var next = new Date(current.getFullYear(), current.getMonth() + 1, 1)
    $('#start-date').val(moment(next).format('YYYY-MM-DD'))
    $('#start-date').trigger('change')
  });


 </script>

window.reservations=
window.days=
功能显示保留（数据）{
返回data.map（函数（e）{
如果（e[‘开始日期’！==e[‘结束日期’）{
e['end_date']=矩.utc（e['end_date']）。添加（1，'days'）
}
返回{
姓名：e.fullname，
开始日期：e[“开始日期”]，
结束日期：e[“结束日期”]，
阿凡达：e.image，
状态：e.status
}
});
};
$（“#日历”）.fullCalendar({
标题：{
左：'标题'，
中心：''，
右图：“上一页，下一页”
},
defaultDate:$（“#开始日期”）.val（），
活动：showReservations（预订），
eventRender:函数（事件、元素、视图）{
返回$(`
${event.name}
`);
},
dayRender:函数（日期、单元格）{
var dayInfo=$.grep（天，函数（e）{
返回e.day==date.format（）；
});
控制台日志（dayInfo）；
如果（dayInfo.length>0）{
如果（dayInfo[0]。状态==“不可用”）{
cell.addClass（'fc-pass'）；
}否则{
cell.append（“”+“$”+dayInfo[0]。价格+“”）
}
}否则{
cell.append（''+'$'+''）
}
},
是的，
选择：函数（开始、结束、jsEvent、视图）{
var开始日期=时刻（开始）；
var end_date=时刻（end）。减去（1，“天”）；
$（“#日历”）.fullCalendar（'unselect'）；
var重叠=保留。过滤器（函数（e）{
var r_开始日期=时刻（例如开始日期）；
var r_end_date=时刻（即结束日期）。减去（1，“天”）；
返回（r_开始日期。在（结束日期）之前和&r_结束日期。在（开始日期）之后）
}).长度>0；
if（start.isBefore（矩（））| |重叠）{
$（“#日历”）.fullCalendar（“取消选择”）
}否则{
$（'新日历'）.modal（'显示'）；
$（“#日历(开始)日期”）。日期选择器({
日期格式：“年月日”，
设置日期：开始日期
});
$（'日历'开始日期'）.val（开始日期.格式（“YYYY-MM-DD”）；
$（“#日历_结束_日期”）。日期选择器({
日期格式：“年月日”，
设置日期：结束日期
});
$（'calendar\u end\u date'）.val（end\u date.format（“YYYY-MM-DD”）；
}
},
}
$（'.fc prev button'）。单击（函数（）{
var current=新日期（$（“#开始日期”）.val（）；
var prev=新日期（current.getFullYear（），current.getMonth（）-1，1）
$（“#开始日期”）.val（时间（上一个）.format（'YYYY-MM-DD'））
$（“#开始日期”）.trigger（'change'））
});
$（'.fc下一步按钮'）。单击（函数（）{
var current=新日期（$（“#开始日期”）.val（）；
var next=新日期（current.getFullYear（），current.getMonth（）+1,1）
$（“#开始日期”）.val（矩（下一个）.format（'YYYY-MM-DD'））
$（“#开始日期”）.trigger（'change'））
});

控制台中的错误是

---

未捕获的TypeError:$（…）。fullCalendar不是一个函数

这是宝石吗：如果是这样，安装看起来很相似，但不完全相同-用上面的链接试试看。（只需使用上面链接中最简单的示例，看看它是否有效，而不是上面的js）第二：你试过spring重启吗？这是伏都教，但有时很管用。但我在这个项目中不使用spring，我是新手，我不记得在这个项目中使用过它。这是默认的发电机负载吗？试试吧…如果它管用，那就是你的问题；）（这就是伏都教的原因）：你真的吓到我了：（我把它放进去了，但是终端显示了这个错误：

dmuino@Diegos-MBP:~/Desktop/API$spring重新启动警告：Gem:：Specification期间未解决的规范。重置：minitest（~>5.1）警告：清除未解决的规范。如果这导致问题，请报告错误。版本：2.0.2用法：spring命令[ARGS]spring本身的命令：binstub生成基于spring的binstubs。使用--all为所有已知命令生成binstub。使用--remove进行还原。帮助打印可用命令。服务器…

这些看起来像警告而不是错误…这是宝石吗：如果是，安装看起来类似，但不完全相同-尝试一下使用上面的内容，请看。（只需使用上面链接中最简单的示例，看看它是否有效，而不是上面的js）第二：你试过spring重启吗？这是伏都教，但有时很管用。但我在这个项目中不使用spring，我是新手，我不记得在这个项目中使用过它。这是默认的发电机负载吗？试试吧…如果它管用，那就是你的问题；）（这就是伏都教的原因）：你真的吓到我了：（我把它放进去了，但是终端显示了这个错误：

dmuino@Diegos-MBP:~/Desktop/API$spring重新启动警告：Gem:：Specification期间未解决的规范。重置：minitest（~>5.1）警告：清除未解决的规范。如果这导致问题，请报告错误。版本：2.0.2用法：spring命令[ARGS]spring本身的命令：binstub生成基于spring的binstubs。使用--all为所有已知命令生成binstub。使用--remove进行还原。帮助打印可用命令。服务器…

这些看起来像警告而不是错误。。。