git.roojs.org Git - roojs1/blob - examples/layout/calendar.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3 <head>
   4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   5 <title>Calendar Example</title>
   6    <link rel="stylesheet" type="text/css" href="../../css/roojs-debug.css"/>
   7
   8     <script type="text/javascript" src="../../roojs-debug.js"></script>
   9     <script type="text/javascript" src="../../Roo/LayoutManager.js"></script>
  10     <script type="text/javascript" src="../../Roo/LayoutRegion.js"></script>
  11     <script type="text/javascript" src="../../Roo/BorderLayout.js"></script>
  12
  13
  14
  15
  16     <script type="text/javascript" src="../../Roo/calendar/View.js"></script>
  17        <script type="text/javascript" src="../../Roo/CalendarPanel.js"></script>
  18
  19     <script type="text/javascript" src="calendar.js"></script>
  20
  21 <!--    <link rel="stylesheet" type="text/css" href="grid-examples.css" />-->
  22
  23     <!-- Common Styles for the examples -->
  24     <link rel="stylesheet" type="text/css" href="../examples.css" />
  25   <link rel="stylesheet" href="../../css-bootstrap/calendar.css">
  26
  27 <style type="text/css">
  28
  29
  30 /* define height and width of scrollable area. Add 16px to width for scrollbar          */
  31 div.fc-view {
  32         clear: both;
  33         border: 1px solid #963;
  34         height: 100%;
  35         overflow: auto;
  36         width: 100%
  37 }
  38
  39 /* Reset overflow value to hidden for all non-IE browsers. */
  40 html>body div.fc-view {
  41         overflow: hidden;
  42         width: 100%
  43 }
  44
  45 /* define width of table. IE browsers only                 */
  46 div.fc-view table {
  47         float: left;
  48         width: 100%
  49 }
  50
  51 /* define width of table. Add 16px to width for scrollbar.           */
  52 /* All other non-IE browsers.                                        */
  53 html>body div.fc-view table {
  54         width: 100%
  55 }
  56
  57 /* set table header to a fixed position. WinIE 6.x only                                       */
  58 /* In WinIE 6.x, any element with a position property set to relative and is a child of       */
  59 /* an element that has an overflow property set, the relative value translates into fixed.    */
  60 /* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
  61 thead tr {
  62         position: relative
  63 }
  64
  65 /* set THEAD element to have block level attributes. All other non-IE browsers            */
  66 /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
  67 html>body thead tr {
  68         display: block
  69 }
  70
  71 /* make the TH elements pretty */
  72 /*thead th {
  73         background: #C96;
  74         border-left: 1px solid #EB8;
  75         border-right: 1px solid #B74;
  76         border-top: 1px solid #EB8;
  77         font-weight: normal;
  78         padding: 4px 3px;
  79         text-align: left
  80 }*/
  81
  82 /* make the A elements pretty. makes for nice clickable headers                */
  83 /*thead a, thead a:link, thead a:visited {
  84         color: #FFF;
  85         display: block;
  86         text-decoration: none;
  87         width: 100%
  88 }*/
  89
  90 /* make the A elements pretty. makes for nice clickable headers                */
  91 /* WARNING: swapping the background on hover may cause problems in WinIE 6.x   */
  92 /*thead a:hover {
  93         color: #FFF;
  94         display: block;
  95         text-decoration: underline;
  96         width: 100%
  97 }*/
  98
  99 /* define the table content to be scrollable                                              */
 100 /* set TBODY element to have block level attributes. All other non-IE browsers            */
 101 /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
 102 /* induced side effect is that child TDs no longer accept width: auto                     */
 103 html>body tbody {
 104         display: block;
 105         height: 500px;
 106         overflow: auto;
 107         width: 100%
 108 }
 109
 110 /* make TD elements pretty. Provide alternating classes for striping the table */
 111 /* http://www.alistapart.com/articles/zebratables/                             */
 112 /*tbody td, tbody tr.normalRow td {
 113         background: #FFF;
 114         border-bottom: none;
 115         border-left: none;
 116         border-right: 1px solid #CCC;
 117         border-top: 1px solid #DDD;
 118         padding: 2px 3px 3px 4px
 119 }*/
 120
 121 /*tbody tr.alternateRow td {
 122         background: #EEE;
 123         border-bottom: none;
 124         border-left: none;
 125         border-right: 1px solid #CCC;
 126         border-top: 1px solid #DDD;
 127         padding: 2px 3px 3px 4px
 128 }*/
 129
 130 /* define width of TH elements: 1st, 2nd, and 3rd respectively.          */
 131 /* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
 132 /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
 133 html>body thead th {
 134         width: 136px
 135 }
 136 /*
 137 html>body thead th + th {
 138         width: 240px
 139 }
 140
 141 html>body thead th + th + th {
 142         width: 316px
 143 }*/
 144
 145 /* define width of TD elements: 1st, 2nd, and 3rd respectively.          */
 146 /* All other non-IE browsers.                                            */
 147 /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
 148 html>body tbody td {
 149         width: 136px
 150 }
 151 html>body tbody td:last-child {
 152         width: 120px
 153 }
 154 /*
 155 html>body tbody td + td {
 156         width: 240px
 157 }
 158
 159 html>body tbody td + td + td {
 160         width: 300px
 161 }*/
 162
 163 </style>
 164
 165 </head>
 166 <body style="height:500px">
 167 <!-- EXAMPLES -->
 168 <h1>View Panel Example</h1>
 169
 170
 171 <div id="view-panel" style="width:952px;height:500;">
 172
 173 </div>
 174
 175 </body>
 176 <script type="text/javascript">
 177     baseURL = "/roojs1/";
 178     Roo.debug =1;
 179     Roo.onReady(function() {
 180         Roo.XComponent.build();
 181     });
 182 </script>
 183 </html>