web-dev-qa-db-fra.com

Calendrier complet avec Twitter Bootstrap?

Le widget Fullcalendar est génial. Je l'utilise dans un projet Twitter Bootstrap, et il semble à peu près parfait dès la sortie de la boîte.

Une chose qui ressort, cependant, est le HTML pour les boutons, comme avant, arrière et aujourd'hui. Existe-t-il un moyen de changer la façon dont Fullcalendar affiche le code du bouton afin qu'il soit conforme au groupe de boutons de Bootstrap ? Par exemple.:

<div class="btn-group">
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
</div>

Sinon, j'imagine qu'une solution serait de créer les boutons par moi-même et de les câbler dans le widget Fullcalendar. Mais je ne suis pas un pro jquery, et je préfère essayer quelque chose de plus simple. Merci.

jquerytwitter-bootstrapfullcalendar
25
Dogweather

Il y a deux façons de le faire, comme vous l'avez laissé entendre dans votre question. Soit:

  1. Créez votre propre version personnalisée de fullcalendar.js .

  2. Manipulez le code HTML par défaut après son rendu, de préférence en utilisant quelque chose comme jQuery.

Construction personnalisée

Si vous voulez faire le premier, vous devez éditer le fichier Header.js puis recompiler et servir votre version personnalisée de fullcalendar.js . Cependant, je n'hésiterais pas à cela, car cela ajoutera des frais généraux à la mise à jour du plugin FullCalendar à l'avenir. Cependant, c'est votre appel si vous souhaitez emprunter cette voie. L'avantage est que vous contrôlez tout et c'est donc rendu comme vous le souhaitez depuis le début.

substitutions jQuery

Si vous souhaitez remplacer le rendu par défaut, cela ne prendra qu'une poignée de lignes jQuery. Par exemple:

var $fcButtons = $('[class*="fc-button"]').addClass('btn')
  , $oldTable = $('.fc-header-right > table');

$('<div>')
  .addClass('btn-group')
  .appendTo('.fc-header-right')
  .append($fcButtons);

$oldTable.remove();

Cela extraira les trois boutons par défaut de ce <table> et les jeter dans un <div> avec un btn-group classe. Après cela, nous pouvons jeter cette table vide.

Gardez à l'esprit qu'un tas de CSS sera toujours attaché à ces boutons, donc même si techniquement ils sont maintenant un groupe de boutons "Twitter bootstrap", ils n'auront toujours pas l'air aussi épatants. Je suppose que, compte tenu de l'autre réponse, vous pouvez comprendre vous-même tous les CSS.

Démo JSFiddle

La

23
merv

Pour ajouter à la réponse de @merv ma version fullcalendar n'utilise pas de tableau, j'ai donc ajouté ce jquery pour mettre à jour les boutons

$('.fc-toolbar').find('.fc-button-group').addClass('btn-group');
$('.fc-toolbar').find('.ui-button').addClass('btn btn-primary');
$('.fc-toolbar').find('.fc-prev-button').html($('<span />').attr('class', 'glyphicon glyphicon-chevron-left'));
$('.fc-toolbar').find('.fc-next-button').html($('<span />').attr('class', 'glyphicon glyphicon-chevron-right'));
4
mike

Ce sont les CSS par défaut pour Fullcalendar Boutons

/* Buttons
------------------------------------------------------------------------*/
.fc-button {
    position: relative;
    display: inline-block;
    cursor: pointer;
    }

.fc-state-default { /* non-theme */
    border-style: solid;
    border-width: 1px 0;
    }

.fc-button-inner {
    position: relative;
    float: left;
    overflow: hidden;
    }

.fc-state-default .fc-button-inner { /* non-theme */
    border-style: solid;
    border-width: 0 1px;
    }

.fc-button-content {
    position: relative;
    float: left;
    height: 1.9em;
    line-height: 1.9em;
    padding: 0 .6em;
    white-space: nowrap;
    }

/* icon (for jquery ui) */

.fc-button-content .fc-icon-wrap {
    position: relative;
    float: left;
    top: 50%;
    }

.fc-button-content .ui-icon {
    position: relative;
    float: left;
    margin-top: -50%;
    *margin-top: 0;
    *top: -50%;
    }

/* gloss effect */

.fc-state-default .fc-button-effect {
    position: absolute;
    top: 50%;
    left: 0;
    }

.fc-state-default .fc-button-effect span {
    position: absolute;
    top: -100px;
    left: 0;
    width: 500px;
    height: 100px;
    border-width: 100px 0 0 1px;
    border-style: solid;
    border-color: #fff;
    background: #444;
    opacity: .09;
    filter: alpha(opacity=9);
    }

/* button states (determines colors)  */

.fc-state-default,
.fc-state-default .fc-button-inner {
    border-style: solid;
    border-color: #ccc #bbb #aaa;
    background: #F3F3F3;
    color: rgb(162, 48, 48);
    }

.fc-state-hover,
.fc-state-hover .fc-button-inner {
    border-color: #999;
    }

.fc-state-down,
.fc-state-down .fc-button-inner {
    border-color: #555;
    background: #777;
    }

.fc-state-active,
.fc-state-active .fc-button-inner {
    border-color: #555;
    background: #777;
    color: #fff;
    }

.fc-state-disabled,
.fc-state-disabled .fc-button-inner {
    color: rgb(122, 69, 69);
    border-color: #ddd;
    }

.fc-state-disabled {
    cursor: default;
    }

.fc-state-disabled .fc-button-effect {
    display: none;
    }

Alors essayez simplement d'ajouter ceci à votre CSS et de les changer comme vous le souhaitez

3
osyan