Я надеюсь, кто-то может сказать мне, как получить очень маленькую версию FullCalendar (или что-то подобное), которая будет делать календарь размера виджета без заголовков, только цветные блоки для дат с событиями, на которые можно щелкнуть. Я использую fullcalendar на сайте Wordpress, который замечательный, но все виджеты календаря Google действительно сосут!
Крошечная версия fullcalendar
Ответ 1
Вы можете сделать полностью функциональную крошечную версию, добавив немного CSS. Мне пришлось добавить обратный вызов "eventMouseover", чтобы добавить имя события в атрибут title, чтобы вы могли увидеть его имя в подсказке.
Вот скриншот мини-календаря (200 х 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 широкими или большими, чтобы было легче нависнуть над ними.
Обновить 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
});
});