Ukázka kompletního kódu

Příklad HTML kódu s předdefinovanými JavaScript komponentami:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en-US">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>
      FlexBook Examples
    </title>

    <!-- FlexBook JavaScripts -->
    <script src="https://www.flexbook.cz/jq/jquery.js"></script>
    <script src="https://www.flexbook.cz/flbv2.js"></script>

    <!-- Integrator's custom CSS -->
    <link rel="stylesheet" type="text/css" href="example.css" />
  </head>
  <body>
    <h1><a href="index.html">FlexBook Examples<a></h1>
    <i> Simple examples of predefined FlexBook JavaScript components</i>

    <h2>User Profile</h2>
    <div id="flexbook_profile"></div>
    <br>

    <h2>List of all resources</h2>
    <div id="flexbook_resource_list"></div>

    <h2>List of all events</h2>
    <div id="flexbook_event_list" style="overflow-y:scroll; height:250px;"></div>
    <br>

    <h2>List of events with tag 'package'</h2>
    <div id="flexbook_event_list_packages"></div>
    <br>

    <h2>Resource detail of resource with ID 7</h2>
    <div id="flexbook_resource_detail_1"></div>

    <h2>Calendar of resource with ID 7</h2>
    <div id="flexbook_resource_calendar_1"></div>

    <h2>Calendar of resources with ID 577 and 578 focused to date 2016-11-02</h2>
    <div id="flexbook_resource_calendar_2"></div>

    <h2>Vertical calendar of resources with ID 577 and 578 focused to date 2016-11-02</h2>
    <div id="flexbook_resource_calendar_3"></div>

    <script>
      flbInit('https://www.flexbook.cz/ajax.php',4, [
             { 
           type: 'flbProfile',
           placeHolder: 'flexbook_profile',
           params: {
            language: 'en',
            buttons: ['login','logout','profile','password','reservation','registration','credit','sendPassword'],
            checkAttributeMandatory: 1,
            externalAccount: 1,
            extraDiv: 1,
               },
         },
         { 
           type: 'flbResourceList',
           placeHolder: 'flexbook_resource_list',
         },
         { 
           type: 'flbEventList',
           placeHolder: 'flexbook_event_list',
         },
         { 
           type: 'flbEventList',
           placeHolder: 'flexbook_event_list_packages',
           params: {
                    tag: ['package'],
                   }
         },
         { 
           type: 'flbResourceDetail',
           placeHolder: 'flexbook_resource_detail_1',
           params: {
                resourceId: 7,
                   }
         },
         { 
           type: 'flbResourceCalendar',
           placeHolder: 'flexbook_resource_calendar_1',
           params: {
                resourceId: 7,
            render: ['reservation','occupied','event'],
            renderText: ['legend','name','description','price'],
                   }
         },
         { 
           type: 'flbResourceCalendar',
           placeHolder: 'flexbook_resource_calendar_2',
           params: {
            resourceId: [577,578],
            dateStart: '2016-11-02',
            resourceLabel: 'Stolky',
            resourceWidth: 100,
            slotWidth: 100,
                   }
         },
         { 
           type: 'flbResourceCalendar',
           placeHolder: 'flexbook_resource_calendar_3',
           params: {
            resourceId: [7,535,10],
            render: ['reservation','occupied','event'],
            viewDirection : 'vertical',
                   }
         },
      ]);
    </script>
  </body>
</html>

Otestovaná verze HTML kódu s příklady FlexBookových JavaScript komponent je k dispozici na GitHubu v projektu flexbook-examples na adrese https://github.com/davidpasek/flexbook-examples

Funkční kód je vystaven na adrese http://flexbook.dpasek.com/

PreviousflbEventWeekListNextPřizpůsobení komponent pomocí CSS

Last updated

Was this helpful?