मैं पूर्ण कैलेंडर v4 का उपयोग कर रहा हूँ। मेरे पास एक छोटा कैलेंडर है जिसे एक बार किसी ईवेंट पर क्लिक करने के बाद, मैं उस तिथि पर जाने के लिए एक और बड़ा कैलेंडर (कैलेंडर_फुल) चाहता हूं।

<script type="text/javascript">

document.addEventListener('DOMContentLoaded', function() {

    var calendar1 = document.getElementById('calendar_mini');

    var calendar_mini = new FullCalendar.Calendar(calendar1, {
        plugins: ['interaction', 'dayGrid'],
        eventClick: function(info) {

            //when clicking on events, go to date on main calendar
            calendar.gotoDate(info.event.start)


        }
 ...
});

document.addEventListener('DOMContentLoaded', function() {

    var calendar_full = document.getElementById('calendar_full');

    var calendar = new FullCalendar.Calendar(calendar_full, {
         plugins: ['interaction', 'resourceDayGrid', 'resourceTimeGrid', 'timeGrid'],
         header: {
            right: 'prevYear,prev,next,nextYear,today',
            left: 'title',
            center: 'resourceTimeGridDay,resourceTimeGridWeek,resourceDayGridMonth'
            },
           selectMirror: true,
 ...
)};

Calendar_mini कोड में, Calendar.gotoDate(info.event.start) का इवेंटक्लिक फ़ंक्शन मुख्य कैलेंडर को नहीं बदलता है। मुझे त्रुटि मिलती है:

Uncaught ReferenceError: calendar is not defined
0
chris.cavage 2 मई 2019, 02:02

1 उत्तर

सबसे बढ़िया उत्तर

समस्या यह है कि जब आप इसे कॉलबैक में उपयोग करते हैं तो "कैलेंडर" नामक चर दायरे में नहीं होता है, यही कारण है कि यह अपरिभाषित है। इसका दायरा "DOMContentLoaded" कॉलबैक तक सीमित है जिसमें आपने इसे घोषित किया था।

अब, आपको यहां दो अलग "DOMContentLoaded" कॉलबैक की आवश्यकता नहीं है। एक आम तौर पर उन सभी कोड के लिए पर्याप्त होता है जिन्हें पेज लोड होने पर चलाने की आवश्यकता होती है।

यदि आप सब कुछ एक कॉलबैक के अंदर ले जाते हैं, तो आपको कोई समस्या नहीं होगी:

document.addEventListener('DOMContentLoaded', function() {

  var calendar1 = document.getElementById('calendar_mini');

  var calendar_mini = new FullCalendar.Calendar(calendar1, {
    plugins: ['interaction', 'dayGrid'],
    eventClick: function(info) {
        //when clicking on events, go to date on main calendar
        calendar.gotoDate(info.event.start)
    }

  var calendar_full = document.getElementById('calendar_full');

  var calendar = new FullCalendar.Calendar(calendar_full, {
     plugins: ['interaction', 'resourceDayGrid', 'resourceTimeGrid', 'timeGrid'],
     header: {
        right: 'prevYear,prev,next,nextYear,today',
        left: 'title',
        center: 'resourceTimeGridDay,resourceTimeGridWeek,resourceDayGridMonth'
        },
       selectMirror: true,
  ...
)};
1
ADyson 2 मई 2019, 12:37