完整的日历标题选项作为下拉导航 [英] full calendar header options as drop down navigation

问题描述

我必须在下拉菜单中放置全日历标题选项(即日视图，周视图和月视图).选择此选项之一后，将转到特定选项.我们如何自定义呢?有人知道如何执行此操作吗?任何帮助将不胜感激.

I have to put fullcalendar header options(i.e Day view, Week view and Monthly view) in a drop down menu. After selecting one of this option, it'll go to particular one. How can we customise this ? Any one have idea about how to do this ? Any help would be appreciated.

推荐答案

要获取下拉导航，您需要将标头设置为false，并且必须从浏览器中提取导航栏HTML代码并放入HTML文件.您应该使用这些导航栏类调用完整的日历，这样就可以正常工作.这是我的工作代码笔，请检查一下. 完整的日历下拉菜单导航

To get the drop down navigation, you need to make header as false and you have to pull navigation bar HTML code from browser and put in HTML file. You should call full calendar with those navigation bar classes and it'll work fine. Here is my working code pen, please check it. full calendar drop down menu navigation

HTML文件

<div class="fc-toolbar">
  <div class="fc-left">
    <div class="fc-button-group">
      <button class="fc-prev-button fc-button fc-state-default fc-corner-left" 
       type="button">
        <span class="fc-icon fc-icon-left-single-arrow"></span>
      </button>
      <button class="fc-next-button fc-button fc-state-default fc-corner- 
      right" type="button">
         <span class="fc-icon fc-icon-right-single-arrow"></span>
      </button>
    </div>
    <button class="fc-today-button fc-button fc-state-default fc-corner-left 
       fc-corner-right fc-state-disabled">today</button>
 </div>
 <div class="fc-right">
    <div class="fc-button-group">
      <select id="my-select">
         <option class="fc-agendaDay-button fc-button fc-state-default fc- 
           corner-right">agendaDay</option>
         <option class="fc-agendaWeek-button fc-button fc-state- 
          default">agendaWeek</option>
      </select>
    </div>
  </div>
 <div class="fc-center">
   <h2>January 2019</h2>
 </div>
 <div class="fc-clear"></div>
</div>

JS文件

$(window).load(function(){
  $('.fc-prev-button').click(function() {
    $('#calendar').fullCalendar('prev');
  });
  $('.fc-next-button').click(function() {
    $('#calendar').fullCalendar('next');
  });
  $('.fc-today-button').click(function() {
    $('#calendar').fullCalendar('today');
  });
  $("#my-select").click(function(e){
    $('#calendar').fullCalendar('changeView', 
      this.options[e.target.selectedIndex].text);
  })

 $('#calendar').fullCalendar({
   header: false,
   defaultView: 'agendaDay',
   editable: true,
   eventRender: function(event, element, view) {
      for (var i = 0; i<= event.products.length - 1; i++) {
         element.append('<span>'+event.products[i].name+'<span>');    
      };   
   },
   events: [
            {
                title: 'EventName',
                start: '2019-01-23',
                products:[
                            {

                                name:'ProductName'
                            }
                        ]
            },
            {
                title: 'Event',
                start: '2019-01-23',
                products:[
                            {

                                name:'ProductName'
                            }
                        ]
            },
            {
                title: 'EventNAme',
                start: '2019-01-22',
                products:[
                            {

                                name:'ProductName1'
                            },
                            {

                                name:'ProductName2'
                            }
                        ]
            },
            {
                title: 'Event',
                start: '2019-01-23',
                products:[
                            {

                                name:'ProductName1'
                            },
                            {

                                name:'ProductName2'
                            }
                        ]
            },
            {
                title: 'Eventname',
                start: '2019-01-23',
                products:[
                            {

                                name:'ProductName'
                            }
                        ]
            },
            {
                title: 'Event',
                start: '2019-01-24',
                products:[
                            {

                                name:'ProductName'
                            }
                        ]
            }
        ],
        dayClick: function(date, allDay, jsEvent, view) {

      }   

    }); 
  })

这篇关于完整的日历标题选项作为下拉导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！