पूर्ण कैलेंडर

Question

का छोटा संस्करण मुझे उम्मीद है कि कोई मुझे बता सकता है कि फुल कैलेंडर (या कुछ ऐसा ही) का एक बहुत छोटा संस्करण कैसे प्राप्त करें जो बिना शीर्षक के विजेट आकार कैलेंडर करेगा, केवल उन घटनाओं के साथ रंगीन ब्लॉक पर क्लिक किया जा सकता है जिन्हें क्लिक किया जा सकता है । मैं एक WordPress साइट में fullcalendar का उपयोग कर रहा हूँ जो बहुत अच्छा है, लेकिन वहां मौजूद सभी Google कैलेंडर विजेट वास्तव में चूसते हैं!

Answer 1

आप थोड़ा सीएसएस जोड़कर पूरी तरह कार्यात्मक छोटे संस्करण बना सकते हैं। ईवेंट शीर्षक को शीर्षक विशेषता में जोड़ने के लिए मुझे "eventMouseover" कॉलबैक जोड़ना पड़ा, ताकि आप टूलटिप में इसका नाम देख सकें।

यहां मिनी आकार के कैलेंडर (200 x 225) और demo का एक स्क्रीन शॉट है।

सीएसएस

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

}); 

---

अपडेट किया गया: छोटा बनाया सप्ताह दृश्य क्षैतिज घटनाओं और किए गए सभी घटनाओं विस्तृत या इसे बनाने के लिए उच्च 2px उन पर होवर करना आसान है। इसके बाद के संस्करण जवाब को अद्यतन करने का

---

अद्यतन v2.4 + इसके बजाय, मैं सिर्फ पोस्ट करेंगे संशोधित कोड मैं FullCalendar v2.4 छोटे (demo)

सीएसएस

#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 

    }); 

});