Question

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

Answer 1

要获得下拉导航，您需要将标头设置为false，并且必须从浏览器中提取导航栏HTML代码并放入HTML文件中。您应该使用这些导航栏类调用完整的日历，它会正常工作。这是我的工作代码笔，请检查一下。 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) {

      }   

    }); 
  })

完整的日历标题选项作为下拉导航

1 个答案: