API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 15th, 2018
76
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.65 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Raumuebersicht</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <!--
  8. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  9. -->
  10. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  11. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  12. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  13.  
  14. <link rel="stylesheet" type="text/css" href="/BO/css/styleRoomOverview.css">
  15. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  16. <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  17.  
  18. <!-- change css layers as per time of room booked -->
  19.  
  20. <!-- <script type="text/javascript">
  21.  
  22. var element = document.getElementsByClassName('event-occupied-15'),
  23.  
  24. </script>
  25.  
  26. -->
  27.  
  28. <script>
  29. $( function() {
  30. $( "#datepicker" ).datepicker();
  31. } );
  32. </script>
  33.  
  34.  
  35. </head>
  36.  
  37.  
  38. <body>
  39.  
  40. <div id="calendar-wrap">
  41. <div class="jumbotron jumbotron-fluid">
  42. <header>
  43. <h1 style="text-align:center">RAUMÜBERSICHT</h1>
  44. </header>
  45. <div class="calendar-filter">
  46. <div class='col-sm-4'>
  47. <div class="form-group">
  48. <p>Date: <input type="text" id="datepicker" placeholder="click to select date"></p>
  49. </div>
  50. </div>
  51. </div>
  52. <div id="calendar">
  53.  
  54. <ul>
  55. <li id="room-li" class="hours-color">Rooms</li>
  56. <li id="hours" class="hours-color">7:00</li>
  57. <li id="hours" class="hours-color">8:00</li>
  58. <li id="hours" class="hours-color">9:00</li>
  59. <li id="hours" class="hours-color">10:00</li>
  60. <li id="hours" class="hours-color">11:00</li>
  61. <li id="hours" class="hours-color">12:00</li>
  62. <li id="hours" class="hours-color">13:00</li>
  63. <li id="hours" class="hours-color">14:00</li>
  64. <li id="hours" class="hours-color">15:00</li>
  65. <li id="hours" class="hours-color">16:00</li>
  66. <li id="hours" class="hours-color">17:00</li>
  67. <li id="hours" class="hours-color">18:00</li>
  68. <li id="hours" class="hours-color">19:00</li>
  69. <li id="hours" class="hours-color">20:00</li>
  70. <li id="hours" class="hours-color">21:00</li>
  71. <li id="hours" class="hours-color">22:00</li>
  72. <li id="hours" class="hours-color">23:00</li>
  73. </ul>
  74. <ul class="">
  75. <li id="room-li">
  76. <div class="room-name">Casablanca/5.1</div>
  77. </li>
  78.  
  79. <li>
  80.  
  81.  
  82. <div class="tooltip event-occupied-15" onclick="location.href='#openModal';"style="cursor:pointer;">
  83. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  84. <div id="openModal" class="modalDialog">
  85. <div>
  86. <a href="#close" title="Close" class="close">X</a>
  87. <h2>Room ID: Casablanca/5.1</h2>
  88. <p>Booking ID: 5.1.0001</p>
  89. <p>Reserved time: 7h00 - 7h15</p>
  90. <p>By: Jenifer Williams</p>
  91. </div>
  92. </div>
  93. </div>
  94.  
  95. <div class="tooltip-free event-free-rest" onclick="location.href='https://www.google.com/';"style="cursor:pointer;">
  96. <span class="tooltiptext-free">This slot is free. Click to book</span>
  97. </div>
  98.  
  99.  
  100. </li>
  101.  
  102.  
  103. <li class="tooltip" onclick="location.href='#openModal';" style="cursor:pointer;">
  104. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  105. <div class="event-occupied-60">
  106. <div id="openModal" class="modalDialog">
  107. <div>
  108. <a href="#close" title="Close" class="close">X</a>
  109. <h2>Room ID: Casablanca/5.1</h2>
  110. <p>Booking ID: 5.1.0002</p>
  111. <p>Reserved time: 8h00 - 9h30</p>
  112. <p>By: John Smith</p>
  113. </div>
  114. </div>
  115. </div>
  116. </li>
  117. <li class="tooltip" onclick="location.href='#openModal';" style="cursor:pointer;">
  118. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  119. <div class="event-occupied-30">
  120. <div id="openModal" class="modalDialog">
  121. <div>
  122. <a href="#close" title="Close" class="close">X</a>
  123. <h2>Room ID: Casablanca/5.1</h2>
  124. <p>Booking ID: 5.1.0002</p>
  125. <p>Reserved time: 8h00 - 9h30</p>
  126. <p>By: John Smith</p>
  127. </div>
  128. </div>
  129. </div>
  130. </li>
  131. <li class="tooltip">
  132. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  133. <div class="minutes event-occupied-60">
  134. <div class="event-desc">
  135. </div>
  136. </div>
  137. </li>
  138. <li class="tooltip-free" onclick="location.href='/BO/book/3/?date=heute&starttime=2:30';" style="cursor:pointer;">
  139.  
  140. <a>
  141. <center>
  142. slot frei
  143. </center>
  144. </a>
  145.  
  146. <span class="tooltiptext-free">The room is free. Click to book.</span>
  147. <div class="minutes event-free">
  148. <div class="event-desc">
  149. </div>
  150. </div>
  151. </li>
  152. <li class="tooltip">
  153. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  154. <div class="minutes event-occupied-45">
  155. <div class="event-desc">
  156. </div>
  157. </div>
  158. </li>
  159. <li class="tooltip-free">
  160. <span class="tooltiptext-free">The room is free. Click to book.</span>
  161. <div class="minutes event-free">
  162. <div class="event-desc">
  163. </div>
  164. </div>
  165. </li>
  166. <li class="tooltip-free">
  167. <span class="tooltiptext-free">The room is free. Click to book.</span>
  168. <div class="minutes event-free">
  169. <div class="event-desc">
  170. </div>
  171. </div>
  172. </li>
  173. <li class="tooltip-free">
  174. <span class="tooltiptext-free">The room is free. Click to book.</span>
  175. <div class="minutes event-free">
  176. <div class="event-desc">
  177. </div>
  178. </div>
  179. </li>
  180. <li class="tooltip-free">
  181. <span class="tooltiptext-free">The room is free. Click to book.</span>
  182. <div class="minutes event-free">
  183. <div class="event-desc">
  184. </div>
  185. </div>
  186. </li>
  187. <li class="tooltip-free">
  188. <span class="tooltiptext-free">The room is free. Click to book.</span>
  189. <div class="minutes event-free">
  190. <div class="event-desc">
  191. </div>
  192. </div>
  193. </li>
  194. <li class="tooltip-free">
  195. <span class="tooltiptext-free">The room is free. Click to book.</span>
  196. <div class="minutes event-free">
  197. <div class="event-desc">
  198. </div>
  199. </div>
  200. </li>
  201. <li class="tooltip-free">
  202. <span class="tooltiptext-free">The room is free. Click to book.</span>
  203. <div class="minutes event-free">
  204. <div class="event-desc">
  205. </div>
  206. </div>
  207. </li>
  208. <li class="tooltip-free">
  209. <span class="tooltiptext-free">The room is free. Click to book.</span>
  210. <div class="minutes event-free">
  211. <div class="event-desc">
  212. </div>
  213. </div>
  214. </li>
  215. <li class="tooltip-free">
  216. <span class="tooltiptext-free">The room is free. Click to book.</span>
  217. <div class="minutes event-free">
  218. <div class="event-desc">
  219. </div>
  220. </div>
  221. </li>
  222. <li class="tooltip-free">
  223. <span class="tooltiptext-free">The room is free. Click to book.</span>
  224. <div class="minutes event-free">
  225. <div class="event-desc">
  226. </div>
  227. </div>
  228. </li>
  229. <li class="tooltip-free">
  230. <span class="tooltiptext-free">The room is free. Click to book.</span>
  231. <div class="minutes event-free">
  232. <div class="event-desc">
  233. </div>
  234. </div>
  235. </li>
  236. </ul>
  237. <ul class="">
  238. <li id="room-li">
  239. <div class="room-name">Godzilla/5.2</div>
  240. </li>
  241. <li class="tooltip">
  242. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  243. <div class="minutes event-occupied-60">
  244. <div class="event-desc">
  245. </div>
  246. </div>
  247. </li>
  248. <li class="tooltip">
  249. <div class="minutes event-free">
  250. <div class="event-desc">
  251. </div>
  252. </div>
  253. </li>
  254. <li class="tooltip">
  255. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  256. <div class="minutes event-occupied-45">
  257. <div class="event-desc">
  258. </div>
  259. </div>
  260. </li>
  261. <li class="tooltip">
  262. <div class="minutes event-free">
  263. <div class="event-desc">
  264. </div>
  265. </div>
  266. </li>
  267. <li class="tooltip">
  268. <div class="minutes event-free">
  269. <div class="event-desc">
  270. </div>
  271. </div>
  272. </li>
  273. <li class="tooltip">
  274. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  275. <div class="minutes event-occupied-45">
  276. <div class="event-desc">
  277. </div>
  278. </div>
  279. </li>
  280. <li class="tooltip">
  281. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  282. <div class="minutes event-occupied-60">
  283. <div class="event-desc">
  284. </div>
  285. </div>
  286. </li>
  287. <li class="tooltip">
  288. <div class="minutes event-free">
  289. <div class="event-desc">
  290. </div>
  291. </div>
  292. </li>
  293. <li class="tooltip">
  294. <div class="minutes event-free">
  295. <div class="event-desc">
  296. </div>
  297. </div>
  298. </li>
  299. <li class="tooltip">
  300. <div class="minutes event-free">
  301. <div class="event-desc">
  302. </div>
  303. </div>
  304. </li>
  305. <li class="tooltip">
  306. <div class="minutes event-free">
  307. <div class="event-desc">
  308. </div>
  309. </div>
  310. </li>
  311. <li class="tooltip">
  312. <div class="minutes event-free">
  313. <div class="event-desc">
  314. </div>
  315. </div>
  316. </li>
  317. <li class="tooltip">
  318. <div class="minutes event-free">
  319. <div class="event-desc">
  320. </div>
  321. </div>
  322. </li>
  323. <li class="tooltip">
  324. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  325. <div class="minutes event-occupied-60">
  326. <div class="event-desc">
  327. </div>
  328. </div>
  329. </li>
  330. <li class="tooltip">
  331. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  332. <div class="minutes event-occupied-60">
  333. <div class="event-desc">
  334. </div>
  335. </div>
  336. </li>
  337. <li class="tooltip">
  338. <div class="minutes event-free">
  339. <div class="event-desc">
  340. </div>
  341. </div>
  342. </li>
  343. <li class="tooltip">
  344. <div class="minutes event-free">
  345. <div class="event-desc">
  346. </div>
  347. </div>
  348. </li>
  349. </ul>
  350. <ul class="">
  351. <li id="room-li">
  352. <div class="room-name">GoneWithTheWind/5.3</div>
  353. </li>
  354. <li class="tooltip">
  355. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  356. <div class="minutes event-occupied-15">
  357. <div class="event-desc">
  358. </div>
  359. </div>
  360. </li>
  361. <li class="tooltip">
  362. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  363. <div class="minutes event-occupied-60">
  364. <div class="event-desc">
  365. </div>
  366. </div>
  367. </li>
  368. <li class="tooltip">
  369. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  370. <div class="minutes event-occupied-30">
  371. <div class="event-desc">
  372. </div>
  373. </div>
  374. </li>
  375. <li class="tooltip">
  376. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  377. <div class="minutes event-occupied-60">
  378. <div class="event-desc">
  379. </div>
  380. </div>
  381. </li>
  382. <li class="tooltip">
  383. <div class="minutes event-free">
  384. <div class="event-desc">
  385. </div>
  386. </div>
  387. </li>
  388. <li class="tooltip">
  389. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  390. <div class="minutes event-occupied-45">
  391. <div class="event-desc">
  392. </div>
  393. </div>
  394. </li>
  395. <li class="tooltip">
  396. <div class="minutes event-free">
  397. <div class="event-desc">
  398. </div>
  399. </div>
  400. </li>
  401. <li class="tooltip">
  402. <div class="minutes event-free">
  403. <div class="event-desc">
  404. </div>
  405. </div>
  406. </li>
  407. <li class="tooltip">
  408. <div class="minutes event-free">
  409. <div class="event-desc">
  410. </div>
  411. </div>
  412. </li>
  413. <li class="tooltip">
  414. <div class="minutes event-free">
  415. <div class="event-desc">
  416. </div>
  417. </div>
  418. </li>
  419. <li class="tooltip">
  420. <div class="minutes event-free">
  421. <div class="event-desc">
  422. </div>
  423. </div>
  424. </li>
  425. <li class="tooltip">
  426. <div class="minutes event-free">
  427. <div class="event-desc">
  428. </div>
  429. </div>
  430. </li>
  431. <li class="tooltip">
  432. <div class="minutes event-free">
  433. <div class="event-desc">
  434. </div>
  435. </div>
  436. </li>
  437. <li class="tooltip">
  438. <div class="minutes event-free">
  439. <div class="event-desc">
  440. </div>
  441. </div>
  442. </li>
  443. <li class="tooltip">
  444. <div class="minutes event-free">
  445. <div class="event-desc">
  446. </div>
  447. </div>
  448. </li>
  449. <li class="tooltip">
  450. <div class="minutes event-free">
  451. <div class="event-desc">
  452. </div>
  453. </div>
  454. </li>
  455. <li class="tooltip">
  456. <div class="minutes event-free">
  457. <div class="event-desc">
  458. </div>
  459. </div>
  460. </li>
  461. </ul>
  462. <ul class="">
  463. <li id="room-li">
  464. <div class="room-name">ButchCassidy/5.4</div>
  465. </li>
  466. <li class="tooltip">
  467. <div class="minutes event-free">
  468. <div class="event-desc">
  469. </div>
  470. </div>
  471. </li>
  472. <li class="tooltip">
  473. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  474. <div class="minutes event-occupied-60">
  475. <div class="event-desc">
  476. </div>
  477. </div>
  478. </li>
  479. <li class="tooltip">
  480. <div class="minutes event-free">
  481. <div class="event-desc">
  482. </div>
  483. </div>
  484. </li>
  485. <li class="tooltip">
  486. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  487. <div class="minutes event-occupied-60">
  488. <div class="event-desc">
  489. </div>
  490. </div>
  491. </li>
  492. <li class="tooltip">
  493. <div class="minutes event-free">
  494. <div class="event-desc">
  495. </div>
  496. </div>
  497. </li>
  498. <li class="tooltip">
  499. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  500. <div class="minutes event-occupied-45">
  501. <div class="event-desc">
  502. </div>
  503. </div>
  504. </li>
  505. <li class="tooltip">
  506. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  507. <div class="minutes event-occupied-60">
  508. <div class="event-desc">
  509. </div>
  510. </div>
  511. </li>
  512. <li class="tooltip">
  513. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  514. <div class="minutes event-occupied-60">
  515. <div class="event-desc">
  516. </div>
  517. </div>
  518. </li>
  519. <li class="tooltip">
  520. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  521. <div class="minutes event-occupied-60">
  522. <div class="event-desc">
  523. </div>
  524. </div>
  525. </li>
  526. <li class="tooltip">
  527. <div class="minutes event-free">
  528. <div class="event-desc">
  529. </div>
  530. </div>
  531. </li>
  532. <li class="tooltip">
  533. <div class="minutes event-free">
  534. <div class="event-desc">
  535. </div>
  536. </div>
  537. </li>
  538. <li class="tooltip">
  539. <div class="minutes event-free">
  540. <div class="event-desc">
  541. </div>
  542. </div>
  543. </li>
  544. <li class="tooltip">
  545. <div class="minutes event-free">
  546. <div class="event-desc">
  547. </div>
  548. </div>
  549. </li>
  550. <li class="tooltip">
  551. <div class="minutes event-free">
  552. <div class="event-desc">
  553. </div>
  554. </div>
  555. </li>
  556. <li class="tooltip">
  557. <div class="minutes event-free">
  558. <div class="event-desc">
  559. </div>
  560. </div>
  561. </li>
  562. <li class="tooltip">
  563. <div class="minutes event-free">
  564. <div class="event-desc">
  565. </div>
  566. </div>
  567. </li>
  568. <li class="tooltip">
  569. <div class="minutes event-free">
  570. <div class="event-desc">
  571. </div>
  572. </div>
  573. </li>
  574. </ul>
  575. <ul class="">
  576. <li id="room-li">
  577. <div class="room-name">Godfather/5.5</div>
  578. </li>
  579. <li class="tooltip">
  580. <div class="minutes event-free">
  581. <div class="event-desc">
  582. </div>
  583. </div>
  584. </li>
  585. <li class="tooltip">
  586. <div class="minutes event-free">
  587. <div class="event-desc">
  588. </div>
  589. </div>
  590. </li>
  591. <li class="tooltip">
  592. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  593. <div class="minutes event-occupied-30">
  594. <div class="event-desc">
  595. </div>
  596. </div>
  597. </li>
  598. <li class="tooltip">
  599. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  600. <div class="minutes event-occupied-60">
  601. <div class="event-desc">
  602. </div>
  603. </div>
  604. </li>
  605. <li class="tooltip">
  606. <div class="minutes event-free">
  607. <div class="event-desc">
  608. </div>
  609. </div>
  610. </li>
  611. <li class="tooltip">
  612. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  613. <div class="minutes event-occupied-45">
  614. <div class="event-desc">
  615. </div>
  616. </div>
  617. </li>
  618. <li class="tooltip">
  619. <div class="minutes event-free">
  620. <div class="event-desc">
  621. </div>
  622. </div>
  623. </li>
  624. <li class="tooltip">
  625. <div class="minutes event-free">
  626. <div class="event-desc">
  627. </div>
  628. </div>
  629. </li>
  630. <li class="tooltip">
  631. <div class="minutes event-free">
  632. <div class="event-desc">
  633. </div>
  634. </div>
  635. </li>
  636. <li class="tooltip">
  637. <div class="minutes event-free">
  638. <div class="event-desc">
  639. </div>
  640. </div>
  641. </li>
  642. <li class="tooltip">
  643. <div class="minutes event-free">
  644. <div class="event-desc">
  645. </div>
  646. </div>
  647. </li>
  648. <li class="tooltip">
  649. <div class="minutes event-free">
  650. <div class="event-desc">
  651. </div>
  652. </div>
  653. </li>
  654. <li class="tooltip">
  655. <div class="minutes event-free">
  656. <div class="event-desc">
  657. </div>
  658. </div>
  659. </li>
  660. <li class="tooltip">
  661. <div class="minutes event-free">
  662. <div class="event-desc">
  663. </div>
  664. </div>
  665. </li>
  666. <li class="tooltip">
  667. <div class="minutes event-free">
  668. <div class="event-desc">
  669. </div>
  670. </div>
  671. </li>
  672. <li class="tooltip">
  673. <div class="minutes event-free">
  674. <div class="event-desc">
  675. </div>
  676. </div>
  677. </li>
  678. <li class="tooltip">
  679. <div class="minutes event-free">
  680. <div class="event-desc">
  681. </div>
  682. </div>
  683. </li>
  684. </ul>
  685. <ul class="">
  686. <li id="room-li">
  687. <div class="room-name">SevenSamurai/6.1</div>
  688. </li>
  689. <li class="tooltip">
  690. <div class="minutes event-free">
  691. <div class="event-desc">
  692. </div>
  693. </div>
  694. </li>
  695. <li class="tooltip">
  696. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  697. <div class="minutes event-occupied-60">
  698. <div class="event-desc">
  699. </div>
  700. </div>
  701. </li>
  702. <li class="tooltip">
  703. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  704. <div class="minutes event-occupied-30">
  705. <div class="event-desc">
  706. </div>
  707. </div>
  708. </li>
  709. <li class="tooltip">
  710. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  711. <div class="minutes event-occupied-60">
  712. <div class="event-desc">
  713. </div>
  714. </div>
  715. </li>
  716. <li class="tooltip">
  717. <div class="minutes event-free">
  718. <div class="event-desc">
  719. </div>
  720. </div>
  721. </li>
  722. <li class="tooltip">
  723. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  724. <div class="minutes event-occupied-45">
  725. <div class="event-desc">
  726. </div>
  727. </div>
  728. </li>
  729. <li class="tooltip">
  730. <div class="minutes event-free">
  731. <div class="event-desc">
  732. </div>
  733. </div>
  734. </li>
  735. <li class="tooltip">
  736. <div class="minutes event-free">
  737. <div class="event-desc">
  738. </div>
  739. </div>
  740. </li>
  741. <li class="tooltip">
  742. <div class="minutes event-free">
  743. <div class="event-desc">
  744. </div>
  745. </div>
  746. </li>
  747. <li class="tooltip">
  748. <div class="minutes event-free">
  749. <div class="event-desc">
  750. </div>
  751. </div>
  752. </li>
  753. <li class="tooltip">
  754. <div class="minutes event-free">
  755. <div class="event-desc">
  756. </div>
  757. </div>
  758. </li>
  759. <li class="tooltip">
  760. <div class="minutes event-free">
  761. <div class="event-desc">
  762. </div>
  763. </div>
  764. </li>
  765. <li class="tooltip">
  766. <div class="minutes event-free">
  767. <div class="event-desc">
  768. </div>
  769. </div>
  770. </li>
  771. <li class="tooltip">
  772. <div class="minutes event-free">
  773. <div class="event-desc">
  774. </div>
  775. </div>
  776. </li>
  777. <li class="tooltip">
  778. <div class="minutes event-free">
  779. <div class="event-desc">
  780. </div>
  781. </div>
  782. </li>
  783. <li class="tooltip">
  784. <div class="minutes event-free">
  785. <div class="event-desc">
  786. </div>
  787. </div>
  788. </li>
  789. <li class="tooltip">
  790. <div class="minutes event-free">
  791. <div class="event-desc">
  792. </div>
  793. </div>
  794. </li>
  795. </ul>
  796. <ul class="">
  797. <li id="room-li">
  798. <div class="room-name">ForrestGump/6.2</div>
  799. </li>
  800. <li class="tooltip">
  801. <div class="minutes event-free">
  802. <div class="event-desc">
  803. </div>
  804. </div>
  805. </li>
  806. <li class="tooltip">
  807. <div class="minutes event-free">
  808. <div class="event-desc">
  809. </div>
  810. </div>
  811. </li>
  812. <li class="tooltip">
  813. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  814. <div class="minutes event-occupied-30">
  815. <div class="event-desc">
  816. </div>
  817. </div>
  818. </li>
  819. <li class="tooltip">
  820. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  821. <div class="minutes event-occupied-60">
  822. <div class="event-desc">
  823. </div>
  824. </div>
  825. </li>
  826. <li class="tooltip">
  827. <div class="minutes event-free">
  828. <div class="event-desc">
  829. </div>
  830. </div>
  831. </li>
  832. <li class="tooltip">
  833. <div class="minutes event-free">
  834. <div class="event-desc">
  835. </div>
  836. </div>
  837. </li>
  838. <li class="tooltip">
  839. <div class="minutes event-free">
  840. <div class="event-desc">
  841. </div>
  842. </div>
  843. </li>
  844. <li class="tooltip">
  845. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  846. <div class="minutes event-event-occupied-60">
  847. <div class="event-desc">
  848. </div>
  849. </div>
  850. </li>
  851. <li class="tooltip">
  852. <div class="minutes event-free">
  853. <div class="event-desc">
  854. </div>
  855. </div>
  856. </li>
  857. <li class="tooltip">
  858. <div class="minutes event-free">
  859. <div class="event-desc">
  860. </div>
  861. </div>
  862. </li>
  863. <li class="tooltip">
  864. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  865. <div class="minutes event-occupied-15">
  866. <div class="event-desc">
  867. </div>
  868. </div>
  869. </li>
  870. <li class="tooltip">
  871. <div class="minutes event-free">
  872. <div class="event-desc">
  873. </div>
  874. </div>
  875. </li>
  876. <li class="tooltip">
  877. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  878. <div class="minutes event-occupied-60">
  879. <div class="event-desc">
  880. </div>
  881. </div>
  882. </li>
  883. <li class="tooltip">
  884. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  885. <div class="minutes event-occupied-60">
  886. <div class="event-desc">
  887. </div>
  888. </div>
  889. </li>
  890. <li class="tooltip">
  891. <div class="minutes event-free">
  892. <div class="event-desc">
  893. </div>
  894. </div>
  895. </li>
  896. <li class="tooltip">
  897. <div class="minutes event-free">
  898. <div class="event-desc">
  899. </div>
  900. </div>
  901. </li>
  902. <li class="tooltip">
  903. <div class="minutes event-free">
  904. <div class="event-desc">
  905. </div>
  906. </div>
  907. </li>
  908. </ul>
  909. <ul class="">
  910. <li id="room-li">
  911. <div class="room-name">TheDarkKnight/6.3</div>
  912. </li>
  913. <li class="tooltip">
  914. <div class="minutes event-free">
  915. <div class="event-desc">
  916. </div>
  917. </div>
  918. </li>
  919. <li class="tooltip">
  920. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  921. <div class="minutes event-occupied-60">
  922. <div class="event-desc">
  923. </div>
  924. </div>
  925. </li>
  926. <li class="tooltip">
  927. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  928. <div class="minutes event-occupied-30">
  929. <div class="event-desc">
  930. </div>
  931. </div>
  932. </li>
  933. <li class="tooltip">
  934. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  935. <div class="minutes event-occupied-60">
  936. <div class="event-desc">
  937. </div>
  938. </div>
  939. </li>
  940. <li class="tooltip">
  941. <div class="minutes event-free">
  942. <div class="event-desc">
  943. </div>
  944. </div>
  945. </li>
  946. <li class="tooltip">
  947. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  948. <div class="minutes event-occupied-45">
  949. <div class="event-desc">
  950. </div>
  951. </div>
  952. </li>
  953. <li class="tooltip">
  954. <div class="minutes event-free">
  955. <div class="event-desc">
  956. </div>
  957. </div>
  958. </li>
  959. <li class="tooltip">
  960. <div class="minutes event-free">
  961. <div class="event-desc">
  962. </div>
  963. </div>
  964. </li>
  965. <li class="tooltip">
  966. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  967. <div class="minutes event-occupied-60">
  968. <div class="event-desc">
  969. </div>
  970. </div>
  971. </li>
  972. <li class="tooltip">
  973. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  974. <div class="minutes event-occupied-60">
  975. <div class="event-desc">
  976. </div>
  977. </div>
  978. </li>
  979. <li class="tooltip">
  980. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  981. <div class="minutes event-occupied-60">
  982. <div class="event-desc">
  983. </div>
  984. </div>
  985. </li>
  986. <li class="tooltip">
  987. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  988. <div class="minutes event-occupied-60">
  989. <div class="event-desc">
  990. </div>
  991. </div>
  992. </li>
  993. <li class="tooltip">
  994. <div class="minutes event-occupied-60">
  995. <div class="event-desc">
  996. </div>
  997. </div>
  998. </li>
  999. <li class="tooltip">
  1000. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  1001. <div class="minutes event-occupied-60">
  1002. <div class="event-desc">
  1003. </div>
  1004. </div>
  1005. </li>
  1006. <li class="tooltip">
  1007. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  1008. <div class="minutes event-occupied-60">
  1009. <div class="event-desc">
  1010. </div>
  1011. </div>
  1012. </li>
  1013. <li class="tooltip">
  1014. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  1015. <div class="minutes event-occupied-60">
  1016. <div class="event-desc">
  1017. </div>
  1018. </div>
  1019. </li>
  1020. <li class="tooltip">
  1021. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  1022. <div class="minutes event-occupied-60">
  1023. <div class="event-desc">
  1024. </div>
  1025. </div>
  1026. </li>
  1027. </ul>
  1028. <ul class="">
  1029. <li id="room-li">
  1030. <div class="room-name">TheMatrix/6.4</div>
  1031. </li>
  1032. <li class="tooltip">
  1033. <div class="minutes event-free">
  1034. <div class="event-desc">
  1035. </div>
  1036. </div>
  1037. </li>
  1038. <li class="tooltip">
  1039. <div class="minutes event-free">
  1040. <div class="event-desc">
  1041. </div>
  1042. </div>
  1043. </li>
  1044. <li class="tooltip">
  1045. <div class="minutes event-free">
  1046. <div class="event-desc">
  1047. </div>
  1048. </div>
  1049. </li>
  1050. <li class="tooltip">
  1051. <div class="minutes event-free">
  1052. <div class="event-desc">
  1053. </div>
  1054. </div>
  1055. </li>
  1056. <li class="tooltip">
  1057. <div class="minutes event-free">
  1058. <div class="event-desc">
  1059. </div>
  1060. </div>
  1061. </li>
  1062. <li class="tooltip">
  1063. <div class="minutes event-free">
  1064. <div class="event-desc">
  1065. </div>
  1066. </div>
  1067. </li>
  1068. <li class="tooltip">
  1069. <div class="minutes event-free">
  1070. <div class="event-desc">
  1071. </div>
  1072. </div>
  1073. </li>
  1074. <li class="tooltip">
  1075. <div class="minutes event-free">
  1076. <div class="event-desc">
  1077. </div>
  1078. </div>
  1079. </li>
  1080. <li class="tooltip">
  1081. <div class="minutes event-free">
  1082. <div class="event-desc">
  1083. </div>
  1084. </div>
  1085. </li>
  1086. <li class="tooltip">
  1087. <div class="minutes event-free">
  1088. <div class="event-desc">
  1089. </div>
  1090. </div>
  1091. </li>
  1092. <li class="tooltip">
  1093. <div class="minutes event-free">
  1094. <div class="event-desc">
  1095. </div>
  1096. </div>
  1097. </li>
  1098. <li class="tooltip">
  1099. <div class="minutes event-free">
  1100. <div class="event-desc">
  1101. </div>
  1102. </div>
  1103. </li>
  1104. <li class="tooltip">
  1105. <div class="minutes event-free">
  1106. <div class="event-desc">
  1107. </div>
  1108. </div>
  1109. </li>
  1110. <li class="tooltip">
  1111. <div class="minutes event-free">
  1112. <div class="event-desc">
  1113. </div>
  1114. </div>
  1115. </li>
  1116. <li class="tooltip">
  1117. <div class="minutes event-free">
  1118. <div class="event-desc">
  1119. </div>
  1120. </div>
  1121. </li>
  1122. <li class="tooltip">
  1123. <div class="minutes event-free">
  1124. <div class="event-desc">
  1125. </div>
  1126. </div>
  1127. </li>
  1128. <li class="tooltip">
  1129. <div class="minutes event-free">
  1130. <div class="event-desc">
  1131. </div>
  1132. </div>
  1133. </li>
  1134. </ul>
  1135. <ul class="">
  1136. <li id="room-li">
  1137. <div class="room-name">Jaws/6.5</div>
  1138. </li>
  1139. <li class="tooltip">
  1140. <div class="minutes event-free">
  1141. <div class="event-desc">
  1142. </div>
  1143. </div>
  1144. </li>
  1145. <li class="tooltip">
  1146. <div class="minutes event-free">
  1147. <div class="event-desc">
  1148. </div>
  1149. </div>
  1150. </li>
  1151. <li class="tooltip">
  1152. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  1153. <div class="minutes event-occupied-60">
  1154. <div class="event-desc">
  1155. </div>
  1156. </div>
  1157. </li>
  1158. <li class="tooltip">
  1159. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  1160. <div class="minutes event-occupied-60">
  1161. <div class="event-desc">
  1162. </div>
  1163. </div>
  1164. </li>
  1165. <li class="tooltip">
  1166. <div class="minutes event-free">
  1167. <div class="event-desc">
  1168. </div>
  1169. </div>
  1170. </li>
  1171. <li class="tooltip">
  1172. <div class="minutes event-free">
  1173. <div class="event-desc">
  1174. </div>
  1175. </div>
  1176. </li>
  1177. <li class="tooltip">
  1178. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  1179. <div class="minutes event-occupied-45">
  1180. <div class="event-desc">
  1181. </div>
  1182. </div>
  1183. </li>
  1184. <li class="tooltip">
  1185. <div class="minutes event-free">
  1186. <div class="event-desc">
  1187. </div>
  1188. </div>
  1189. </li>
  1190. <li class="tooltip">
  1191. <span class="tooltiptext">The room is reserved. Click to see details.</span>
  1192. <div class="minutes event-occupied-15">
  1193. <div class="event-desc">
  1194. </div>
  1195. </div>
  1196. </li>
  1197. <li class="tooltip">
  1198. <div class="minutes event-free">
  1199. <div class="event-desc">
  1200. </div>
  1201. </div>
  1202. </li>
  1203. <li class="tooltip">
  1204. <div class="minutes event-free">
  1205. <div class="event-desc">
  1206. </div>
  1207. </div>
  1208. </li>
  1209. <li class="tooltip">
  1210. <div class="minutes event-free">
  1211. <div class="event-desc">
  1212. </div>
  1213. </div>
  1214. </li>
  1215. <li class="tooltip">
  1216. <div class="minutes event-free">
  1217. <div class="event-desc">
  1218. </div>
  1219. </div>
  1220. </li>
  1221. <li class="tooltip">
  1222. <div class="minutes event-free">
  1223. <div class="event-desc">
  1224. </div>
  1225. </div>
  1226. </li>
  1227. <li class="tooltip">
  1228. <div class="minutes event-free">
  1229. <div class="event-desc">
  1230. </div>
  1231. </div>
  1232. </li>
  1233. <li class="tooltip">
  1234. <div class="minutes event-free">
  1235. <div class="event-desc">
  1236. </div>
  1237. </div>
  1238. </li>
  1239. <li class="tooltip">
  1240. <div class="minutes event-free">
  1241. <div class="event-desc">
  1242. </div>
  1243. </div>
  1244. </li>
  1245. </ul>
  1246. </div>
  1247. </div> <!-- /.calendar -->
  1248. </div>
  1249.  
  1250.  
  1251. <script type="text/javascript">
  1252.  
  1253. // lets assume that from user we get 25 minutes
  1254. var userTime = 55;
  1255.  
  1256. if(userTime<15){
  1257. // select 15
  1258. var classname = "event-occupied-15";
  1259. }
  1260. else if(userTime>=15 && userTime<30){
  1261. // select 15 again
  1262. var classname = "event-occupied-15";
  1263.  
  1264. }else if(userTime>=30 && userTime<45){
  1265. //select 30
  1266. var classname = "event-occupied-30";
  1267.  
  1268. }else if(userTime>=45 && userTime<60){
  1269. //select 45
  1270. var classname = "event-occupied-45";
  1271.  
  1272. }else {
  1273. //select 60
  1274. var classname = "event-occupied-60";
  1275. }
  1276.  
  1277. var totalPercent = 100;
  1278. document.getElementsByClassName(classname)[0].style.width = "25%";
  1279.  
  1280. var event15 = document.getElementsByClassName(classname)[0].style.width;
  1281.  
  1282. var room_busy_percent = parseInt(event15, 10);
  1283. var room_free_percent = totalPercent-room_busy_percent;
  1284.  
  1285. document.getElementsByClassName("event-free-rest")[0].style.width = room_free_percent + '%';
  1286. </script>
  1287.  
  1288.  
  1289. </body>
  1290. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!