How to add Custom title on date cell in daterangepicker

Question

I am using daterangepicker library for calendar and want to display status of the practitioner by date by using isCustomDate function I can update CSS of each date cell

$('#calender').daterangepicker({
        singleDatePicker:true,
        minDate:moment(valid_from),
        maxDate:moment(valid_to),
        locale:{
            format:'DD MMM YYYY'
        },
        isCustomDate:function(date)
        {
            if(absent.indexOf(moment(date).format('YYYY-MM-DD'))>=0)
            {
                return 'bg-danger text-light';
            }
            else if(present.indexOf(moment(date).format('YYYY-MM-DD'))>=0)
            {
                return 'bg-primary text-light';
            }
        },
        isInvalidDate:function(date)
        {
           if(invalid.indexOf(moment(date).format('YYYY-MM-DD'))>=0)
           {
              return true;
            }
        }
});

But how to add title for each cell Such as ('Absent' OR 'Present')

Answer 1

Add a class in cell

 $('#calender').daterangepicker({
        singleDatePicker:true,
        minDate:moment(valid_from),
        maxDate:moment(valid_to),
        locale:{
            format:'DD MMM YYYY'
        },
        isCustomDate:function(date)
        {
            if(absent.indexOf(moment(date).format('YYYY-MM-DD'))>=0)
            {
                return 'bg-danger text-light absent';
            }
            else if(present.indexOf(moment(date).format('YYYY-MM-DD'))>=0)
            {
                return 'bg-primary text-light';
            }
        },
        isInvalidDate:function(date)
        {
           if(invalid.indexOf(moment(date).format('YYYY-MM-DD'))>=0)
           {
              return true;
            }
        }
});

and check that class by below method in the calendar table

   $('#calender').on('showCalendar.daterangepicker',function(){
    $('.calendar-table .table-condensed tbody td').each(function(i,e){

      if($(this).hasClass('absent'))
      {
       $(this).attr('title','Absent');
      }
     });
   });