fullcalendar - Redimensionner calendrier sur la fenêtre redimensionne

Question

J'utilise fullcalendar (fullcalendar by adam shaw)

Je me demande ce que je besoin de faire pour que mon fullcalendar change de manière dynamique la taille en fonction de la taille de la fenêtre du navigateur? J'ai regardé un peu dans sa fonction de "rendu" mais j'ai eu du mal à comprendre cela.

(quand un utilisateur redimensionne leur fenêtre, je voudrais fullcalendar réajuster sa largeur et de la hauteur à un rapport d'aspect approprié)

Answer 1

Il est tout documenté.

Voyons voir, essayer quelque chose le long de ces lignes:

//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 
    }); 
}); 

Appliquer similaire à la largeur. Ou vous pouvez placer le calendrier en div et faire des manipulations de cette façon.

Answer 2

I googlé « calendrier réactif », parce que c'est ce que vous vouliez que je pense que vous Je ne savais pas comment le dire. Je crois que les liens que je vous ai fournis devraient vous mettre sur la bonne voie. Je suppose que vous vouliez faire cela en utilisant javascript/jquery à cause de vos tags. Si les liens sont utiles, c'est aussi bien car maintenant vous savez ce qu'il faut rechercher, bonne chance!

Demos Calendrier Responsive:
http://dbushell.com/demos/calendar/v1_03-01-12.html
http://www.manystrands.com/projects/calendar.html (Modifications apportées à l'ordre du jour après vue dans une certaine mesure.)

Plus d'info:
http://dbushell.com/2012/01/04/responsive-calendar-demo/

Answer 3

Pour la largeur, nous avons fait le calendrier flexible, d'ajuster avec la conception adaptée, et cela a fonctionné très bien sur les grands écrans:

#calendar { 
    width: 100%; 
    margin: 0 auto; 
} 

Pour toute autre personnalisation (modification de la hauteur ou vue par défaut), l'utilisation l'événement windowResize intégré pour FullCalendar. L'inconvénient de la réponse acceptée est que la fonction s'exécutera pendant que la fenêtre est redimensionnée, pour chaque changement de pixel. Inversement, les événements windowResize se déclenchent APRÈS que le redimensionnement est terminé. Maintenant, le problème avec un calendrier réactif est que vous êtes toujours à la merci de la table - un endroit terrible pour être sur un petit écran mobile.

Pour notre projet, nous avons choisi de forcer la vue du jour si un utilisateur était sur un écran plus petit que 769px. Vous pouvez voir notre méthode dans cet exemple. Si cela ne fonctionne pas pour vous, au moins cela vous donnera une direction sur la façon de mettre en œuvre une solution qui fonctionne.

var ww,view; 
$(function(){ 
    $('#calendar').fullCalendar({ 
     windowResize: function(view) { 
      ww = getWindowWidth(); 
      view = getView(); 
      var currentView = $('#calendar').fullCalendar('getView'); 
      if(view != currentView){ 
       $('#calendar').fullCalendar('changeView',view); 
      } 
      if(ww <= 768){ 
       $('.fc-header-right .fc-button').hide(); 
      }else{ 
       $('.fc-header-right .fc-button').show(); 
      } 
     } 
    }); 
}); 

Voici les fonctions référencées ci-dessus:

function getWindowWidth(){ 
    return $(window).width(); 
} 
function getView(){ 
    return (ww <= 768) ? 'basicDay' : 'month'; 
}