web-dev-qa-db-ja.com

prevおよびnextボタンをクリックしてイベントを呼び出す方法は？

jQuery fullcalendar には、前と次のボタンがあります。これらのボタンをクリックすると、どのようにイベントを呼び出すことができますか？

javascriptjqueryfullcalendar
25
Neo

ボタンにイベントを簡単に添付できます。

$('.fc-button-prev span').click(function(){
   alert('prev is clicked, do something');
});

$('.fc-button-next span').click(function(){
   alert('nextis clicked, do something');
});
26
Nicola Peluchetti

最善の方法は次のとおりです。

viewRender: function(view, element) {
  var b = $('#calendar').fullCalendar('getDate');
  alert(b.format('L'));
},
31
Burak Ogutken

これは私のために働いた：

$('body').on('click', 'button.fc-prev-button', function() {
  //do something
});

$('body').on('click', 'button.fc-next-button', function() {
  //do something
});
14
streak

それらをクリックすると、viewRenderイベントがトリガーされます。その中にコードを追加することもできます。

$('#calendar').fullCalendar({
    viewRender: function(view, element) {
        //Do something
    }
});
8
Allfarid Morales García

とき next そして previous ボタンがクリックされると、 events 関数が呼び出されます。現在の年のデータをロードする例を次に示します。

$(document).ready(function() {
  loadCal();
});

function loadCal() {

  var current_url = '';
  var new_url = '';

  $('#calendar').fullCalendar({

    // other options here...

    events: function(start, end, callback) {

      var year = end.getFullYear();

      new_url = '/api/user/events/list/' + id + '/year/' + year;

      if (new_url != current_url) {

        $.ajax({
          url: new_url,
          dataType: 'json',
          type: 'POST',
          success: function(response) {

            current_url = new_url;
            user_events = response;

            callback(response);
          }
        })
      } else {
        callback(user_events);
      }
    }
  })
}

クエリで結果を取得するときは、少なくとも前年の最後の10日間と来年の最初の10日間を含めるようにしてください。

7
Onshop

別の解決策は、カスタムprev/nextボタンを定義することです：

$('#m_calendar').fullCalendar({
 header: {
         left: 'customPrevButton,customNextButton today',
         center: 'title',
 },
 customButtons: {
                customPrevButton: {
                    text: 'custom prev !',
                    click: function () {
                        alert('custom prev ! clicked !');

                    }
                },
                customNextButton: {
                    text: 'custom ext!',
                    click: function () {
                       alert('custom ext ! clicked !');
                    }
                },
            }
});
1
Jack Le Black

イベントでのカレンダーの宣言中に、イベントのコールバック関数を作成できます。

$('#calender').fullCalendar({

events:  function (start, end, timezone, callback) {
                    callback(eventsarray);
                }
});

// eventsarray-これはカレンダーのデータのコレクションです。また、選択/現在の月の最初と最後の日付を渡し、prevとnextイベントを処理することで、これで月単位の関数を呼び出すこともできます。

1
Mahavirsinh Padhiyar

簡単な更新ですが、どのくらいの期間かはわかりませんが、受け入れられた答えは次のように機能します：

$('.fc-prev-button').click(function(){
   alert('prev is clicked, do something');
});

$('.fc-next-button').click(function(){
   alert('nextis clicked, do something');
});

わずかな変化に注意してください。

また、今日のクリックは次のとおりです。

$(".fc-today-button").click(function () {

私が誰かを助けたことを願っています。

1
Иво Недев
$('.fc-button-next span').click(function(){

   //do your work 

});


$('.fc-button-prev span').click(function(){

   //do your work 

});
0
Kanishka Panamaldeniya