jQuery पूर्ण कैलकुलेटर - घटनाएं

Question

मैं jQuery fullcalendar (संस्करण 2.7.1) के साथ काम कर रहा हूं।

यह मुझे क्या करना चाहते हैं:

अब मैं लाल करने के लिए पृष्ठभूमि सेट कर सकते हैं, लेकिन पाठ प्रकट नहीं होता है। ...

तो पाठ नहीं जोड़ा जाता है: यह है कि मैं क्या कर रहा हूँ है:

var m = moment('2016-09-19'); 

$('#calendar').fullCalendar({ 
    // put your options and callbacks here 
    left: 'title', 
    center: '', 
    right: 'prev,next', 
    weekends: false, 
    weekNumbers: true, 
    defaultView: 'month', 
    defaultDate: m, 
    events: [ 
     { 
      start: '2016-09-19', 
      allDay : true, 
      rendering: 'background', 
      backgroundColor: '#F00', 
      title: 'full', 
      textColor: '#000' 
     }, 
     { 
      start: '2016-09-20', 
      allDay : true, 
      rendering: 'background', 
      backgroundColor: '#F00', 
      title: 'full', 
      textColor: '#000' 
     } 
    ] 
}); 

यह है कि यह कैसे दिखता है। और रंग निर्दिष्ट रंग की तुलना में बहुत हल्का है।

जैसा कि आप देख सकते हैं कि मैंने अपने सही नेविगेशन पर 'आज' भी नहीं जोड़ा है, लेकिन यह वैसे भी जोड़ा गया है ...।

मुझे आश्चर्य है कि मैं महीनों के नेविगेशन को कैसे सीमित कर सकता हूं। उदाहरण के लिए वे केवल सितंबर सितंबर, अक्टूबर, नवंबर में महीनों का चयन कर सकते हैं ..।

क्या कोई मुझे इस प्रश्न के साथ मदद कर सकता है?

Answer 1

आप eventAfterRender कॉलबैक का उपयोग कर सकते हैं। इस कॉलबैक में स्ट्रिंग FULL से element पैरामीटर संलग्न करें। event-full कक्षा का उपयोग करके आप CSS स्टाइल कर सकते हैं।

background-color हल्का है क्योंकि 0.3 की अस्पष्टता है; इसे पर event-full कक्षा का उपयोग करके बदलें।

today बटन को छिपाने के लिए आपको ऑब्जेक्ट में left, center, right गुण सेट करना होगा।

महीनों के नेविगेशन को सीमित करने के लिए आप viewRender कॉलबैक का उपयोग कर सकते हैं।

जे एस

var m = moment('2016-09-19'); 

$('#calendar').fullCalendar({ 
    // put your options and callbacks here 
    header: { 
     left: 'title', 
     center: '', 
     right: 'prev,next' 
    }, 
    weekends: false, 
    weekNumbers: true, 
    defaultView: 'month', 
    defaultDate: m, 
    events: [{ 
     start: '2016-09-19', 
     allDay: true, 
     rendering: 'background', 
     backgroundColor: '#F00', 
     title: 'full', 
     textColor: '#000', 
     className: 'event-full' 
    }, { 
     start: '2016-09-20', 
     allDay: true, 
     rendering: 'background', 
     backgroundColor: '#F00', 
     title: 'full', 
     textColor: '#000', 
     className: 'event-full' 
    }], 
    eventAfterRender: function (event, element, view) { 
     element.append('FULL'); 
    }, 
    viewRender: function (view, element) { 
     var start = new Date("2016-09-01"); 
     var end = new Date("2016-11-30"); 

     if (end < view.end) { 
      $("#calendar .fc-next-button").hide(); 
      return false; 
     } else { 
      $("#calendar .fc-next-button").show(); 
     } 

     if (view.start < start) { 
      $("#calendar .fc-prev-button").hide(); 
      return false; 
     } else { 
      $("#calendar .fc-prev-button").show(); 
     } 
    } 
}); 

सीएसएस

.event-full { 
    color: #fff; 
    vertical-align: middle !important; 
    text-align: center; 
    opacity: 1; 
} 

WORKING DEMO

Answer 2

मैं एक सीएसएस संचालित समाधान का उपयोग कर रहा हूं क्योंकि इस मामले में पुस्तकालय को ऐसा करने के लिए बस इतना आसान लगता है कि यह क्या करना है और इसके आसपास काम करना है। "आज" बटन में एक विशिष्ट वर्ग है इसलिए मैं प्रदर्शित करूंगा: कोई भी नहीं। इवेंट ऑब्जेक्ट्स क्लासनाम प्रोप को स्वीकार कर सकता है। इसका उपयोग करके, मैंने "पूर्ण" टेक्स्ट बनाने के लिए तत्व से पहले एक स्थान दिया था। अंत में, आपकी रंग भिन्नता उन कोशिकाओं पर 0.3 की अस्पष्टता के कारण होती है। इसे 1 पर सेट करने से पूर्ण लाल पृष्ठभूमि-रंग दिखाया जा रहा है। \

.fc-today-button { 
    display: none; 
} 
.event-full { 
    position: relative; 
    opacity: 1; 
    &:before { 
     content: "FULL"; 
     position: absolute; 
     color: #fff; 
     top: 50%; 
     transform: translateY(-50%) translateX(-50%); 
     left: 50%; 
    } 
} 

और जे एस:

var m = moment('2016-09-19'); 

$('#calendar').fullCalendar({ 
    // put your options and callbacks here 
    left: 'title', 
    center: '', 
    right: 'prev,next', 
    weekends: false, 
    weekNumbers: true, 
    defaultView: 'month', 
    defaultDate: m, 
    events: [ 
     { 
      start: '2016-09-19', 
      allDay : true, 
      rendering: 'background', 
      backgroundColor: '#F00', 
      title: 'full', 
      textColor: '#000', 
         className: 'event-full' 
     }, 
     { 
      start: '2016-09-20', 
      allDay : true, 
      rendering: 'background', 
      backgroundColor: '#F00', 
      title: 'full', 
      textColor: '#000', 
         className: 'event-full' 
     } 
    ] 
}); 

http://codepen.io/amishstripclub/pen/zqQqxx

Answer 3

मैं दिखा और hidding बटन के बजाय विकलांग विशेषता का प्रयोग करेंगे:

https://jsfiddle.net/uz0mx059/

viewRender: function(view, element) { 
    var start = new Date("2016-09-01"); 
    var end = new Date("2016-11-30"); 

    if (end < view.end) { 
     $("#calendar .fc-next-button").attr('disabled',true); 
     return false; 
    } else { 
     $("#calendar .fc-next-button").attr('disabled',false); 
    } 

    if (view.start < start) { 
     $("#calendar .fc-prev-button").attr('disabled',true); 
     return false; 
    } else { 
     $("#calendar .fc-prev-button").attr('disabled',false); 
    } 
    } 

प्लस सीएसएस का एक सा:

button:disabled { 
    color: grey; 
}