Question

我是一个全日历新手。

我为客户的网站创建了一个页面，其中显示了默认（月份）视图，并且可以按月来回查看。顺便说一句，我不知道'今天'按钮在这个上下文中做了什么，所以我从标题中删除了它。

我想要做的是实现dayClick回调以将视图更改为basicDay，然后允许查看器返回。

更改为basicDay似乎相当简单：

dayClick: function(date, allDay, jsEvent, view) {
  $(this).( 'changeView', 'basicDay' )
}

但观众如何回来？ basicDay视图似乎没有任何可点击的内容。至少我在文档中找不到它.....

也许我错过了一些明显的东西？

Answer 1

在日历的header选项中定义您想要的视图，以及导航按钮：

header: {
  left: 'prev,next today',
  center: 'title',
  right: 'month,basicWeek, basicDay'
}

使用viewDisplay回调在视图更改时执行某些操作：

viewDisplay: function(view) {
  console.log(view.name);
}

它在docs。查看example源代码。

Answer 2

嗯，实际上：

要检测到视图更改，请使用：

viewRender: function(view) {
   console.log(view.name);
},

要更改视图，请使用：

my_function(){ p_calendar.fullCalendar('changeView', 'month'/*Or anything else*/); }

Answer 3

以下是如何在视图之间切换甚至是自定义菜单：

初始化将标题的右侧设置为空白：

'header' => [ 'left'=>'today','center'=>'prev, title, next','right'=> ''],

（这是Yii2中的格式，纯javascript类似）

使用jquery添加自定义标头html，使用jquery将函数绑定到单击事件，创建一个函数来处理不同的情况并更改日历视图。

该功能已经过全面评论，此代码正在生产中。

以下是用于创建自定义右上角标题的JavaScript，其中包含对标准完整日历按钮的重写处理：

var htm = '<div class="dropdown" style="display:-webkit-inline-box"><button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Bytt Visning</button><div class="dropdown-menu pull-right" style="width:170px" aria-labelledby="dropdownMenu2"><button class="dropdown-item fc-agendaDay-button fc-button fc-state-default fc-state-active" type="button">Dag</button><button class="dropdown-item fc-agendaWeek-button fc-button fc-state-default" type="button">Uke</button><button class="dropdown-item fc-month-button fc-button fc-state-default" type="button">Måned</button><button class="dropdown-item fc-listYear-button fc-button fc-state-default" type="button">År</button></div></div><button type="button" class="btn btn-secondary fc-listDay-button fc-button fc-state-default toggle"><i class="fa fa-toggle-off"></i></button><button type="button" class="btn btn-secondary fc-listWeek-button fc-button fc-state-default hidden toggle"><i class="fa fa-toggle-off"></i></button><button type="button" class="btn btn-secondary fc-listMonth-button fc-button fc-state-default hidden toggle"><i class="fa fa-toggle-off"></i></button>';

$(document).on('ready', function () { 
  $('.fc-right').append(htm);

  $('.fc-listYear-button').on('click', {name:'listYear'},myChangeView);

  $('.fc-month-button').on('click', {name:'month', toggle: 'listMonth'},myChangeView);
  $('.fc-listMonth-button').on('click', {name:'listMonth', toggle: 'month'},myChangeView);

  $('.fc-agendaWeek-button ').on('click', {name:'agendaWeek', toggle: 'listWeek'},myChangeView);
  $('.fc-listWeek-button ').on('click', {name:'listWeek', toggle: 'agendaWeek'},myChangeView);

  $('.fc-agendaDay-button').on('click', {name:'agendaDay', toggle: 'listDay'},myChangeView);
  $('.fc-listDay-button').on('click', {name:'listDay', toggle: 'agendaDay'},myChangeView);

  function myChangeView(event) {    

    if(event.data.toggle)//button with corresponding toggle button or toggle button
    {    
      if(event.data.name.indexOf('list') == 0)//toggle button
      {
        if($('.fc-'+event.data.name+'-button').html() == '<i class="fa fa-toggle-on"></i>') //is it already toggled on?
        {      
          $('.fc-'+event.data.name+'-button').html('<i class="fa fa-toggle-off"></i>'); //toggle to off        

          $('#calendar').fullCalendar('changeView', event.data.toggle);//render the opposite view to the current view (toggle views)
          return; //do not proceed to the rest of the code
        }
        else //it was not already toggled on
        {
          $('.toggle').addClass('hidden');     //hide all toggles  
          $('.fc-'+event.data.name+'-button').html('<i class="fa fa-toggle-on"></i>');//toggle to on
          $('.fc-'+event.data.name+'-button').removeClass('hidden'); //show that one toggle           
        }
      }
      else //button with corresponding toggle button (in dropdown menu)
      {
        $('.toggle').addClass('hidden');  //hide all toggles  
        $('.toggle').html('<i class="fa fa-toggle-off"></i>'); //toggle to off
        $('.fc-'+event.data.toggle+'-button').removeClass('hidden');   //show that one toggle  
      }


    }
    else
    {
      $('.toggle').addClass('hidden');   //hide all toggles 
      $('.toggle').html('<i class="fa fa-toggle-off"></i>');  //reset all toggles to off    
    }
      $('#calendar').fullCalendar('changeView', event.data.name);  //render the requested view
  };

});

fullcalendar在月视图和日视图之间切换

3 个答案: