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




jquery calendar (2)

मैं प्रत्येक क्लेंडआर.जेएस इवेंट के लिए एक क्लास आवंटित करने के लिए देख रहा हूं जो मेरे कैलेंडर पर मूल्य के आधार पर दिखाई देता है। 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();
        }
    });
});

Answers

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

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

आम तौर पर, आपको यह सुनिश्चित करने के लिए हमेशा एक फॉल बैक लिंक होना चाहिए कि जावास्क्रिप्ट वाले क्लाइंट्स में अभी भी कुछ कार्यक्षमता है। इस अवधारणा को अविभाज्य जावास्क्रिप्ट कहा जाता है।

उदाहरण ... मान लें कि आपके पास निम्न खोज लिंक है:

<a href="search.php" id="searchLink">Search</a>

आप हमेशा निम्नलिखित कर सकते हैं:

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

इस तरह, जावास्क्रिप्ट अक्षम लोगों को निर्देशित किया जाता है search.phpजबकि जावास्क्रिप्ट के साथ आपके दर्शक आपकी उन्नत कार्यक्षमता देखते हैं।





javascript jquery calendar