javascript - ejemplos - full calendar example

Agregar una clase a un calendario de JavaScript dado los datos(clndr.js)

Question

Estoy buscando asignar una clase a cada evento clndr.js que aparece en mi calendario en función del valor en sí. var temp muestra un ejemplo de los datos recibidos. Quiero que el estilo de cada evento en el tipo sea 1 o 2. El código muestra la plantilla predeterminada que quiero modificar para simplemente agregar el valor pasado en type como una clase para que luego pueda darle un estilo.

enlace a la biblioteca fuente en github

enlace a un problema similar en github

// 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();
        }
    });
});

Answer 1

No conozco tu código, así que estoy trabajando con la prueba de CLNDR de "pruebas" de la carpeta github.

Agregue en la parte inferior de test.js (básicamente solo asegúrese de que esté después de la activación de 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);
};

A continuación, agregue algunos estilos CSS a test.html <head> solo para ver claramente que está funcionando

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