मैं पहली बार fullcalendar.js का उपयोग कर रहा हूं, मैंने इसे सफलतापूर्वक कार्यान्वित किया है, मैं अपने ईवेंट पुनर्प्राप्त करने और प्रदर्शित करने में कामयाब रहा, और अब मैं अपने कैलेंडर के डिज़ाइन पर काम कर रहा हूं।

हालांकि, मेरे कैलेंडर ने अजीब काम करना शुरू कर दिया, और अब, उदाहरण के लिए, मैं अपना पृष्ठ लोड करने के बाद हफ्तों तक नेविगेट नहीं कर सकता, एकमात्र तरीका, मैं कैलेंडर दृश्य को बदलकर, महीने या दिन के दृश्य बटन पर क्लिक करके कर सकता हूं, फिर मैं नेविगेट करने में सक्षम हो जाऊंगा और सप्ताह के माध्यम से नेविगेट करने के लिए सप्ताह के दृश्य पर वापस जा सकूंगा। यह डिफ़ॉल्ट दृश्य पर ध्यान दिए बिना होता है (यदि यह महीने का दृश्य है, तो मैं पहले चयनित दृश्य को बदले बिना अगले या पिछले महीनों में नहीं जा पाऊंगा), शीर्षलेख में तिथियां बदल जाती हैं, लेकिन सामग्री नहीं होती है।

जैसा कि यह पहले काम कर चुका है, मैंने सरल कोड के साथ पुनरारंभ करने का प्रयास किया (मैंने अपने कैलेंडर को केवल लाइसेंस कुंजी के साथ प्रारंभ करने का प्रयास किया, और जैसा कि मैं डिज़ाइन पर काम कर रहा था, मैंने सभी सीएसएस हटा दिए), मुझे ब्राउज़र कंसोल में कोई त्रुटि नहीं मिली , मैंने फ़ायरफ़ॉक्स और क्रोम दोनों के साथ प्रयास किया, मैंने ब्राउज़र कैश भी मिटा दिया, लेकिन इससे कुछ भी सुधार नहीं हुआ था।

मुझे पूरा यकीन है कि मेरे अजाक्स कॉल से कोई लेना-देना नहीं है (पहले इसके साथ ठीक काम किया था, अब इसके बिना भी काम नहीं करता है) इसलिए मैं अपना नियंत्रक कोड प्रदान नहीं करता।

मैं fullcalendar.3.9.0 का उपयोग कर रहा हूँ।

यहां मेरा जेएस है ($ (दस्तावेज़) में नहीं। तैयार() लेकिन मैंने कोशिश की और यह कुछ भी नहीं बदला):

    $('#calendar').fullCalendar({
        schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
        themeSystem: 'bootstrap4',
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'agendaDay,agendaWeek,month'
        },
        bootstrapFontAwesome: {
            close: 'fa-times',
            prev: 'fa-chevron-left',
            next: 'fa-chevron-right',
            prevYear: 'fa-angle-double-left',
            nextYear: 'fa-angle-double-right'
        },
        defaultView: 'agendaWeek',
        firstDay: 1,
        allDaySlot: false,
        editable: false,
        droppable: false,
        columnFormat: 'ddd DD/MM',
        timeFormat: 'HH:mm',
        nowIndicator: true,
        events: function (start, end, timezone, callback) {
            Post('/Incident/GetInterventionList',
                {
                    start: start.format('YYYY-MM-DD'),
                    end: end.format('YYYY-MM-DD')
                },
                function (response) {
                    var events = [];

                    for (var i = 0; i < response.length; i++) {
                        let e = response[i];
                        events.push({
                            id: e.ActivityId,
                            title: e.SANumber + " | " + e.Subject,
                            start: moment(e.MorningStart ? e.MorningStart : e.EveningStart).toISOString(),
                            end: moment(e.EveningEnd ? e.EveningEnd : e.MorningEnd).toISOString(),
                            color: (e.StateCode == 0 ? '#ffc107' : (e.StateCode == 1 ? '#28a745' : (e.StateCode == 3 ? '#dc3545' : '#007bff')))
                        });
                    }

                    callback(events);
                });
        }
    });

और यहां मेरा सीएसएस है (मैं बूटस्ट्रैप.एसएएस का उपयोग कर रहा हूं):

table {
    /*overflow: hidden;*/ /* blocks event display in fullCalendar */
    border: none !important;
    border-radius: 0.25rem !important;
}

table td, th {
    border: none !important;
}

table thead {
    border-radius: 0.25rem 0.25rem 0 0 !important;
}

table thead th:first-child, table thead th:first-child {
    overflow: hidden;
    border-radius: 0.25rem 0 0 0 !important;
}

table thead th:last-child, table thead th:last-child {
    overflow: hidden;
    border-radius: 0 0.25rem 0 0 !important;
}

table tfoot {
    border-radius: 0 0 0.25rem 0.25rem !important;
}

table tfoot td {
    min-height: 9px;
}

table tfoot tr:last-child td:first-child {
    overflow: hidden;
    border-radius: 0 0 0 0.25rem !important;
}

table tfoot tr:last-child td:last-child {
    overflow: hidden;
    border-radius: 0 0 0.25rem 0 !important;
}

.fc-scroller {
    max-height: 60vh;
    height: 60vh !important;
}

#calendar .btn {
    margin:3px;
}

.fc-event {
    box-shadow: 0px 1px 4px black;
}

table table {
    box-shadow: none !important;
    border: none !important;
}

table tfoot td {
    height: 9px;
}

.fc-row {
    border: none !important;
}

पढ़ने के लिए धन्यवाद, मदद की वास्तव में सराहना की जाएगी।

0
Alex 26 अक्टूबर 2018, 11:41

1 उत्तर

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

आशा है कि यह मदद कर सकता है, समस्या यहां प्रदान किए गए कोड में नहीं थी, वास्तव में मेरे कोड में पूर्ण कैलेंडर के साथ कुछ चुपचाप हस्तक्षेप कर रहा था (जैसा कि सुझाव दिया गया है @ADyson, टिप्पणियां देखें), मैं पूर्ण कैलेंडर मुख्य तालिका को संशोधित कर रहा था (गतिशील रूप से एक <tfoot> टैग) पगेलोड के बाद और यही समस्या का स्रोत था।

0
Alex 7 फरवरी 2019, 11:02