Highlight dates in Bootstrap datetimepicker

Question

I have my BS3 Datetimepicker running. I want to "highlight" some specific dates of the calendar like appointments.

My code is now like this:

HTML:

 <div id="mini-calendar"></div>

JS:

$('#mini-calendar').datetimepicker({
            inline: true,
            format: "dd MM yyyy",                    
 });

Answer 1

Because you do not mention which Bootstrap-datetimepicker library you are using, to I just post here what I have done for the same task. You should add some line of codes to make it work.

I use BS datetimepicker from here https://github.com/smalot/bootstrap-datetimepicker/releases/tag/2.3.11

1. Modify \\bootstrap-datetimepicker-2.3.11\\js\\bootstrap-datetimepicker.js

Go to line 265 add following lines:

**//onRender to highlight specific dates!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
this.onRender = options.onRender;//Hung added!!!!!!!!!!!!!!!!!!!!!!!!!
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!**

Then, go down line 683 add lines as follows:

//clsName = ''; //Old Hung commented
  clsName = this.onRender(prevMonth); //Hung added this line

Line 821:

$.fn.datetimepicker.defaults = {
    //This function is original empty
    //Hung add following:
    onRender: function(date) {
      return '';
    }
    //End Hung added
  };

2. Using

Go \\bootstrap-datetimepicker-2.3.11\\sample in bootstrap v3\\ File index.html, add style for highlight:

 <style type="text/css">

    /*Highlight special holidays*/
    .highlight{
        background-color: #fdf59a;
        color: red !important;
    }


</style>

Add following JavaScript code:

<script type="text/javascript">
var holidays =
[{"holiday_date":"2016/07/18","holiday_name":"Marine Day","comment":"3rd Monday of July"},
{"holiday_date":"2016/07/25","holiday_name":"Special Day","comment":"My comment"}]

public_holidays = []; //for holding date array only
holiday_messages = []; //for holding meaning of the dates 
d = new Date("2016/07/18");
var tmp;
for (var i = 0; i < holidays.length; i ++) {
     tmp = holidays[i]["holiday_date"];
     tmp = new Date(tmp);
     tmp = tmp.valueOf();
    public_holidays.push(tmp);
    holiday_messages.push(holidays[i]["holiday_name"])
} 
$('.form_date').datetimepicker({
    language:  'en',
    format: 'yyyy/mm/dd',
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    minView: 2,
    forceParse: 0,
    onRender: function(date) {
        // console.log("date: " + date);
        // var d = new Date("2016-07-15");
        // !!!!!NOTICE:!!!!!!!!!!!!!!!!!!!!!!!!!
        //Must parse the date manually if not it will be wrong when pass to new Date()
        var dd = date.getDate(); 
        var mm = date.getMonth()+1; //January is 0!
        var yyyy = date.getFullYear();
        if(dd<10){
            dd='0'+dd
        } 
        if(mm<10){
            mm='0'+mm
        } 
        date = yyyy+'/'+mm+'/'+dd;
        var tooltip_date = yyyy+'/'+mm+'/'+dd;
        date = new Date(date);
        if ( $.inArray( date.valueOf(), public_holidays ) > -1 ){
            console.log("Highlighted date: ");
            console.log(date);

            return ' highlight';
        }
        else{
            return ' good'; //just return any string
        }
      }

});

P/s: Bonus point is tooltip. If you need tooltip on the highlighted dates. You need add two functions: add_tooltip_to_highlighted_dates and get_tooltip_of_date. Then modify the main datetimepicker to following:

function add_tooltip_to_highlighted_dates(){

     // Make tooltip of highlighted dates
    var highlighted_dates = $(".datetimepicker .highlight");

    $.each(highlighted_dates, function(){

        var highlighted = $(this).attr("class"); // get all CSS class to parse the highlighted date
        console.log("CSS classes: " + highlighted);
        var idx = highlighted.indexOf("datetooltip");
        var date_str = "";
        var css_classes = [];

        if( idx > -1){
            css_classes = highlighted.split(" ");
            for(var j = 0; j < css_classes.length; j++){
                var start_idx = css_classes[j].indexOf("datetooltip");
                if(start_idx > -1){
                    start_idx =  start_idx+"datetooltip".length+1;

                    date_str = css_classes[j].substring(start_idx);
                    break;
                }
            }


            if (date_str != "") {
                var tooltip = get_tooltip_of_date(date_str);
                console.log(tooltip);
                $(this).tooltip({
                    container: "body",
                    title: tooltip
                });
            }else {
                console.log("cannot get highlighted date string");
            }


        }

    });


}

function get_tooltip_of_date(date_str){

    // date_str = "2016-07-18"
    // date_str = date_str.split("-").join("/");
    console.log("input date string: " + date_str);
    var tooltip = "";
    var date = new Date(date_str);
    date = date.valueOf();
    var index;
    for (var i = 0; i < public_holidays.length; i++) {
        if (date == public_holidays[i]) {
            index = i;
            break;
        }
    }
    if(index){
        tooltip = holiday_messages[index];
    }

    return tooltip;

}

$('.form_date').datetimepicker({
    language:  'en',
    format: 'yyyy/mm/dd',
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    minView: 2,
    forceParse: 0,

    onRender: function(date) {
        // console.log("date: " + date);
        // var d = new Date("2016-07-15");
        // !!!!!NOTICE:!!!!!!!!!!!!!!!!!!!!!!!!!
        //Must parse the date manually if not it will be wrong when pass to new Date()
        var dd = date.getDate(); 
        var mm = date.getMonth()+1; //January is 0!
        var yyyy = date.getFullYear();
        if(dd<10){
            dd='0'+dd
        } 
        if(mm<10){
            mm='0'+mm
        } 
        date = yyyy+'/'+mm+'/'+dd;
        var tooltip_date = yyyy+'/'+mm+'/'+dd;
        date = new Date(date);
        if ( $.inArray( date.valueOf(), public_holidays ) > -1 ){
            console.log("Highlighted date: ");
            console.log(date);
            console.log(date.valueOf());
            return ' highlight datetooltip-'+tooltip_date;
        }
        else{
            return ' good'; //just return any string
        }
      }

}).on('changeDate', function(ev){
    console.log("change dated");

}).on('show', function(ev){
    // console.log(ev.date.valueOf());
   add_tooltip_to_highlighted_dates();        
    return '';
}).on("next:month", function(ev) {
    console.log("next button click");
    add_tooltip_to_highlighted_dates();

}).on("prev:month", function(ev){
     console.log("prev button click");
    add_tooltip_to_highlighted_dates();
});

Hope this helps.