полные параметры заголовка календаря в виде раскрывающейся навигации

Question

Я должен поместить параметры заголовка fullcalendar (т. Е. Просмотр дня, просмотр недели и просмотр месяца) в раскрывающемся меню.После выбора одного из этих вариантов он перейдет к определенному.Как мы можем настроить это?У кого-нибудь есть идеи о том, как это сделать?Любая помощь будет оценена.

Answer 1

Чтобы получить раскрывающуюся навигацию, вам нужно сделать заголовок ложным и вытащить HTML-код панели навигации из браузера и поместить в HTML-файл.Вы должны вызвать полный календарь с этими классами панели навигации, и он будет работать нормально.Вот мой рабочий код, пожалуйста, проверьте его. полное раскрывающееся меню навигации по календарю

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) {

      }   

    }); 
  })