Ujjwal-Nadhani
Ujjwal-Nadhani

Reputation: 613

FullCalendar - changeView Not Working

I am using fullCalendar to display a Google Calendar. I want the calendar to change into an agendaDay view. Currently, I'm using this block of code to change the view:

if (($(window).width() / $(window).height()) < 0.95) {
    console.log("Here");
    $('#calendar').fullCalendar('changeView', "agendaDay")
}

This is how my calendar is set up:

    $(document).ready(function() {
        $('#calendar').fullCalendar({
            googleCalendarApiKey: 'AIzaSyDIQZLuITK90tlTtdHN4cSkdLW9aRznnL4',
            events: {
                googleCalendarId: '[email protected]'
            }
        });
    });

And, I am using Bootstrap, so I have this HTML:

  <div class="container first-container">
    <div class="col-md-12">
      <h2 class="about-calendar">Calendar</h2>
      <hr>
        <div id='calendar'></div>
    </div>
  </div>

I am sure I'm missing something basic. I am new to web programming. Any help would be appreciated.

Thanks.

Upvotes: 0

Views: 1110

Answers (1)

Searching
Searching

Reputation: 2279

You will need to listen to the window resize event for the outcome. You can use jQuery to listen like so. Other than that it looks OK.

 $(document).ready(function () {
    $('#calendar').fullCalendar({
        googleCalendarApiKey : 'AIzaSyDIQZLuITK90tlTtdHN4cSkdLW9aRznnL4',
        events : {
            googleCalendarId : '[email protected]'
        }
    });
    $(window).resize(function () {
        console.log(($(window).width() / $(window).height()));//can be removed
        if (($(window).width() / $(window).height()) < 0.95) {
            console.log("Here");
            $('#calendar').fullCalendar('changeView', "agendaDay") //Change this accordingly
        } else {
            $('#calendar').fullCalendar('changeView', "agendaWeek") //Change this accordingly
        }
    });
 });

.resize()

If this is not what you wanted, please let us know.

Upvotes: 1

Related Questions