web-dev-qa-db-ja.com

フルカレンダーの小さなバージョン

誰かがFullCalendarの非常に小さなバージョン（または同様のもの）を入手する方法を教えてくれることを願っています。これは、タイトルなしで、クリックできるイベントのある日付の色付きブロックだけで、ウィジェットサイズのカレンダーを実行します。私はwordpressサイトでfullcalendarを使用していますが、これは素晴らしいですが、そこにあるすべてのGoogleカレンダーウィジェットは本当にひどいです！

jqueryfullcalendar
21
Andrew Christensen

CSSを少し追加することで、完全に機能する小さなバージョンを作成できます。 「eventMouseover」コールバックを追加して、イベント名をtitle属性に追加する必要がありました。これにより、ツールチップにその名前が表示されます。

これは、ミニサイズのカレンダー（200 x 225）と デモ のスクリーンショットです。

enter image description here

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

});

更新：週ビューの水平イベントを小さくし、すべてのイベントを幅2ピクセルまたは高さにして、カーソルを合わせやすくしました。

v2.4 +を更新します上記の回答を更新する代わりに、FullCalendar v2.4を小さくするために使用した変更されたコードを投稿します（- デモ ）

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

    });

});
60
Mottie