Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

fullcalendar - resize calendar on window resize

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)

like image 663
captainrad Avatar asked Apr 02 '12 18:04

captainrad


People also ask

How do I resize fullCalendar?

ready(function() { $(window). resize(function() { $('#calendar'). fullCalendar('option', 'height', get_calendar_height()); }); //set fullcalendar height property $('#calendar'). fullCalendar({ //options height: get_calendar_height }); });

How do I change the view in fullCalendar?

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.

How do I create a dynamic event in fullCalendar?

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.

How do I select multiple dates in fullCalendar?

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.


1 Answers

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.

like image 133
Matija Grcic Avatar answered Oct 04 '22 20:10

Matija Grcic