小版本的fullcalendar

Question

我希望有人可以告訴我如何獲得一個非常小的FullCalendar版本（或類似的東西），將做一個沒有標題的小部件大小日曆，只是日期的事件，可點擊彩色塊。我在一個非常棒的WordPress站點中使用fullcalendar，但所有的谷歌日曆小工具真的很爛！

Answer 1

您可以通過添加一點CSS來製作一個功能完整的小版本。我不得不添加一個「eventMouseover」回調函數將事件名稱添加到title屬性中，這樣您可以在工具提示中看到它的名稱。

下面是迷你尺寸日曆（200 x 225）和demo的屏幕截圖。

的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微小（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 

    }); 

});