将数据属性添加到特定日期（Jquery UI）

Question

I have a Jquery UI datepicker, and I need to add data attributes to specific dates, so I can use it to show events happening on this specific date.

my current state is still pretty simple, and I see the "highlight" does add a "title" attr to the of the specific dates, but I can't seem to figure it it's even possible to add more custom data attributes.

this is what I get for a highlighted date:

I would like to have even a simple data attribute with the compressed date like data-events-date="12042017", so I can pull the data of this day's events from a list.

 jQuery(document).ready(function() {

    // An array of dates
    var eventDates = {};
    eventDates[ new Date( '12/04/2017' )] = new Date( '12/04/2017' ).toString();
    eventDates[ new Date( '12/06/2017' )] = new Date( '12/06/2017' ).toString();
    eventDates[ new Date( '12/20/2017' )] = new Date( '12/20/2017' ).toString();
    eventDates[ new Date( '12/25/2017' )] = new Date( '12/25/2017' ).toString();

    // datepicker
    jQuery('#courses-calendar').datepicker({
        beforeShowDay: function( date ) {
            var highlight = eventDates[date];
            if( highlight ) {
                 return [true, "event", highlight];
            } else {
                 return [true, '', ''];
            }
         }
    });
});

If there's a better yet simple option for it - I'm open for suggestions. thanks

UPDATE 1 27/9

So I went back and changed the way the datepicker works, so I won't have to use data attributes as triggers. problem now - I don't know how to get the "event" class to be added to the dates in my array (think I messed up something there).

this is my new code: https://jsfiddle.net/5mkp1gxn/

Just need to add the class "event" to the dates that appear on the array.

Answer 1

why not just set data like data-events-date="12-04-2017" and change code to

// datepicker
jQuery('#courses-calendar').datepicker({
    beforeShowDay: function( date ) {    //does heres date is data-events-date attribute? 
        var highlight = new Date( date.split("-").join("/")).toString();
        if( highlight ) {
             return [true, "event", highlight];
        } else {
             return [true, '', ''];
        }
     }
});

edited1

I used Tooltip to beautify the title of events, where you can use HTML and stuff to show whatever you want... For example, try to hover one of the dates in eventDates :

It could not work because of localization, try it locally with your date format

 //var a = ["2017/3/04","2017/9/28"]; var events = { "course": [{ "date": "9-28-2017", "hour": "17:30", "title": "Class Name 1", "manager": "Khal Drogo", "link": "http://www.google.co.il" }, { "date": "9-4-2017", "hour": "17:40", "title": "Class Name 2", "manager": "Little Finger", "link": "http://www.google.co.il" }, { "date": "9-5-2017", "title": "Class Name 3", "manager": "Sansa Stark", "link": "http://www.google.co.il" }, ] }; a = events["course"]; //var a = {"2017/3/04":"do sth", "2017/9/28":"it works"} // datepicker jQuery('#courses-calendar').datepicker({ beforeShowDay: function(date) { var dstring = date.toLocaleString().substring(0,9); var dAry = dstring.split("/"); dAry.push(dAry.shift()); dstring = dAry.join("-").split(" ").join(""); var item,isHightlight=false; for(var i in a){ if(a[i].date == dstring){ isHightlight = true; item = a[i]; break; } } //var isHightlight = typeof a[dstring] !== "undefined"?1:0; //highlight = date.toString(); //if u want time, use this highlight = typeof item !== "undefined" ? "title:"+(item.title+" \\ncontent:"+item.manager+" \\nlink:"+item.link):undefined; if( isHightlight === true ) { return [true, "event", highlight]; } else { return [true, '', '']; } } }); 

 <link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <input id="courses-calendar" /> 

edited2

if this codes is not you wanted, I think you should ask a new question.

Answer 2

I used Tooltip to beautify the title of events, where you can use HTML and stuff to show whatever you want... For example, try to hover one of the dates in eventDates :

It could not work because of localization, try it locally with yor date format

 // An array of dates var eventDates = { '27/09/2017': 'EVENT NAME', '12/04/2017': 'EVENT NAME', '12/06/2017': 'EVENT NAME', '12/20/2017': 'EVENT NAME', '12/25/2017': 'EVENT NAME' }; function pad (str, max) { str = str.toString(); return str.length < max ? pad("0" + str, max) : str; } // datepicker jQuery('#courses-calendar').datepicker({ beforeShowDay: function(date) { var day = date.getDate(); var month = date.getMonth() + 1; var year = date.getFullYear(); var dateString = pad(day,2)+'/'+pad(month,2)+'/'+year; if(dateString in eventDates) { return [true, 'event', eventDates[dateString]]; } else { return [true, '', '']; } } }); jQuery(document).tooltip({ items: '.event', content: function() { var day = $(this).text(); var $parent = $(this).closest('td'); var month = $parent.data('month') + 1; var year = $parent.data('year'); var date = pad(day,2)+'/'+pad(month,2)+'/'+year; return date+' - <i>'+eventDates[date]+'</i><br>You can print here whatever you want...<br><b>Even in HTML!</b>'; } }); 

 <link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script src="https://github.com/jquery/jquery-ui/blob/master/ui/i18n/datepicker-it.js"></script> <input id="courses-calendar" />