I am using fullcalendar (fullcalendar by adam shaw)
I am wondering what I would need to do so that my fullcalendar dynamically changes size depending on the size of the browser window? I have looked into his 'render' function a little bit but have been having trouble figuring this out.
(ie, when a user resizes their window I would like fullcalendar to readjust it's width and height to a proper aspect ratio)
ready(function() { $(window). resize(function() { $('#calendar'). fullCalendar('option', 'height', get_calendar_height()); }); //set fullcalendar height property $('#calendar'). fullCalendar({ //options height: get_calendar_height }); });
If you are using Custom View, you can change the visibleRange in the same way: calendar. changeView('timeGrid', { start: '2017-06-01', end: '2017-06-05' }); This date/visibleRange parameter was added in version 3.3.
although it is not specified on the fullcalender site, it is necessary to assign a value to the "allday" parameter to be able to add new events dynamically. If you set this value to "false", it will not add the event to the AllDay row. If you do "true" it will add to the AllDay row. Show activity on this post.
Detect when the user clicks on dates or times. Give the user the ability to select multiple dates or time slots with their mouse or touch device. Allows a user to highlight multiple days or timeslots by clicking and dragging.
It's all documented.
Let's see, try something along this lines:
//function to calculate window height
function get_calendar_height() {
return $(window).height() - 30;
}
//attacht resize event to window and set fullcalendar height property
$(document).ready(function() {
$(window).resize(function() {
$('#calendar').fullCalendar('option', 'height', get_calendar_height());
});
//set fullcalendar height property
$('#calendar').fullCalendar({
//options
height: get_calendar_height
});
});
Apply similar to width. Or you could place calendar in div and do manipulations that way.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With