I'm using fullcalendar and need it to size correctly in order to show all content

StackOverflow https://stackoverflow.com/questions/22601007

Pregunta

I'm using the FullCalendar to show some events with an image inside of it, but when I go into the page, they are all clumped together around the 22nd, but if I refresh the page the day boxes readjust to fit them accordingly.

How can I get that result without having the user having to refresh the page?

This is how they look, going in:

This is what I don't want

This is how it looks like after you F5 (refresh)

This is what I want

I've tried putting the events fetcher, and re-renders, but I can't seem to make it work. any ideas?

<!DOCTYPE html>
<head>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src='js/fullcalendar.js'></script>

<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

<link href='css/fullcalendar.css' rel='stylesheet' />
<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
 <script>

            $(document).ready(function(){

                $('#calendar').fullCalendar('option', 'contentHeight', 250);

                .fullCalendar( 'refetchEvents' );

            });

</script>               
<script>




var url;
 $(document).ready(function() {
  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();

  var calendar = $('#calendar').fullCalendar({
      disableDragging: true,
  // editable: true,
   header: {
    left: 'prev,next today',
    center: 'title',
    right: ''
   },
  // events: "events.php?view&editable",
   events: "events.php?view",

   // Convert the allDay from string to boolean
   eventRender: function(event, element, view) {
    if (event.allDay === 'true') {
     event.allDay = true;
    } else {
     event.allDay = false;
    }
   },
   selectable: true,
   selectHelper: true,
   select: function(start, end, allDay) {
       $('#dlg-info').dialog('open').dialog('setTitle','New Event');  
        $('#dlg-info').window('center');
        $('#finfo').form('clear');
        url = 'events.php?save';
   var start = $.fullCalendar.formatDate(start, "MM/dd/yyyy HH:mm:ss");
   var end = $.fullCalendar.formatDate(end, "MM/dd/yyyy HH:mm:ss");
   $('#finfo #fecha').datetimebox('setValue',start);
   $('#finfo #fecha2').datetimebox('setValue',end);
    if (allDay) {
    $('#finfo #allday').val(1);
    } else {
     $('#finfo #allday').val(0);
    }

   },


   theme: true,
   disableResizing: false,
   buttonIcons: {
        prev: 'circle-triangle-w',
        next: 'circle-triangle-e'
    }
  });

 });


function viewevent(id){

    console.log($('#tit-'+id).val());
    $('#descriptionv').empty().html($('#des-'+id).val());
    $('#titlev').empty().html($('#tit-'+id).val());
    $('#eventId').val(id);

    if($('#tit-'+id).val() === "private party" || $('#tit-'+id).val() === "kids classes"){
        registerButton.style.visibility='hidden';
    }else{
        registerButton.style.visibility='visible';
    }

    if($('#url-'+id).val()=='')
        $('#urlview').hide();
    else{
        $("#urlv").attr("href", $('#url-'+id).val())
        $('#urlview').show();
    }

 if($('#img-'+id).val()==''){
    document.previewImage2.src='';
 }
 else{
    document.previewImage2.src='eventimages/'+$('#img-'+id).val();
 }

$('#dlg-view').dialog('open').dialog('setTitle','Event');
$('#dlg-view').window('center');
}

</script>
<style>

 body {
  margin-top: 40px;
  text-align: center;
  font-size: 14px;
  font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;

  }


 #calendar {
  width: 900px;
  margin: 0 auto;
  }

</style>
</head>
<body>




<div id='calendar'></div>


</body>
</html>

Thanks ~Myy

¿Fue útil?

Solución

after a few tweaking I found out how to have it rerender the items in a correct manner:

I removed the ready Function and swapped This:

 var calendar = $('#calendar').fullCalendar({
      disableDragging: true,

for this:

var update=true;

  var calendar = $('#calendar').fullCalendar({ 
                             loading: function(bool) { 
                                 if (!bool){ 
                                    if(update){ 
                                        $("#calendar").fullCalendar( 'refetchEvents' ); 
                                        $("#calendar").fullCalendar( 'rerenderEvents'); 
                                        update=true; 
                                    } 
                                 } 
                 },

//  var calendar = $('#calendar').fullCalendar({
      disableDragging: true,

Hope this helps anyone suing the jQuery Full calendar in the future.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top