Versión minúscula de fullcalendar

Question

Espero que alguien me diga cómo obtener una versión muy pequeña de FullCalendar (o algo similar) que hará un calendario de tamaño de widget sin títulos, solo bloques de colores para las fechas con eventos que se pueden hacer clic en . Estoy usando fullcalendar en un sitio de WordPress que es genial, pero todos los widgets de calendario de Google realmente apestan.

Answer 1

Puede hacer una versión minúscula totalmente funcional agregando un poco de CSS. Tuve que agregar una devolución de llamada "eventMouseover" para agregar el nombre del evento al atributo de título, para que pueda ver su nombre en la información sobre herramientas.

Aquí hay una captura de pantalla del calendario mini-sized (200 x 225) y un demo.

El CSS

#calendar { 
    width: 200px; 
    margin: 0 auto; 
    font-size: 10px; 
} 
.fc-header-title h2 { 
    font-size: .9em; 
    white-space: normal !important; 
} 
.fc-view-month .fc-event, .fc-view-agendaWeek .fc-event { 
    font-size: 0; 
    overflow: hidden; 
    height: 2px; 
} 
.fc-view-agendaWeek .fc-event-vert { 
    font-size: 0; 
    overflow: hidden; 
    width: 2px !important; 
} 
.fc-agenda-axis { 
    width: 20px !important; 
    font-size: .7em; 
} 

.fc-button-content { 
    padding: 0; 
} 

Javascript

$(document).ready(function() { 

    $('#calendar').fullCalendar({ 
     theme: true, 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 
     editable: true, 

     // add event name to title attribute on mouseover 
     eventMouseover: function(event, jsEvent, view) { 
      if (view.name !== 'agendaDay') { 
       $(jsEvent.target).attr('title', event.title); 
      } 
     } 
    }); 

}); 

---

Actualizado: eventos Hecho semana visión horizontal más pequeñas y hacen todos los eventos 2Px de ancho o alto para que sea es más fácil pasar el cursor sobre ellos.

---

actualización v2.4 + En lugar de actualizar la respuesta anterior, sólo voy a publicar el código modificado Yo solía hacer FullCalendar v2.4 pequeña (demo)

CSS

#calendar { 
    width: 200px; 
    margin: 0 auto; 
    font-size: 10px; 
} 
.fc-toolbar { 
    font-size: .9em; 
} 
.fc-toolbar h2 { 
    font-size: 12px; 
    white-space: normal !important; 
} 
/* click +2 more for popup */ 
.fc-more-cell a { 
    display: block; 
    width: 85%; 
    margin: 1px auto 0 auto; 
    border-radius: 3px; 
    background: grey; 
    color: transparent; 
    overflow: hidden; 
    height: 4px; 
} 
.fc-more-popover { 
    width: 100px; 
} 
.fc-view-month .fc-event, .fc-view-agendaWeek .fc-event, .fc-content { 
    font-size: 0; 
    overflow: hidden; 
    height: 2px; 
} 
.fc-view-agendaWeek .fc-event-vert { 
    font-size: 0; 
    overflow: hidden; 
    width: 2px !important; 
} 
.fc-agenda-axis { 
    width: 20px !important; 
    font-size: .7em; 
} 

.fc-button-content { 
    padding: 0; 
} 

Javascript

$(document).ready(function() { 

    $('#calendar').fullCalendar({ 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 

     eventAfterRender: function() { 
      // add titles to "+# more links" 
      $('.fc-more-cell a').each(function() { 
       this.title = this.textContent; 
      }); 
     }, 

     // add event name to title attribute on mouseover 
     eventMouseover: function (event, jsEvent, view) { 
      if (view.name !== 'agendaDay') { 
       $(jsEvent.target).attr('title', event.title); 
      } 
     }, 

     editable: true, 
     eventLimit: true // allow "more" link when too many events 

    }); 

});