full calendar header options as drop down navigati

Question

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.

Answer 1

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 file

<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 file

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

      }   

    }); 
  })