| Issue 2114: | Recalculate calendar sizing/dimensions when window.onload fires | |
| 3 people starred this issue and may be notified of changes. | Back to list |
When the default view is set to agenda week and the container for the calendar is set to 100% width or has no limitation to size (can fill the entire width of the page), resizing an event does not work the first time. When resizing an event the calendar "jumps" and the event reverts to the original size. After this the resizing works. If I reduce my browser window to around half size of my screen, the problem goes away, and therefor I presume that high resolution causes this error. Additional note: when the calendar "jumps" it looks like that the day columns are corrected in width. I have testet this in Chrome and Firefox. Screen resolution 1600 x 900. To reproduce, please use the following code and add the references for jQuery UI (just the standart download of this, I couldn't find a CDN link or similar for this, sorry): HTML (index.html): <!DOCTYPE html> <html lang="en"> <head> <title>jQuery Week Calendar test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css" title="myStyle" media="screen"> @IMPORT "http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css"; <@IMPORT "jquery-ui-1.10.4/themes/base/jquery-ui.css";> </style> <script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.min.js'></script> <script type='text/javascript' src='jquery-ui-1.10.4/ui/jquery-ui.js'></script> <script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.js'></script> <script type='text/javascript' src='calendar.js'></script> </head> <body> <div id="content" style="min-width: 800px;"> <div id='calendar'></div> </div> </body> </html> JavaScript (calendar.js): $('document').ready( function() { var d = new Date(); var today = d.getFullYear() + '-' + ('0' + (d.getMonth() + 1)).slice(-2) + '-' + d.getDate(); //alert(today); $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultView: 'agendaWeek', editable: true, events: [ { title: 'My event', start: today + ' 08:00:00', end: today + ' 09:00:00', allDay: false } ] }); }); Please let me know if you need anything else to reproduce this. Thanks in advance / Kenni
Jun 7, 2014
Project Member
#1
adamrs...@gmail.com
Status:
Invalid
Feb 1, 2015
I know this is an old question but check this thread out: https://stackoverflow.com/questions/8228969/fullcalendar-wrong-size-on-first-load The solutions worked for this problem.
Feb 9, 2015
I've seen this problem enough times, and experienced it enough times myself (recently w/ loading a html5 font library after the document is ready) that it might make sense to do a built-in solution... executing an updateSize when window.onload fires...
Summary:
Recalculate calendar sizing/dimensions when window.onload fires
(was: Resizing event not working (first time))
Status: Accepted Labels: Type-Feature
Aug 21, 2015
Discussion for this issue has moved to the following URL: https://github.com/fullcalendar/fullcalendar/issues/2379 This is because Google Code is shutting down. Apologies if you are being pestered with these notifications. This is a one-time event. Happy coding, Adam
Status:
ExportedToGithub
|
|
| ► Sign in to add a comment |