My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 2114: Recalculate calendar sizing/dimensions when window.onload fires
3 people starred this issue and may be notified of changes. Back to list
Status:  ExportedToGithub
Owner:  ----
Closed:  Aug 2015


Sign in to add a comment
 
Reported by kpisak...@gmail.com, Mar 12, 2014
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
(No comment was entered for this change.)
Status: Invalid
Feb 1, 2015
#3 psyke...@gmail.com
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
Project Member #4 adamrs...@gmail.com
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
Project Member #5 adamrs...@gmail.com
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

Powered by Google Project Hosting