jquery - bootstrap - popover js

¿Calendario completo con Twitter Bootstrap?

Question

El widget Fullcalendar es impresionante. Lo estoy usando en un proyecto de Twitter Bootstrap, y se ve casi perfecto fuera de la caja.

Sin embargo, una cosa que sobresale es el HTML para los botones, como adelante, atrás y hoy. ¿Hay alguna manera de cambiar la forma en que Fullcalendar genera el código del botón para que se ajuste al grupo de botones de Bootstrap? P.ej:

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

Si no, me imagino que una manera de hacerlo sería crear los botones por mi cuenta y conectarlos al widget de calendario completo. Pero no soy un profesional de jQuery, y preferiría intentar algo más simple. Gracias.

Answer 1

Este es el css predeterminado para Fullcalendar Buttons

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

Así que solo intenta agregar esto a tu CSS y cambiarlos a tu gusto

Answer 2

Hay dos formas de hacerlo, como implicaste en tu pregunta. Ya sea:

1. Haga su propia compilación personalizada de fullcalendar.js .

2. Manipule el HTML predeterminado después de que se renderice, preferiblemente utilizando algo como jQuery.

Generación personalizada

Si desea hacer lo primero, necesita editar el archivo Header.js y luego volver a compilar y servir su versión personalizada de fullcalendar.js . Sin embargo, me gustaría alejarme de eso porque agregará gastos adicionales a la actualización del complemento FullCalendar en el futuro. Sin embargo, es tu llamada si quieres ir por esa ruta. La ventaja es que controlas todo y, por lo tanto, se muestra como lo quieres desde el principio.

Anulaciones de jQuery

Si desea anular el procesamiento predeterminado, solo tomará un puñado de líneas jQuery. Por ejemplo:

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

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

$oldTable.remove();

Esto eliminará los tres botones predeterminados de esa <table> y los lanzará a una <div> con una clase de btn-group . Después de eso podemos descartar esa mesa vacía.

Tenga en cuenta que un montón de CSS aún se adjuntará a esos botones, por lo que, aunque técnicamente ahora son un grupo de botones "Twitter bootstrap", todavía no se verán tan elegantes. Supongo que, dada la otra respuesta, puedes averiguar todo el CSS tú mismo.

Demostración de JSFiddle

Al aire libre

Answer 3

Para agregar a la respuesta de @merv, mi versión de calendario completo no usa una tabla, así que agregué este jquery para actualizar los botones

$(''.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''));