Calendrier complet apte à conteneurs et de cacher de défilement
Je ne peux pas comprendre comment à l'échelle fullcalendar pour s'adapter à son conteneur parent. Je veux afficher la vue semaine sur une seule page pour les utilisateurs, sans avoir à faire défiler (Donc ils ont rapidement en revue les éléments pour une semaine).
Je suis ok si j'ai besoin de mettre du texte en petit, les machines à sous de hauteur de petits, etc, mais je juste ne sais pas comment faire cela de manière dynamique en fonction de la taille de la fenêtre du navigateur.
(Dans mon calendrier, je suis en utilisant slotMinutes:10 and times from 8am to 10pm
)
jsfiddle avec fullcalendar: http://jsfiddle.net/bQXYp/27/
OriginalL'auteur user194076 | 2013-05-14
Vous devez vous connecter pour publier un commentaire.
Il y a plusieurs facteurs à prendre en considération.
Si vous voulez coller à avoir
slotMinutes
à 10, alors il va être assez difficile de s'adapter à temps varie de 8 h à 10 H, à la page sans manuellement le piratage de la taille de la police pour être à peu près illisibles.Si vous êtes d'accord avec l'augmentation de la
slotMinutes
attribut de quelque chose comme 30 ou même 60, vous avez une bonne chance d'obtenir votre vue hebdomadaire montrant sans avoir à faire défiler.En dehors de cela, il y a deux propriétés que vous pouvez utiliser pour influencer les dimensions de l'agenda. Le premier est
height
. Toutefois, cela définit une valeur de pixel qui n'est pas à l'échelle de façon dynamique. Le second estaspectRatio
qui permet de définir le rapport largeur /hauteur. En d'autres termes,aspectRatio
valeur 2 signifie qu'il va essayer et de s'étirer en hauteur afin d'être le double de la largeur (si le montant de la hauteur est nécessaire).J'ai mis en place un exemple ici qui vous montre l'effet d'avoir un raisonnable
slotMinutes
valeur. À mon avis, c'est ce qui va être le plus important pour être en mesure de réaliser ce dont vous avez besoin.OriginalL'auteur karancan
je viens de résoudre mon problème avec le code ci-dessous
OriginalL'auteur Asesha George
Salut, je suis à l'aide de deux points de vue ( mois et agendaDay ) et quand je suis passer à la vue jour je change contentHeight comme suit:
Peut-être que cela peut donner une certaine direction pour ce que vous voulez faire 😉
OriginalL'auteur Henrique C.
- Je l'utiliser dans la liste pour afficher tous les événements à venir. J'ai ajouté à mon propre CSS-
OriginalL'auteur Drakum
Essayer la propriété contentHeight:
http://arshaw.com/fullcalendar/docs/display/contentHeight/
Avec votre choix minTime et maxTime cela supprime la barre de défilement verticale dans la zone de contenu de la FullCalendar dans ce jsfiddle exemple:
(Mais assurez-vous de ne pas définir aspectRatio comme semble l'emporter sur la contentHeight)
Bien que, comme Karancan mentionne pour s'adapter à un écran sans défilement, vous aurez besoin de réduire la taille de la police pour presque illisible taille.
(et si vous êtes en utilisant IE8, alors vous pourriez avoir d'autres problèmes avec la hauteur..)
OriginalL'auteur sifty_tom
Cela a fonctionné pour moi aussi.
J'ai ouvert la fullcalendar.css et défile à fc-scroller.
Ajout de la hauteur et changé le débordement de l'option-y comme il a été suggéré.
Et le calendrier à la vue mois travaillé 100%
OriginalL'auteur Steven Podrouzek