Jquery Rails：如何在datepicker中添加工具提示事件并将其限制在几个月内

我有一个日期选择器，我想让用户看到所有由管理员创建的事件。最好添加功能来添加带有事件标题的工具提示

我知道这样的事情是允许的。 我必须使用这种方法。但问题来了

1） 如何将@events数组传递给jquery代码？我知道我可以在视图中访问该阵列，但是否允许我执行以下操作：

var events = @events;

2） 第二个也是最重要的问题。这种方法将导致我的应用程序处理大量事件。当事件开始变得越来越多时，这将减缓一切。如何根据今天的日期将事件限制在几个月内
希望澄清。有什么帮助吗

更新1（解决了第一个问题和第二个问题的一小部分） 好的，我成功地将我的实例事件数组传递给javascript，如下所示：

<%= javascript_tag do %>
  var events = <%= raw @calendar_events.to_json %>
<% end %>

这是一个像这样的数组[[“标题”，“事件日期”]，…]
但是如何将它们放入BeforeShowday的日期选择器中呢？？？

这是我第一次尝试，但不起作用

$("#datepicker").datepicker({
  jQuery.each(events, function(index, event) {
    beforeShowDay: function(event[0]) {
      return [true, "", event[1]];
    }
  });
});

---

从文档中可以看出，数组只是jQueryUI所寻找的东西的一个顺序

该函数将日期作为参数，并且必须返回一个数组，其中[0]等于true/false，指示此日期是否可选择，[1]等于CSS类名或默认演示文稿的“”，以及[2]此日期的可选弹出工具提示。在显示日期选择器之前，每天都会对其进行调用

基本上，函数需要返回三项

日期是否可以选择

你应该在当天增加一节课吗

它的工具提示是什么

下面是一个代码示例

// what the function should return
return [
  (boolean) is the date selectable,
  (string) the class to add to the day,
  (string) the text to show when hovered over
]

更新：堆栈溢出（我假设所有堆栈交换站点）使用以下内容显示“已访问”日历。我认为这个方法比我的好得多，所以我要替换它

实际的“访问”日期存储在JSON中，如下所示

{__YEAR__: {__MONTH__: {__DAY__:1}}}

这里有一个例子

var visited = {2012: {1: {1:1, 3:1, 4:1, 5:1, 18:1,19:1}, {3: {4:1, 5:1}}}

然后在showDay之前的

内

确保

访问对象的键存在。这是他们代码的我的版本

beforeShowDay: function(date) {
  var y = date.getFullYear(),
      m = date.getMonth() + 1,
      d = date.getDay(),

      hasVisited = visited[y] && visited[y][m] && visited[y][m][d];

  return [false, (hasVisited ? 'has-visited-class' : ''), 'date'];        
}

生成填充此内容所需的JSON非常特定于您的表结构。如果您在创建JSON方面需要帮助，我需要更多的帮助

更新2
问题是JavaScript不能在对象内调用函数，这是无效的语法。另一件事是，我担心通过数组中的所有项进行循环会非常低效

代码的正确语法如下所示。但正如我提到的，由于效率低下，我不建议这样做

注意：在showday:function（\uu参数）

之前的

行中。jQuery会自动传递参数。这意味着您需要确保它是您正在寻找的值，而不是询问jQuery这是否是jQuery正在寻找的值

另一件事是数组从
0
开始。事实上，所有编程语言都从零开始。因此，要获得所需索引处的值，可以这样做

var events = ['created a new product', '30-8-2012'];

console.log(events[0]); // "created a new product"
console.log(events[1]); // "30-8-2012"

下面是您的代码的正确语法，但它无法工作，因为您无法像下面那样从
.each（）
函数返回。我提供这些只是为了让你看到我将如何更正你所写的内容

$("#datepicker").datepicker({
  beforeShowDay: function(date) {
    jQuery.each(events, function(index, event) {
      var active_class = "no-activity";

      // make sure the event's date matches jQuery's date
      if( event[1] == date ) {
        active_class = "had-activity";
      }

      return [true, active_class, event[0]];
    }
  }
});

变化
在控制器内部，您需要以非常具体的方式拉出事件。我建议使用一种新的方法。
Hash
是一个键值对。这意味着您可以将
键设置为日期，将
值设置为标题。这将允许您轻松匹配jQuery提供的日期和事件列表中的日期

这是您需要添加到控制器中的内容。我使用了一个名为
的函数来格式化日期。基本上，我将其更改为“日-月-年”，这将更容易与jQuery匹配

一,。
%e
返回不带零填充的月份日期。所以
1
不是
01

二,。
%-m
返回不带零填充的月份

三,。
%Y
返回四位数的年份

@events = {} # create an empty hash

# get all the events and add them to `@events`
CalendarEvent.select('date, title').all.map do |event|
  @events[event.date.strftime('%e-%-m-%Y')] = event.title
end

然后在JavaScript中，您可以使用获取
@events

<% javascript_tag do %>
$(document).ready(function() {
  var events = <%= @events.to_json %>;

  $("#datepicker").datepicker({
    beforeShowDay: function(date) {
      var y = date.getFullYear(),
          m = date.getMonth() + 1,
          d = date.getDate(), // gets the day of the month
          formatted_date = d + '-' + m + '-' + y;

          hasVisited = events[formatted_date];

      return [true, (hasVisited ? 'has-visited-class' : ''), hasVisited];
    }
  });
});
<% end %>


$（文档）.ready（函数（）{
var事件=；
$（“#日期选择器”）。日期选择器({
beforeShowDay:功能（日期）{
var y=date.getFullYear（），
m=date.getMonth（）+1，
d=date.getDate（），//获取当月的日期
格式化日期=d+'-'+m+'-'+y；
hasVisited=事件[格式化日期]；
return[true，（hasviest？'hasviest class'：''），hasviest]；
}
});
});
类似的问题。我得走了，所以我的答案很快就结束了。如果您有任何问题，请告诉我，我会回复您。谢谢您的回答，但如果我答对了，您的解决方案将允许我只处理“今天”日期以及它是否在事件数组中。但我希望从“今天”开始的所有日子都能被记录在事件列表中。也许你的解决方案给了我一个主意我会公布结果soon@Barbared我相信
beforeShowDay
是在显示月份中的每一天之前调用的。有点像Rails中的过滤器之前的
。对Rails和Javascript来说都是非常新的东西很糟糕=（我的事件数组就像我在问题更新中所说的那样，我应该如何调用beforeShowDay方法？@Barbared
beforeShowDay
是jQuery UI用来定义在显示它时它应该如何处理每天的函数。基本上，jQuery UI在显示HTML之前循环一个月的每一天需要构建元素时，它会问您，“当天是否可以单击，我们是否应该添加一个特殊类，以及是否应该添加工具提示？”。当jQuery在ShowDay
之前调用
时，它会
<% javascript_tag do %>
$(document).ready(function() {
  var events = <%= @events.to_json %>;

  $("#datepicker").datepicker({
    beforeShowDay: function(date) {
      var y = date.getFullYear(),
          m = date.getMonth() + 1,
          d = date.getDate(), // gets the day of the month
          formatted_date = d + '-' + m + '-' + y;

          hasVisited = events[formatted_date];

      return [true, (hasVisited ? 'has-visited-class' : ''), hasVisited];
    }
  });
});
<% end %>