CODEWITHSUNDEEP
jqueryfullcalendar
David Camm
David Camm

Reputation: 41

fullcalendar switching between month view and day view

i'm a fullcalendar newbie.

i've created a page for a customer's website which shows the default (month) view and can go back and forth by months. as an aside, i have no idea what the 'today' button does in this context so i removed it from the header.

what i want to do is to implement the dayClick callback to change the view to basicDay, then allow viewer to go back.

changing to basicDay seems to be fairly simple:

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

but how does the viewer get back? the basicDay view doesn't seem to have anything clickable. at least i can't find it in the docs.....

perhaps i'm missing something obvious?

Upvotes: 3

Views: 14187

Answers (3)

aalesund
aalesund

Reputation: 313

Here is how to switch between views and even have a custom menu:

With initialization set right side of header to blank:

'header' => [ 'left'=>'today','center'=>'prev, title, next','right'=> ''],

(that is the format in Yii2, pure javascript is similar)

Add the custom header html with jquery, Use jquery to bind a function to click events, Create a function to handle the different cases and change the calendar view.

The function is thoroughly commented, this code is working and in production.

Here is the javascript to create a custom top right header with overridden handling for the standard full calendar buttons:

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

});

Upvotes: 0

yassine
yassine

Reputation: 117

Well, actually:

To detected view change use : 

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

To change the view use :

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

Upvotes: 1

MalSu
MalSu

Reputation: 541

Define the views you want available in the header option of the calendar, as well as the navigation buttons:

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

Use the viewDisplay callback to do something when the view is changed:

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

Its in the docs. View the example source code.

Upvotes: 4

Related Questions