如何删除 FullCalendar 中的“上一个”、“下一个”和“今天”按钮

Question

我尝试过这样的事情

viewRender: function(currentView){

            $('body').remove('.fc-prev-button');
            $('body').remove('.fc-next-button');
            $('body').remove('.fc-today-button');

            }
        });

但它并没有删除这些按钮。我究竟做错了什么？在全日历配置中执行此操作的正确方法是什么？

Answer 1

您不必在标题中设置选项。类似这样的事情。

header: {
    left:   'title',
    center: '',
    right:  'today '
}

看这里： 完整日历文档

Answer 2

初始化日历时，从标题的

prev

、

next

或

today

中删除

left

、

center

和/或

right

。没有

prev

、

next

和/或

today

的标题示例：

$('#calendar').fullCalendar({
   header: { // layout header
     left: '', 
     center: '',
     right: 'month,agendaWeek,listWeek'
   },
   views: { // set the view button names
    listWeek: {buttonText: 'list week'}
   }
});

Answer 3

这里有几行代码，用于隐藏“上一个、下一个和今天”按钮，还隐藏月视图并从移动视图的日历中隐藏周六和周日（我将其设置为 400 像素宽度以下）：

var calendarEl = document.getElementById('calendar');

var headerJSON = {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,dayGridWeek,listWeek' // view buttons on large screens
  };

var hiddenDaysArray = [];

if($(window).width() < 400) 
{
    headerJSON = {
        left: '', // hide prev,next today in mobile view
        center: 'title',
        right: 'dayGridWeek listWeek' // hide dayGridMonth on small view
      };

    hiddenDaysArray = [0,6]; // hide sunday,saturday on small view
}   

var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
  header: headerJSON,
  hiddenDays: hiddenDaysArray, // hide Sundays and Saturdays on mobile
  ...