jquery - example - fullcalendar css

Versión minúscula de fullcalendar

Question

Espero que alguien pueda decirme cómo obtener una versión muy pequeña de FullCalendar (o algo similar) que haga un calendario de tamaño de widget sin títulos, solo bloques de color para fechas con eventos en los que se puede hacer clic. Estoy usando el calendario completo en un sitio de WordPress, lo cual es genial, pero todos los widgets de Google Calendar realmente son una mierda.

Answer 1

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

Aquí hay una captura de pantalla del calendario de tamaño pequeño (200 x 225) y una 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 : La semana hizo que los eventos horizontales fueran más pequeños y que todos los eventos fueran de 2px de ancho o alto para que sea más fácil desplazarse sobre ellos.

Actualizar v2.4 + En lugar de actualizar la respuesta anterior, solo publicaré el código modificado que utilicé para hacer que FullCalendar v2.4 sea pequeño ( 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

    });

});