1

ここで初めて質問します。ここでいくつかの異なるスレッドを使用して、ファンシーボックスでイベント情報を開くフルカレンダーを作成しました。より具体的には、各日には、ファンシーボックスでその日のイベントのリストを開く (イベントとして構造化された) リンクがあります。

次のコードを使用して、カレンダーとファンシーボックスのリンクを作成しました。

$('#calendar').fullCalendar({
  height: 550,
  eventClick: function(event) {
    if (event.url) {
      $("a").fancybox({
        'href'  : event.url,
        'width' : '6',
        'height'        : '100%',
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic',
        'type'          : 'iframe'
      });
      return false;
    }
  },

  eventSources: [
    {
      events: [
      <?php
      $query = "SELECT date, COUNT(*) AS num_events FROM events GROUP BY date ORDER BY date";
      $result = mysql_query($query);
      $numRows = mysql_num_rows($result);
      $count = 0;
      while ($row = mysql_fetch_assoc($result))
      {
        $count++;
        $num_events = $row['num_events'];
        if ($num_events == '1') {$num_events .= ' event';}
        else {$num_events .= ' events';}
        $url = 'dayEvents.php?d='.$row['date'];
        $date = $row['date'];
        ?>
        {
        title   : '<?php echo $num_events; ?>',
        start   : '<?php echo $date; ?>',
        url : '<?php echo $url; ?> '
        }<?php if ($count < $numRows) { echo ","; } ?>
      <?php }?>                             
      ],
      color: 'white',
      textColor: '#2287c4'
    }
  ]
})

});

私が経験しているシナリオは次のとおりです。

リンク A をクリックしても、何も起こりません。
リンク A をもう一度クリックすると、ファンシーボックスが開き、リンク A の URL が表示されます。ファンシーボックスを出ます。リンク B をクリックすると、ファンシーボックスがリンク A の URL で再び開きます。ファンシーボックスを出ます。リンク C をクリックすると、ファンシーボックスがリンク B の URL で開きます。さらに、カレンダー外のリンクをクリックすると、リンク C の URL が入ったファンシーボックスが開きます (これは、カレンダーのイベントをクリックするまで起こりません)。

基本的に、リンクは 1 回のクリックで遅延し、fancybox はページ上の任意のリンクのイベント ハンドラーを作成しています。これを引き起こしている可能性のあるものと、それを修正するために私ができることを誰かが知っていますか?

ありがとう。

4

1 に答える 1

3

現在、ユーザーがイベントをクリックするたびに、コードがページ全体のすべての「a」要素に派手なボックスを配置しているため、奇妙な動作が発生しています。

「eventClick」コールバックを使用する代わりに、fancybox の初期化コードを「eventAfterRender」コールバックに入れます。その名前が示すように、このコールバックは、各カレンダー イベントが描画された後に呼び出されます。このようにして、カレンダーが読み込まれるとファンシー ボックスが初期化され、ユーザーがイベントをクリックすると準備が整います。

また、jquery セレクターを $("a").fancybox(.... から $("a",element).fancybox(... に変更する必要があります。ここで、'element' は eventAfterRender コールバックに提供されるパラメーターです。 fullcalendar による (eventAfterRender 関数の fullcalendar ドキュメントを参照してください) これにより、セレクターがレンダリングされた単一のカレンダー イベントの div に制限されます。

編集 fancybox について詳しく読んだ後、最初に <a> 要素にアタッチせずに直接開くことができることがわかりました。ユーザーが実際にカレンダー イベントをクリックしない限り、任意のファンシー ボックスを初期化しないため、これはおそらく上で提案した方法よりもはるかに優れたソリューションです。したがって、フルカレンダーの初期化では、eventClick を次のように置き換えます。

eventClick: function(event) {
    if (event.url) {
      $.fancybox({
        'href' : event.url,
        'type' : 'iframe',
         other options as you like...
      });
      return false;
    }
  },
于 2012-08-04T17:56:54.543 に答える