Styling Datepicker: Markieren Sie bestimmte Daten

Ich weiß, dass diese Frage schon einmal gestellt wurde, dass die ‘Lösungen’, die ich bisher gefunden habe, nicht zu funktionieren scheinen.

Ich verwende das Kontaktformular 7 und das Datepicker-Plugin auf meiner WordPress-Website. Das Kontaktformular und der Kalender funktionieren einwandfrei, aber ich möchte in der Lage sein, bestimmte Daten hervorzuheben, indem ich die Hintergrundfarbe dieser Daten ändere.

Hier ist der Code, den ich in meine Header-Datei eingefügt habe:

<script type="text/javascript">
  $(document).ready(function() {
    var SelectedDates = {};
    SelectedDates[new Date('07/26/2016')] = new Date('07/26/2016');
    $('#datepicker123').datepicker({
      beforeShowDay: function(date) {
        var Highlight = SelectedDates2023;
        if (Highlight) {
          return [true, "Highlighted", Highlight];
        }
        else {
          return [true, '', ''];
        }
      }
    });
  });
</script>

In meinem style.css-Blatt habe ich den folgenden Code eingefügt, um das Styling zu diesen Daten hinzuzufügen:

.Highlighted a{
   background-color : #1AAFFF !important;
}

Das Datum in diesem Beispiel (26.07.2016) wird jedoch nicht hervorgehoben, wenn ich auf den Kalender klicke, sondern das Standardformat wird angezeigt. Wo ist mein Fehler?

Vielen Dank für deine Hilfe!

Bearbeiten: Der HTML-Code schien super lang zu sein, also hier ist der Link zur Website: KYTE

Bearbeiten 2: Also habe ich meiner functions.php-Datei den folgenden Code hinzugefügt:

function wpse_enqueue_datepicker() {
  // Load the datepicker script (pre-registered in WordPress).
  wp_enqueue_script( 'jquery-ui-datepicker' );

  // You need styling for the datepicker.
  // For simplicity I've linked to Google's hosted jQuery UI CSS.
  wp_register_style( 'jquery-ui', 'http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css' );
  wp_enqueue_style( 'jquery-ui' );  
}

add_action( 'wp_enqueue_scripts', 'wpse_enqueue_datepicker' );

funktioniert immer noch nicht.

Ich glaube , Sie stellen einen markierten Kurs nicht auf das ausgewählte Datum ein . Versuchen

$('td').on('click', function(){
    $('td.Highlighted').removeClass('Highlighted');
    $(this).addClass('Highlighted');
});

Dies wird Ihnen helfen und Ihr CSS ändern:

tr.Highlighted {
     background-color:red;
}

Ich habe es getestet

Sie versuchen, eine Datepiker-Methode aufzurufen, bevor ihre Bibliothek geladen wird.

Versuchen Sie, diesen Code in Ihre einzufügen functions.php Datei

<?php
  add_action( 'wp_footer', 'my_custom_js');
  function my_custom_js(){

   //Your js code goes here

  }
?>

Ich war selbst verwirrt und verwirrt, bis ich meine Skripte in die Fußzeile eingefügt habe. Dann hat es geklappt. Ich habe separate js und css, die helfen, sie nur bei Bedarf einzureihen.

function se_3852702_init() {
  // Place your own script in footer (see the last TRUE)
  wp_register_script( 'se_3852702',
    plugins_url( 'se_3852702' ) . DIRECTORY_SEPARATOR . 'se_3852702.js',
    [ 'jquery-ui-datepicker' ],
    FALSE,
    TRUE // <======== Place in the footer
  );

  wp_register_style( 'se_3852702', plugins_url( 'se_3852702' ) . DIRECTORY_SEPARATOR . 'se_3852702.css' );
}
add_action( 'init', 'se_3852702_init' );

function se_38527021_enqueue_scripts() {
  wp_enqueue_script( 'se_3852702' );
  wp_enqueue_style( 'se_3852702' );

  wp_enqueue_style( 'jquery-ui', 'http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css' );
}
// This is overkill as it always enqueue the scripts.
add_action( 'wp_enqueue_scripts', 'se_38527021_enqueue_scripts' );

zusammen mit einem ähnlichen js-Skript

jQuery(document).ready(
  (function ($) {
    function dayAvailable(date) {
      console.log(date);
      let day = date.getDate();
      return [day % 2 == 0, 'my-class', 'Label when hover'];
  }

  $('#date-picker').datepicker({
    beforeShowDay: dayAvailable,
  })
})(jQuery)
);

daraus resultierend