微型版的fullcalendar [英] Tiny version of fullcalendar

问题描述

我希望有人能告诉我如何获得一个非常小的FullCalendar版本（或类似的东西），它将做一个没有标题的小部件大小的日历，只是可以点击事件的日期的彩色块。我在一个WordPress的站点中使用了fullcalendar，这很棒，但是所有的谷歌日历小部件真的很烂！

通过添加一些CSS来制作一个功能完整的小版本。我必须添加一个eventMouseover回调函数来将事件名称添加到title属性中，以便您可以在工具提示中看到它的名称。

这是一个屏幕截图小型日历（200 x 225）和）

CSS

  #calendar {
 width：200px; 
 margin：0 auto; 
 font-size：10px; 
} 
 .fc-toolbar {
 font-size：.9em; 
} 
 .fc-toolbar h2 {
 font-size：12px; 
空格：正常！重要; 
} 
 / *单击+2更多弹出* / 
 .fc-more-cell a {
 display：block; 
宽度：85％; 
 margin：1px auto 0 auto; 
 border-radius：3px; 
背景：灰色; 
颜色：透明; 
 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（）{
 $ b $（'＃calendar'）。fullCalendar（{
 header：{
 left：'prev，next today'，
 center：'title'，
 right：'month，agendaweek，agendaDay'
}，
 
 eventAfterRender：function（ ）{
 //向+＃more links添加标题
 $（'。fc-more-cell a'）。each（function（）{
 this.title = this。 textContent; 
}）; 
}，
 
 //将事件名称添加到鼠标悬停的title属性上
 eventMouseover：function（event，jsEvent，view）{
 if（view.name！=='agendaDay'）{
 $（jsEvent.target）.attr（'title'，event.title）; 
} 
}，
 
 editable：true，
 eventLimit：true //当事件太多时允许更多链接
 
 }）; 
 
}）; 
  

I am hoping someone can tell me how to get a very small version of FullCalendar (or something similar) that will do a widget size calendar without titles, just colored blocks for dates with events that can be clicked on. I am using fullcalendar in a wordpress site which is great, but all the google calendar widgets out there really suck!

解决方案

You can make a fully functional tiny version by adding a bit of CSS. I had to add a "eventMouseover" callback to add the event name to the title attribute, so you can see it's name in the tooltip.

Here is a screen shot of the mini-sized calendar (200 x 225) and a demo.

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

});

---

Updated: Made week view horizontal events smaller and made all events 2px wide or high to make it easier to hover over them.

---

Update v2.4+ Instead of updating the above answer, I'll just post the modified code I used to make FullCalendar v2.4 tiny (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

    });

});

这篇关于微型版的fullcalendar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！