javascript - डेटा को एक जावास्क्रिप्ट कैलेंडर के लिए एक वर्ग जोड़ना(clndr.js)



jquery calendar (1)

मुझे आपका कोड नहीं पता है, इसलिए मैं सीएलएनडीआर के परीक्षण से गिटूब फ़ोल्डर "परीक्षण" से काम कर रहा हूं।

Test.js के नीचे जोड़ें (मूलतः यह सुनिश्चित करें कि यह clndr सक्रियण के बाद है)

var thisMonth = moment().format('YYYY-MM');

var temp = [{
    date: thisMonth + '-22',
    type: 1
}, {
    date: thisMonth + '-27',
    type: 2
}, {
    date: thisMonth + '-13',
    type: 1
}];
for (event of temp) {
    $('.calendar-day-' + event.date).addClass('ev-type-' + event.type);
};

फिर test.html <head> कुछ सीएसएस शैलियों को जोड़ने के लिए बस यह स्पष्ट रूप से देखने के लिए कि यह काम कर रहा है

.ev-type-1 {
    background: #F00 !important;
    color: #fff !important;
}
.ev-type-2 {
    background: #0F0 !important;
    color: #fff !important;
}

मैं प्रत्येक क्लेंडआर.जेएस इवेंट के लिए एक क्लास आवंटित करने के लिए देख रहा हूं जो मेरे कैलेंडर पर मूल्य के आधार पर दिखाई देता है। var temp प्राप्त डेटा का एक उदाहरण दिखाता है मैं शैली को प्रत्येक प्रकार 1 या 2 होने पर स्टाइल करना चाहता हूं। कोड डिफ़ॉल्ट टेम्पलेट को दिखाता है जिसे मैं बस एक वर्ग के रूप में पास किए गए मान को जोड़कर संशोधित करना चाहता हूं, इसलिए मैं इसे शैली कर सकता हूं

गिटूब पर स्रोत लाइब्रेरी से लिंक

गिटूब पर इसी तरह की समस्या का लिंक

// This is the default calendar template. This can be overridden.
var clndrTemplate =
    "<div class='clndr-controls'>" +
        "<div class='clndr-control-button'>" +
            "<span class='clndr-previous-button'>previous</span>" +
        "</div>" +
        "<div class='month'><%= month %> <%= year %></div>" +
        "<div class='clndr-control-button rightalign'>" +
            "<span class='clndr-next-button'>next</span>" +
        "</div>" +
    "</div>" +
    "<table class='clndr-table' border='0' cellspacing='0' cellpadding='0'>" +
        "<thead>" +
            "<tr class='header-days'>" +
            "<% for(var i = 0; i < daysOfTheWeek.length; i++) { %>" +
                "<td class='header-day'><%= daysOfTheWeek[i] %></td>" +
            "<% } %>" +
            "</tr>" +
        "</thead>" +
        "<tbody>" +
        "<% for(var i = 0; i < numberOfRows; i++){ %>" +
            "<tr>" +
            "<% for(var j = 0; j < 7; j++){ %>" +
            "<% var d = j + i * 7; %>" +
                "<td class='<%= days[d].classes %>'>" +
                    "<div class='day-contents <%= days[d].type %>'><%= days[d].day %></div>" +
                "</td>" +
            "<% } %>" +
            "</tr>" +
        "<% } %>" +
        "</tbody>" +
    "</table>";
var calendars = {};
$(document).ready(function () {
    var thisMonth = moment().format('YYYY-MM');
    var eventArray = {{ data|tojson }};
    var temp = [{
        date: thisMonth + '-22',
        type: 1
    }, {
        date: thisMonth + '-27',
        type: 2
    }, {
        date: thisMonth + '-13',
        type: 1
    }];
    calendars.clndr1 = $('.cal1').clndr({
        events: eventArray,
        targets: {
            day: 'day',
        },
        clickEvents: {
            click: function (target) {
                console.log('Cal-1 clicked: ', target);
            },
            today: function () {
                console.log('Cal-1 today');
            },
            nextMonth: function () {
                console.log('Cal-1 next month');
            },
            previousMonth: function () {
                console.log('Cal-1 previous month');
            },
            onMonthChange: function () {
                console.log('Cal-1 month changed');
            },
            nextYear: function () {
                console.log('Cal-1 next year');
            },
            previousYear: function () {
                console.log('Cal-1 previous year');
            },
            onYearChange: function () {
                console.log('Cal-1 year changed');
            },
            nextInterval: function () {
                console.log('Cal-1 next interval');
            },
            previousInterval: function () {
                console.log('Cal-1 previous interval');
            },
            onIntervalChange: function () {
                console.log('Cal-1 interval changed');
            }
        },
        multiDayEvents: {
            singleDay: 'date',
            endDate: 'endDate',
            startDate: 'startDate'
        },
        showAdjacentMonths: true,
        adjacentDaysChangeMonth: false
    });
    // Bind all clndrs to the left and right arrow keys
    $(document).keydown(function (e) {
        // Left arrow
        if (e.keyCode == 37) {
            calendars.clndr1.back();
            calendars.clndr2.back();
            calendars.clndr3.back();
        }
        // Right arrow
        if (e.keyCode == 39) {
            calendars.clndr1.forward();
            calendars.clndr2.forward();
            calendars.clndr3.forward();
        }
    });
});




calendar