Veriler verilen bir javascript takvimine bir sınıf ekleme (clndr.js)

Question

Takvimimin içinde görünen her clndr.js olayı, değere göre bir sınıf atamak istiyorum. var temp, alınan verilerin bir örneğini gösterir. Her olayın stilini 1 veya 2 olmak istiyorum. Kod, basit bir şekilde type'da geçen değeri sınıfta eklemek için değiştirmek istediğim varsayılan şablonu gösterir. klasör "testler" -

// 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

Ben kodunuzu bilmiyorsanız, bu yüzden github gelen CLNDR testi ile çalışıyorum

link to a similar problem on github

link to the source library on github

.

test.js altında Ekle sadece

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

çalıştığını net bir şekilde görmek

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

Sonra <head> test.html için bazı css stilleri eklemek (temelde sadece emin clndr aktivasyon peşinde olun)