StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery fullcalendar div bigger calendar not stretch nice
text
Body
copied!<p>I have the fullcalendar working. But i have a sidebar users can collapse this then the content box gets bigger but when a user do this then the calendar is not so nice as it was.</p> <p>So i was thinking of the window resize function but this only works when the browser window is changed so how can make it that fullcalendar reacts when the container gets bigger or smaller?</p> <p>The JS to show the calendar:</p> <pre><code>var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); $('#calendar').fullCalendar({ header: { left: 'prev,next', center: 'title', right: 'month,basicWeek,basicDay' }, editable: true }); </code></pre> <p>The class of the sidebar hide and show button is .hide-btn</p> <p>The JS for hide and show the sidebar:</p> <pre><code>$(".hide-btn").click(function(){ if($("#left").css("width") == "0px"){ $("#left").animate({width:"230px"}, 500 ); $("#right").animate({marginLeft:"230px"}, 500); $("#wrapper, #container").animate({backgroundPosition:"0 0"}, 500); $(".hide-btn.top, .hide-btn.center, .hide-btn.bottom").animate({left:"223px"}, 500); } else{ $("#left").animate({width:"0px"}, 500 ); $("#right").animate({marginLeft:"0px"}, 500); $("#wrapper, #container").animate({backgroundPosition:"-230px 0px"}, 500); $(".hide-btn.top, .hide-btn.center, .hide-btn.bottom").animate({left:"-7px"}, 500); } }); </code></pre> <p>Here is a screenshot what happend: <img src="https://i.stack.imgur.com/wfm2f.jpg" alt="enter image description here"></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload