Ajouter une classe à des dates de tableau (Jquery UI Datepicker)

Question

Je cette série d'événements:

var events = { 
     "course": [{ 
      "date": "9-4-2017", 
      "hour": "17:30", 
      "title": "lorem Ipsum", 
      "manager": "yada yada", 
      "link": "http://www.example.com" 
     }, 
     { 
      "date": "9-5-2017", 
      "hour": "17:30", 
      "title": "lorem Ipsum", 
      "manager": "yada yada", 
      "link": "http://www.example.com" 
     }, 
     ] 
}; 

Alors que je réussi à obtenir les données que je veux en cliquant sur les dates, je ne stoppez pas comment se utiliser l'événement "beforeShowDay" pour ajouter une classe aux dates de mon tableau.

ceci est mon code "onSelect" qui fonctionne parfaitement pour l'instant:

dateFormat: 'yyyy-mm-dd', 
    onSelect: function (date, el) { 
     $('.coursesDatesList ul').empty(); 
     var day = el.selectedDay, 
      mon = el.selectedMonth, 
      year = el.selectedYear; 

     var el = $(el.dpDiv).find('[data-year="'+year+'"][data-month="'+mon+'"]').filter(function() { 
      return $(this).find('a').text().trim() == day; 
     }); 
     var eventMonth = mon + 1; 
     var eventClass = ' event'; 
     var eventDate = eventMonth+'-'+el.text()+'-'+year; 
     if(el[0].className == eventClass) { 
      $.each(events.course, function(i, v) { 
       if (v.date.search(eventDate) != -1) { 

        $('.coursesDatesContainer .courseDate').html(eventDate.replace(/-/g, '/')); 
        $('.coursesDatesContainer ul').append(
         "<li>" + 
          "<span class='courseItemTime'>"+v.hour+"</span>" + 
          "<div class='courseItemName'><a title='"+v.title+"' href='"+v.link+"'>"+v.title+"</a></div>" + 
          "<span class='courseItemLecturer'>"+v.manager+"</span>" + 
          "<a class='goLink' href='"+v.link+"' title='"+v.title+"'>❯</a>" + 
         "</li>"); 

        return; 
       } 
      }); 
     } else { 
      //console.log('not an event day!'); 
     } 
    } 

Answer 1

Hope this helps!

utilisez inArray pour obtenir des dates de votre tableau.

var array=[]; 
$.each(events.course, function(i, v) { 
array.push(v.date); 
}); 
$('input').datepicker({ 
    beforeShowDay: function(date){ 
     var string = jQuery.datepicker.formatDate('dd-mm-yy', date); 
     if($.inArray(string, array) == -1){ 
      return [true]; 
     } 
     else{ 
     return [true,"newClass"]; 
     } 
    } 
}); 

var events = { 
 
     "course": [{ 
 
      "date": "19-09-2017", 
 
      "hour": "17:30", 
 
      "title": "lorem Ipsum", 
 
      "manager": "yada yada", 
 
      "link": "http://www.example.com" 
 
     }, 
 
     { 
 
      "date": "28-09-2017", 
 
      "hour": "17:30", 
 
      "title": "lorem Ipsum", 
 
      "manager": "yada yada", 
 
      "link": "http://www.example.com" 
 
     }, 
 
     ] 
 
}; 
 
var array=[]; 
 
$.each(events.course, function(i, v) { 
 
array.push(v.date); 
 
}); 
 
$('input').datepicker({ 
 
    beforeShowDay: function(date){ 
 
     var string = jQuery.datepicker.formatDate('dd-mm-yy', date); 
 
     if($.inArray(string, array) == -1){ 
 
     \t return [true]; 
 
     } 
 
     else{ 
 
     return [true,"newClass"]; 
 
     } 
 
    } 
 
});

#ui-datepicker-div { font-size: 12px; } 
 
td.newClass>a { 
 
    background: red !important; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
    <link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"> 
 
<input type="text" id="date1" name="date1"/>