如何在单击上一键和下一键时调用事件

在jQuery fullcalendar中我们有上一页和下一页按钮。我们如何在点击这些按钮时调用一些事件?

最好的方法是:

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

您可以简单地为按钮附加一个事件:

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

这对我有用:

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

当你点击它们时，viewRender事件被触发。你也可以在里面添加你的代码。

$('#calendar').fullCalendar({
    viewRender: function(view, element) {
        //Do something
    }
});

我看到还有其他工作的答案，但IMHO最简单和更正确的-至少使用FullCalendar v.4 -是拦截prev和next是处理他们的自定义按钮相同的方式。

这是我的设置(使用toastr只是为了演示的目的)

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'dayGrid', 'timeGrid' ],
    header: {
      left: 'dayGridMonth,timeGridWeek,timeGridDay',
      center: 'title',
      right: 'prev,next'
    },
    footer: {
      left: '',
      center: '',
      right: 'prev,next'
    },
    customButtons: {
      prev: {
        text: 'Prev',
        click: function() {
                    // so something before
                    toastr.warning("PREV button is going to be executed")
                    // do the original command
                    calendar.prev();
                    // do something after
                    toastr.warning("PREV button executed")
        }
      },
      next: {
        text: 'Next',
        click: function() {
                    // so something before
                    toastr.success("NEXT button is going to be executed")
                    // do the original command
                    calendar.next();
                    // do something after
                    toastr.success("NEXT button executed")
        }
      },
    }
  });
  calendar.render();
});

查看此处的Codepen

FULLCALENDAR VERSION 5解决方案:

如果你正在使用FullCalendar的版本5，我会建议你使用datesSet而不是使用.click()。

datesSet: function() {
    myFunction();
}

myFunction()将在每次更改或初始化日历日期范围时被调用。换句话说，当你点击日历中提供的上/下一个按钮时，日历的日期范围将被更改，myFunction()将被调用。

参考:https://fullcalendar.io/docs/datesSet

如果你真的想用.click()的方式，下面的代码可以用于FullCalendar的版本5。

$('.fc-prev-button').click(function(){
    myFunction();
});
$('.fc-next-button').click(function(){
    myFunction();
});

这两种方法都是完美的工作在我的项目(版本5的FULLCALENDAR)，希望这可以帮助人们谁是挣扎的问题。

单击下一个和上一个按钮时，调用事件函数。下面是加载当前年份数据的示例:

$(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天。

版本3答案是使用:

viewRender: function (event, element, view){
// you code here
}

版本4 :https://fullcalendar.io/docs/v4/datesRender

datesRender: function (){
    // you code here
    }

https://fullcalendar.io/docs/v4/upgrading-from-v3

"viewRender改名为datesRender。参数已更改。"

版本5用法:

datesSet: function (){
    // you code here
    }

"datesRender更改为:datesSet -从datesRender重命名。在视图的日期初始化后或更改时调用。"https://fullcalendar.io/docs/upgrading-from-v4

另一个解决方案是定义自定义的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 !');
                    }
                },
            }
});

只是一个快速更新，不知道多久，但接受的答案对我来说是这样的:

$('.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 () {

希望我能帮到你。

在事件中声明日历时，您可以编写事件的回调函数:

$('#calender').fullCalendar({
events:  function (start, end, timezone, callback) {
                    callback(eventsarray);
                }
});

//eventsarray -这是日历数据的集合。你也可以通过传递所选/当前月份的第一个和最后一个日期来调用月份函数，并处理前一个和下一个事件。

$('.fc-button-next span').click(function(){
   //do your work 
});

$('.fc-button-prev span').click(function(){
   //do your work 
});

用on代替click

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

当你的日历可以在任何时间点动态初始化时，这是很有用的。

如果你无法回答以上问题，可以试试这个:

$('span.fc-button.fc-button-prev.fc-state-default.fc-corner-left').click(function() {
    alert('prev is clicked, do something');
});
$('span.fc-button.fc-button-next.fc-state-default.fc-corner-right').click(function() {
    alert('next is clicked, do something');
});

FullCalendar v3.4.0

上一页,下一个。按钮:

$(document).ready(function(){
$('#mycalendar').fullCalendar({

$('.fc-prev-button').click(function(){
        alert("Clicked prev button");
    });
    $('.fc-next-button').click(function(){
        alert("Clicked next button");
    });
    $('.fc-today-button').click(function(){
        alert('Today button clicked, do something');
    });
    $('.fc-listWeek-button').click(function(){
        alert('list week clicked, do something');
    });
    $('.fc-listMonth-button').click(function(){
        alert('list month clicked, do something');
    });
});
});

第六版
为什么不使用更少代码的更有效的全局解决方案…纯js

document.querySelectorAll(('.fc-button')).forEach(button => {
    button.onclick = () => 'do something...'
})

您可以使用customButtons来获取事件点击或更改按钮图标，就像我下面的代码:

$('#fullcalendar').fullCalendar({
    themeSystem: 'jquery-ui',
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,listMonth'
    },
    height: 'auto',
    editable: false,
    eventSources: [],
    showNonCurrentDates: false,
    fixedWeekCount: false,
    // custom button
    customButtons: {
        prev: {
            // text: 'Prev', // you can choose to use text or icon to your button
            icon: 'left-single-arrow',
            click: function() {
                console.log('Prev');
            }
        },
        next: {
            // text: 'Next', // you can choose to use text or icon to your button
            icon: 'right-single-arrow',
            click: function() {
                console.log('Next');
            }
        },
    }
});
$('#fullcalendar').fullCalendar('render');

相关内容

最新更新

热门标签：