Fullcalendar'ın küçük versiyonu

Question

Birinin, başlıkları olmadan bir widget boyutu takvimi yapacak FullCalendar (ya da benzer bir şey) 'in çok küçük bir sürümünü nasıl alacağımı söyleyebilmeyi umuyordum; . Ben harika bir wordpress sitesinde fullcalendar kullanıyorum, ama orada tüm google takvim widget'ları gerçekten berbat!

Answer 1

Bir parça CSS ekleyerek tam işlevsel küçük bir sürüm oluşturabilirsiniz. Etkinlik adını başlık özniteliğine eklemek için bir "eventMouseover" geri çağrısı eklemek zorunda kaldım, böylece adını araç ipucunda görebilirsiniz.

Mini boyutlu takvimin (200 x 225) ekran görüntüsü ve 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); 
      } 
     } 
    }); 

}); 

---

Güncellendi: Yapılan hafta görünümü yatay küçük olaylar ve tüm olaylar geniş veya bunu yapmak için yüksek 2px yapılan onların üzerine gelmek daha kolay.

---

Güncelleme v2.4 + yerine yukarıdaki cevabı güncellenmesi, ben sadece FullCalendar v2.4 minik (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; 
} 

yapmak için kullanılan modifiye kodu göndeririz

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 

    }); 

});