Winzige Version von fullcalendar [closed]

Lesezeit: 3 Minuten

Benutzeravatar von Andrew Christensen
Andreas Christensen

Ich hoffe, jemand kann mir sagen, wie ich eine sehr kleine Version von FullCalendar (oder etwas Ähnliches) bekomme, die einen Kalender in Widget-Größe ohne Titel erstellt, nur farbige Blöcke für Daten mit Ereignissen, auf die geklickt werden kann. Ich verwende Fullcalendar auf einer WordPress-Site, was großartig ist, aber alle Google-Kalender-Widgets da draußen sind wirklich scheiße!

Motties Benutzeravatar
Mottie

Sie können eine voll funktionsfähige kleine Version erstellen, indem Sie ein wenig CSS hinzufügen. Ich musste einen „eventMouseover“-Rückruf hinzufügen, um den Ereignisnamen zum Titelattribut hinzuzufügen, damit Sie den Namen im Tooltip sehen können.

Hier ist ein Screenshot des Mini-Kalenders (200 x 225) und a Demo.

Geben Sie hier die Bildbeschreibung ein

Das 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);
            }
        }
    });

});

Aktualisiert: Horizontale Ereignisse in der Wochenansicht verkleinert und alle Ereignisse 2 Pixel breit oder hoch gemacht, um es einfacher zu machen, den Mauszeiger darüber zu bewegen.


Aktualisieren Sie v2.4+ Anstatt die obige Antwort zu aktualisieren, poste ich einfach den modifizierten Code, den ich verwendet habe, um FullCalendar v2.4 winzig zu machen (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

    });

});

  • Hallo, das ist großartig. Vielen Dank. Aber es scheint nicht vollständig auf FullCalenar 2.0 zu funktionieren. Die Zellen werden zu groß (vertikal) gerendert. Hast du eine Idee, wie man das beheben kann?

    – David

    11. November 2015 um 10:10 Uhr

  • Hallo Dave! Ich habe meine Antwort aktualisiert – neue demo – Die Änderungen fügen dem „+2 mehr“-Link einen Titel und einen grauen Hintergrund hinzu und reduzieren die Pop-up-Größe.

    – Mottie

    12. November 2015 um 17:46 Uhr


  • Das ist glatt, danke fürs Teilen

    – KTU

    29. März 2017 um 19:26 Uhr

1404140cookie-checkWinzige Version von fullcalendar [closed]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy