JSFiddle - React, Tailwind, and code Playground

by Kevin Pliester

HTML

<link rel="stylesheet" href="https://crs.avantio.com/datosBroker/bk_fewooge/templates/assets/css/style.css">
<link rel="stylesheet" href="https://fwk.avantio.com/assets/core-7.0/css/update.css">
<link rel="stylesheet" href="https://fwk.avantio.com/assets/core-7.0/fonts/fontlibrary/css/fontlibrary.css">
<script defer="" src="https://crs.avantio.com/datosBroker/bk_fewooge/templates/assets/js/its--scripts.js"></script>
<script type="text/javascript" src="https://crs.avantio.com/default/js/xajax/xajax_js/xajax.js"></script>
<script type="text/javascript" src="https://crs.avantio.com/min/?g=js&amp;modules=redesign,default,responsive-gallery-0,mapbox&amp;type=vendor&amp;typeView=accommodation&amp;language=DE&amp;v=1613556005"></script>
<script type="text/javascript" src="https://crs.avantio.com/min/?g=js&amp;modules=redesign,default&amp;type=main&amp;typeView=accommodation&amp;v=1613556005"></script>

<div class="calendar"></div>

CSS

#icon_left_calendar{display: inline-block;vertical-align: middle;cursor: pointer;position: absolute;left: 6px;bottom: 0;}
    #icon_right_calendar{display: inline-block;vertical-align: middle;cursor: pointer;position: absolute;right: 6px;bottom: 0;}
    #bloque_formato_calendarios{display:table-cell;vertical-align:middle; width: 100%;padding-bottom: 30px;}
    .calendarTable {
        border:none;
        }
    .rows {
        color: #333333;
        font-size: 13px;
        font-weight: bold;
        line-height: 180%;
        text-align: center;
        border-bottom: 2px solid #fff;
        }
        .monthYearText {
        color: #2e424d;
        font-size: 14px;
        text-transform: uppercase;
        font-weight: bold;
        width: 100%;
        }
    .monthYearRow {
        background-color: transparent;
                line-height: 23pt;
        text-align: center;
        vertical-align: middle;
        }

    .rows td{height: 33px;width: 33px; vertical-align: middle;}

    .diaNoPermitido {
        background-color: #ffffff;
        color: #c7cbce;
        font-size: 12px;
        line-height: 2.5em;
    }
    .diaOcupado {
        background-color: #ffffff;
        color: #c7cbce;
                     }
    .locked-red .diaOcupado {
        background-color: #efadad;
        color: #6d6d6d;
    }
    .diaPreReserva {
        background-color: #EFEFEF;
        color: #CACACA;
                
        font-size: 12px;
    }

    .locked-red .diaPreReserva {
        background: #FFE89A;
        color: #57616a;
    }

    .diaBajoPeticion {
        background-color: violet;
                        color: #BBBBBB;
        font-size: 12px;
        line-height: 2.5em;
    }
    .diaLibre {
        background-color: #19dd91;
        color: #57616a;
                         font-weight: bold;
    }
    .locked-red .diaLibre {
        color: #6d6d6d;
        background-color: #b5ebc7;
    }
    .dayNamesRow {
        background-color:transparent;
       ...

JavaScript

(function($) {

  $.ajax({
    url: "https://booking.fewooge.de/vermietung/ferienwohnung-wangerooge-nordseebad-fregatte-wintergarten-334479.html",
    type: 'GET',
    success: function(data) {
      $(".calendar").html($(data).find("#periodos").html());
    }
  });

})(jQuery);