小版本的fullcalendar

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

Answer 1

您可以通过添加一些CSS来制作function齐全的小版本。 我不得不添加一个“eventMouseover”回调来将事件名称添加到title属性中，因此您可以在工具提示中看到它的名称。

这是迷你尺寸日历（200 x 225）和演示的屏幕截图。

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

---

更新 ：使周视图水平事件变小并使所有事件变为2px宽或高，以便更轻松地将鼠标hover在它们上方。

---

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