JSFiddle - React, Tailwind, and code Playground

by sto_uzbekov

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="doctorCalendar"></div>

JavaScript

(function ($) {
            $.extend($.datepicker, {

                // Reference the orignal function so we can override it and call it later
                _inlineDatepicker2: $.datepicker._inlineDatepicker,

                // Override the _inlineDatepicker method
                _inlineDatepicker: function (target, inst) {

                    // Call the original
                    this._inlineDatepicker2(target, inst)

                    var beforeShow = $.datepicker._get(inst, 'beforeShow')

                    if (beforeShow) {
                        beforeShow.apply(target, [target, inst])
                    }
                }
            });
        }(jQuery));
// Код выше взят с просторов интернета. Он запускает beforeShow при инициализации календаря


        $('#doctorCalendar').datepicker({
            dateFormat: 'dd.mm.yy',
            minDate: 0,
            firstDay: 1,
            beforeShowDay: function (day) {
                if (new Date(day).setHours(0, 0, 0, 0) < new Date().setHours(0, 0, 0, 0)) {
                    return [false, 'last-day-js', '']
                }
                if (new Date(day).setHours(0, 0, 0, 0) === new Date().setHours(0, 0, 0, 0)) {
                    return [true, 'current-day-js ' + day.getDate() + '-' + (day.getMonth() + 1) + '-' + day.getFullYear(), '']
                }
                return [true, 'free-day-js ' + day.getDate() + '-' + (day.getMonth() + 1) + '-' + day.getFullYear(), '']
            },
            onSelect: function (day) {
                console.log(day)
            },
            beforeShow: function (input, inst) {
                $('.last-day-js').append('<small>Запись невозможна</small>')
                $('.free-day-js').append('<small>10:00 - 20:00</small>')
                let hour = new Date().getHours()
                let minute = new Date().getMinutes()
                $('.current-day-js').append('<small>' + hour + ':' + minute + ' - 20:00</small>')
            }
     ...