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>

PreviousflbEventWeekList NextPřizpůsobení komponent pomocí CSS

Last updated 6 years ago

Was this helpful?

<!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>  <script src="https://www.flexbook.cz/jq/jquery.js"></script> <script src="https://www.flexbook.cz/flbv2.js"></script>  <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>