1

管理者が作成したすべてのイベントを色分けして表示する日付ピッカーがあります。イベントのタイトルにツールチップを追加する機能を追加するとよいでしょう。

jQueryUI の datepickerがそのようなことを許可していることは知ってい ます。beforeShowDayメソッドを使用する必要があります。しかし、ここで疑問が生じます。

1) @events 配列を jquery コードに渡すにはどうすればよいですか? ビューでその配列にアクセスできることはわかっていますが、次のようなことを許可されていますか:

var events = @events;

2) 2 番目の最も重要な質問です。このアプローチにより、私のアプリケーションは膨大な量のイベントを処理することになります。イベントが多くなり始めると、これによりすべてが遅くなります。今日の日付に応じて、数か月でイベントを制限するにはどうすればよいですか?
明確になることを願っています。何か助けて??

更新 1 (最初の問題と 2 番目の小さな部分が解決されました) わかりました、次のようにインスタンス イベント配列を javascript に渡すことができました。

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

このようにして、スコーピングを介してコントローラーで簡単にイベントを制限できます。
ブラウザ コンソール イベント配列をチェックインすると、次のように構成されます。

[[" Snap-happy athletes ca...arrival at London 2012 ", "2012-07-28T00:00:00Z"], ["AdWords API Office Hours EMEA", "2012-07-25T00:00:00Z"], ["Under the math", "2012-07-22T00:00:00Z"], ["Superman power", "2012-07-13T00:00:00Z"], ["Google I/O 2012 Keynote","2012-07-01T00:00:00Z"]]

[["title", "date of the events"], ...]
のように作成された配列はどれですか?

これは私の最初の試みですが、うまくいきません

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

1 に答える 1

2

ドキュメントから、配列は jQuery UI が探しているものの順序にすぎないように見えます。

この関数はパラメータとして日付を取り、この日付が選択可能かどうかを示す true/false に等しい [0]、CSS クラス名に等しい [1] またはデフォルト プレゼンテーションの "" の配列を返す必要があります。 、[2] この日付のオプションのポップアップ ツールチップ。表示される前に、日付ピッカーで毎日呼び出されます。

基本的に、この関数は 3 つの項目を返す必要があります。

  1. 日付が選択可能かどうか
  2. その日にクラスを追加する必要がありますか
  3. そのツールチップは何ですか

これがコードの例です

// 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
]

更新:スタック オーバーフロー (およびすべてのスタック Exchange サイトを推測します) は、「訪問済み」カレンダーを表示するために次を使用します。この方法は私の方法よりもはるかに優れていると思うので、置き換えます。

実際に「訪問した」日付は、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}}}

次に、内部でオブジェクトのキーが存在するbeforeShowDayことを確認します。visitedこれが私のバージョンのコードです。

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 がオブジェクト内で関数を呼び出すことができないことです。これは無効な構文です。もう 1 つは、配列内のすべての項目をループ処理するのは非常に効率が悪いことです。

コードの正しい構文は次のようになります。しかし、前述したように、非効率であるため、これを行うことはお勧めしません。

注:行でbeforeShowDay: function(__PARAM__). __PARAM__は jQueryによって自動的に渡されます。つまり、jQuery が探している値かどうかを jQuery に尋ねるのではなく、探している値であることを確認する必要があります。

もう 1 つは、配列が から始まることです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]];
    }
  }
});

変更

コントローラー内では、非常に具体的な方法でイベントを引き出す必要があります。Ruby Hashを使用することをお勧めします。AHashはキーと値のペアです。つまり、keyを日付に、 をvalueタイトルに設定できます。これにより、jQuery が提供する日付とイベント リストの日付を簡単に一致させることができます。

これは、コントローラーに追加する必要があるものです。strftime()日付をフォーマットするという関数を使用しました。基本的にはjQueryに合わせやすい「日月年」に変更しました。

1. %eゼロ パディングなしで日付を返します。そう1ではありません01。

2. %-mゼロ パディングなしで月を返します。

3. %Y4 桁の年を返します。

@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 で with を取得できます@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 %>
于 2012-08-29T13:39:49.523 に答える