3

我是一个完整的日历新手。

我为客户网站创建了一个页面，该页面显示默认（月）视图，并且可以按月来回显示。顺便说一句，我不知道“今天”按钮在这种情况下的作用，所以我将它从标题中删除。

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

更改为 basicDay 似乎相当简单：

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

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

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

4

3 回答 3

4

定义您希望在header日历选项中可用的视图以及导航按钮：

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

当视图改变时，使用viewDisplay回调做一些事情：

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

它在文档中。查看示例源代码。

于 2012-09-06T22:24:15.327 回答
1

实际上：

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

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

要更改视图，请使用：

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

于 2015-02-19T16:51:03.333 回答
0

这是在视图之间切换甚至拥有自定义菜单的方法：

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

'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
  };

});
于 2018-06-14T08:22:43.193 回答