작은 버전의 fullcalendar

Question

제목이없는 위젯 크기의 캘린더를 클릭 할 수있는 아주 작은 버전의 FullCalendar (또는 이와 비슷한)를 누군가에게 알려주고, 클릭 할 수있는 이벤트가있는 날짜의 색칠 된 블록 만 알려주 길 바란다. . 나는 위대한 WordPress의 사이트에서 fullcalendar를 사용하지만, 거기에 모든 구글 캘린더 위젯 정말 빨아!

Answer 1

약간의 CSS를 추가하여 완전한 기능을 갖춘 작은 버전을 만들 수 있습니다. 제목 속성에 이벤트 이름을 추가하기 위해 "eventMouseover"콜백을 추가해야했습니다. 따라서 툴팁에서 이름을 볼 수 있습니다.

다음은 미니 크기의 캘린더 (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; 
} 

자바 스크립트

$(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 작은 (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; 
} 

를 만들기 위해 사용되는 수정 된 코드를 게시합니다

자바 스크립트

$(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 

    }); 

});