Reputation: 613
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
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
}
});
});
If this is not what you wanted, please let us know.
Upvotes: 1