Skip to content
Marc Portier edited this page Mar 21, 2012 · 2 revisions

Usage

Below you find a typical block of HTML showing how to use the planboard.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">

    <HTML LANG="nl">
    <HEAD>
      <link type="text/css" rel="stylesheet"      href="./css/jquery-ui-1.8.18.custom.css"    media="all" />
      <link type="text/css" rel="stylesheet"      href="./css/jquery.jscrollpane.css"         media="all" />
      <link type="text/css" rel="stylesheet"      href="./css/jquery.jscrollpane.lozenge.css" media="all" />
      
      <link type="text/css" rel="stylesheet/less" href="./css/jquery.planboard.less"          media="all" />
      <script type="text/javascript" src="./js/less-1.2.1.min.js"></script>

      <script type="text/javascript" src="./js/jquery-1.7.1.min.js" ></script>
      <script type="text/javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>
      <script type="text/javascript" src="./js/jquery.ui.datepicker-fr.js"></script>
      <script type="text/javascript" src="./js/jquery.ui.datepicker-nl.js"></script>

      <script type="text/javascript" src="./js/jquery.mousewheel.js"></script>
      <script type="text/javascript" src="./js/jquery.jscrollpane.js"></script>
      
      <script type="text/javascript" src="./js/jquery-planboard.js" ></script>
      
      <script type="text/javascript" >
        $(document).ready( function() {
            var api = $('div#planboard').planboard({
                "uri": {
                    "rowdata":          "./data/ve.json", 
                    "period":           "./data/period.json", 
                    "allocation":       "./data/reservation.json",
                }
            }).data('planboard');
            
        });
      </script>

    </HEAD>
    <BODY>
        <DIV ID="planboard">no planboard yet</DIV>
    </BODY>
    </HTML>
Clone this wiki locally