Přizpůsobení komponent pomocí CSS

Velmi často budete chtít přizpůsobit předpřipravené JavaScript komponenty tak, aby lépe zapadaly do Vašich webových stránek, případně do Vašeho specifického rezervačního procesu. Například, když nechcete používat platebních možností FlexBooku, tak potřebujete schovat tlačítko pro platbu rezervace. Optimální je použít unikátních CSS identifikátorů nebo FlexBook CSS tříd (class), které jsou přiřazeny všem HTML komponentám použitých v rámci JavaScript komponent.

Použití CSS identifikátorů

Níže je uvedena ukázka schování platebních tlačítek pomocí CSS.

button#flexbook_resource_calendar_1_editReservationResourceButtonSavePay {
  display: none;
}

button#flexbook_resource_calendar_2_editReservationResourceButtonSavePay {
  display: none;
}

button#flexbook_resource_list_editReservationResourceButtonSavePay {
  display: none;
}

CSS identifikátory jsou generovány unikátně pro každou komponentu a jako prefix je použit identifikátor FlexBookové JavaScript komponenty. V uvedeném případě jsou to prefixy

• flexbook_resource_calendar_1

• flexbook_resource_calendar_2

• flexbook_resource_list

Ukázka JavaScript kódu pro tento CSS styl je uvedena zde.

<script>
      flbInit('http://www.flexbook.cz/ajax.php',4);
      flbProfile('flexbook_profil');
      flbResourceList('flexbook_resource_list');
      flbResourceCalendar('flexbook_resource_calendar_1', {
                resourceId: [7],
                resourceLabel: 'Rezervace',
      });
      flbResourceCalendar('flexbook_resource_calendar_2', {
                resourceId: [7,10],
                resourceLabel: 'Rezervace',
      });

    </script>

Použití CSS tříd

Jako příklad použití CSS třid použijeme způsob změny textu v konkrétním HTML DIVu, který je použit pro popis (label) konkrétního atributu zdroje z rezervačního systému FlexBook.

V HTML kódu to vypadá následovně

<div class="label flb_event_name_label"><span>Nazev akce:</span></div>

a pomocí CSS stylu jste schopni změnit automaticky generovaný text za text jiný.

<style>
div.label.flb_event_name_label:after {
  content: "Event name:";
}
div.label.flb_event_name_label > span {
  display: none;
}
</style>