calendar.html 27 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Full Calendar - 宇威科技-唐佳云在线学习管理系统</title>
  6. <meta name="keywords" content="Bootstrap模版,Bootstrap模版下载,Bootstrap教程,Bootstrap中文" />
  7. <meta name="description" content="JS代码网提供Bootstrap模版,Bootstrap教程,Bootstrap中文翻译等相关Bootstrap插件下载" />
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  9. <!-- basic styles -->
  10. <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
  11. <link rel="stylesheet" href="assets/css/font-awesome.min.css" />
  12. <!--[if IE 7]>
  13. <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
  14. <![endif]-->
  15. <!-- page specific plugin styles -->
  16. <link rel="stylesheet" href="assets/css/fullcalendar.css" />
  17. <!-- fonts -->
  18. <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" />
  19. <!-- ace styles -->
  20. <link rel="stylesheet" href="assets/css/ace.min.css" />
  21. <link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
  22. <link rel="stylesheet" href="assets/css/ace-skins.min.css" />
  23. <!--[if lte IE 8]>
  24. <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
  25. <![endif]-->
  26. <!-- inline styles related to this page -->
  27. <!-- ace settings handler -->
  28. <script src="assets/js/ace-extra.min.js"></script>
  29. <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  30. <!--[if lt IE 9]>
  31. <script src="assets/js/html5shiv.js"></script>
  32. <script src="assets/js/respond.min.js"></script>
  33. <![endif]-->
  34. </head>
  35. <body>
  36. <div class="navbar navbar-default" id="navbar">
  37. <script type="text/javascript">
  38. try{ace.settings.check('navbar' , 'fixed')}catch(e){}
  39. </script>
  40. <div class="navbar-container" id="navbar-container">
  41. <div class="navbar-header pull-left">
  42. <a href="#" class="navbar-brand">
  43. <small>
  44. <i class="icon-leaf"></i>
  45. 唐佳云在线学习管理系统
  46. </small>
  47. </a><!-- /.brand -->
  48. </div><!-- /.navbar-header -->
  49. <div class="navbar-header pull-right" role="navigation">
  50. <ul class="nav ace-nav">
  51. <li class="grey">
  52. <a data-toggle="dropdown" class="dropdown-toggle" href="#">
  53. <i class="icon-tasks"></i>
  54. <span class="badge badge-grey">4</span>
  55. </a>
  56. <ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
  57. <li class="dropdown-header">
  58. <i class="icon-ok"></i>
  59. 4 Tasks to complete
  60. </li>
  61. <li>
  62. <a href="#">
  63. <div class="clearfix">
  64. <span class="pull-left">Software Update</span>
  65. <span class="pull-right">65%</span>
  66. </div>
  67. <div class="progress progress-mini ">
  68. <div style="width:65%" class="progress-bar "></div>
  69. </div>
  70. </a>
  71. </li>
  72. <li>
  73. <a href="#">
  74. <div class="clearfix">
  75. <span class="pull-left">Hardware Upgrade</span>
  76. <span class="pull-right">35%</span>
  77. </div>
  78. <div class="progress progress-mini ">
  79. <div style="width:35%" class="progress-bar progress-bar-danger"></div>
  80. </div>
  81. </a>
  82. </li>
  83. <li>
  84. <a href="#">
  85. <div class="clearfix">
  86. <span class="pull-left">Unit Testing</span>
  87. <span class="pull-right">15%</span>
  88. </div>
  89. <div class="progress progress-mini ">
  90. <div style="width:15%" class="progress-bar progress-bar-warning"></div>
  91. </div>
  92. </a>
  93. </li>
  94. <li>
  95. <a href="#">
  96. <div class="clearfix">
  97. <span class="pull-left">Bug Fixes</span>
  98. <span class="pull-right">90%</span>
  99. </div>
  100. <div class="progress progress-mini progress-striped active">
  101. <div style="width:90%" class="progress-bar progress-bar-success"></div>
  102. </div>
  103. </a>
  104. </li>
  105. <li>
  106. <a href="#">
  107. See tasks with details
  108. <i class="icon-arrow-right"></i>
  109. </a>
  110. </li>
  111. </ul>
  112. </li>
  113. <li class="purple">
  114. <a data-toggle="dropdown" class="dropdown-toggle" href="#">
  115. <i class="icon-bell-alt icon-animated-bell"></i>
  116. <span class="badge badge-important">8</span>
  117. </a>
  118. <ul class="pull-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close">
  119. <li class="dropdown-header">
  120. <i class="icon-warning-sign"></i>
  121. 8 Notifications
  122. </li>
  123. <li>
  124. <a href="#">
  125. <div class="clearfix">
  126. <span class="pull-left">
  127. <i class="btn btn-xs no-hover btn-pink icon-comment"></i>
  128. New Comments
  129. </span>
  130. <span class="pull-right badge badge-info">+12</span>
  131. </div>
  132. </a>
  133. </li>
  134. <li>
  135. <a href="#">
  136. <i class="btn btn-xs btn-primary icon-user"></i>
  137. Bob just signed up as an editor ...
  138. </a>
  139. </li>
  140. <li>
  141. <a href="#">
  142. <div class="clearfix">
  143. <span class="pull-left">
  144. <i class="btn btn-xs no-hover btn-success icon-shopping-cart"></i>
  145. New Orders
  146. </span>
  147. <span class="pull-right badge badge-success">+8</span>
  148. </div>
  149. </a>
  150. </li>
  151. <li>
  152. <a href="#">
  153. <div class="clearfix">
  154. <span class="pull-left">
  155. <i class="btn btn-xs no-hover btn-info icon-twitter"></i>
  156. Followers
  157. </span>
  158. <span class="pull-right badge badge-info">+11</span>
  159. </div>
  160. </a>
  161. </li>
  162. <li>
  163. <a href="#">
  164. See all notifications
  165. <i class="icon-arrow-right"></i>
  166. </a>
  167. </li>
  168. </ul>
  169. </li>
  170. <li class="green">
  171. <a data-toggle="dropdown" class="dropdown-toggle" href="#">
  172. <i class="icon-envelope icon-animated-vertical"></i>
  173. <span class="badge badge-success">5</span>
  174. </a>
  175. <ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
  176. <li class="dropdown-header">
  177. <i class="icon-envelope-alt"></i>
  178. 5 Messages
  179. </li>
  180. <li>
  181. <a href="#">
  182. <img src="assets/avatars/avatar.png" class="msg-photo" alt="Alex's Avatar" />
  183. <span class="msg-body">
  184. <span class="msg-title">
  185. <span class="blue">Alex:</span>
  186. Ciao sociis natoque penatibus et auctor ...
  187. </span>
  188. <span class="msg-time">
  189. <i class="icon-time"></i>
  190. <span>a moment ago</span>
  191. </span>
  192. </span>
  193. </a>
  194. </li>
  195. <li>
  196. <a href="#">
  197. <img src="assets/avatars/avatar3.png" class="msg-photo" alt="Susan's Avatar" />
  198. <span class="msg-body">
  199. <span class="msg-title">
  200. <span class="blue">Susan:</span>
  201. Vestibulum id ligula porta felis euismod ...
  202. </span>
  203. <span class="msg-time">
  204. <i class="icon-time"></i>
  205. <span>20 minutes ago</span>
  206. </span>
  207. </span>
  208. </a>
  209. </li>
  210. <li>
  211. <a href="#">
  212. <img src="assets/avatars/avatar4.png" class="msg-photo" alt="Bob's Avatar" />
  213. <span class="msg-body">
  214. <span class="msg-title">
  215. <span class="blue">Bob:</span>
  216. Nullam quis risus eget urna mollis ornare ...
  217. </span>
  218. <span class="msg-time">
  219. <i class="icon-time"></i>
  220. <span>3:15 pm</span>
  221. </span>
  222. </span>
  223. </a>
  224. </li>
  225. <li>
  226. <a href="inbox.html">
  227. See all messages
  228. <i class="icon-arrow-right"></i>
  229. </a>
  230. </li>
  231. </ul>
  232. </li>
  233. <li class="light-blue">
  234. <a data-toggle="dropdown" href="#" class="dropdown-toggle">
  235. <img class="nav-user-photo" src="assets/avatars/user.jpg" alt="Jason's Photo" />
  236. <span class="user-info">
  237. <small>Welcome,</small>
  238. Jason
  239. </span>
  240. <i class="icon-caret-down"></i>
  241. </a>
  242. <ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
  243. <li>
  244. <a href="#">
  245. <i class="icon-cog"></i>
  246. Settings
  247. </a>
  248. </li>
  249. <li>
  250. <a href="#">
  251. <i class="icon-user"></i>
  252. Profile
  253. </a>
  254. </li>
  255. <li class="divider"></li>
  256. <li>
  257. <a href="#">
  258. <i class="icon-off"></i>
  259. Logout
  260. </a>
  261. </li>
  262. </ul>
  263. </li>
  264. </ul><!-- /.ace-nav -->
  265. </div><!-- /.navbar-header -->
  266. </div><!-- /.container -->
  267. </div>
  268. <div class="main-container" id="main-container">
  269. <script type="text/javascript">
  270. try{ace.settings.check('main-container' , 'fixed')}catch(e){}
  271. </script>
  272. <div class="main-container-inner">
  273. <a class="menu-toggler" id="menu-toggler" href="#">
  274. <span class="menu-text"></span>
  275. </a>
  276. <div class="sidebar" id="sidebar">
  277. <script type="text/javascript">
  278. try{ace.settings.check('sidebar' , 'fixed')}catch(e){}
  279. </script>
  280. <div class="sidebar-shortcuts" id="sidebar-shortcuts">
  281. <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
  282. <button class="btn btn-success">
  283. <i class="icon-signal"></i>
  284. </button>
  285. <button class="btn btn-info">
  286. <i class="icon-pencil"></i>
  287. </button>
  288. <button class="btn btn-warning">
  289. <i class="icon-group"></i>
  290. </button>
  291. <button class="btn btn-danger">
  292. <i class="icon-cogs"></i>
  293. </button>
  294. </div>
  295. <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
  296. <span class="btn btn-success"></span>
  297. <span class="btn btn-info"></span>
  298. <span class="btn btn-warning"></span>
  299. <span class="btn btn-danger"></span>
  300. </div>
  301. </div><!-- #sidebar-shortcuts -->
  302. <ul class="nav nav-list">
  303. <li class="active">
  304. <a href="index.html">
  305. <i class="icon-dashboard"></i>
  306. <span class="menu-text"> 控制台 </span>
  307. </a>
  308. </li>
  309. <li>
  310. <a href="typography.html">
  311. <i class="icon-text-width"></i>
  312. <span class="menu-text"> 文字排版 </span>
  313. </a>
  314. </li>
  315. <li>
  316. <a href="#" class="dropdown-toggle">
  317. <i class="icon-desktop"></i>
  318. <span class="menu-text"> UI 组件 </span>
  319. <b class="arrow icon-angle-down"></b>
  320. </a>
  321. <ul class="submenu">
  322. <li>
  323. <a href="elements.html">
  324. <i class="icon-double-angle-right"></i>
  325. 组件
  326. </a>
  327. </li>
  328. <li>
  329. <a href="buttons.html">
  330. <i class="icon-double-angle-right"></i>
  331. 按钮 &amp; 图表
  332. </a>
  333. </li>
  334. <li>
  335. <a href="treeview.html">
  336. <i class="icon-double-angle-right"></i>
  337. 树菜单
  338. </a>
  339. </li>
  340. <li>
  341. <a href="jquery-ui.html">
  342. <i class="icon-double-angle-right"></i>
  343. jQuery UI
  344. </a>
  345. </li>
  346. <li>
  347. <a href="nestable-list.html">
  348. <i class="icon-double-angle-right"></i>
  349. 可拖拽列表
  350. </a>
  351. </li>
  352. <li>
  353. <a href="#" class="dropdown-toggle">
  354. <i class="icon-double-angle-right"></i>
  355. 三级菜单
  356. <b class="arrow icon-angle-down"></b>
  357. </a>
  358. <ul class="submenu">
  359. <li>
  360. <a href="#">
  361. <i class="icon-leaf"></i>
  362. 第一级
  363. </a>
  364. </li>
  365. <li>
  366. <a href="#" class="dropdown-toggle">
  367. <i class="icon-pencil"></i>
  368. 第四级
  369. <b class="arrow icon-angle-down"></b>
  370. </a>
  371. <ul class="submenu">
  372. <li>
  373. <a href="#">
  374. <i class="icon-plus"></i>
  375. 添加产品
  376. </a>
  377. </li>
  378. <li>
  379. <a href="#">
  380. <i class="icon-eye-open"></i>
  381. 查看商品
  382. </a>
  383. </li>
  384. </ul>
  385. </li>
  386. </ul>
  387. </li>
  388. </ul>
  389. </li>
  390. <li>
  391. <a href="#" class="dropdown-toggle">
  392. <i class="icon-list"></i>
  393. <span class="menu-text"> 表格 </span>
  394. <b class="arrow icon-angle-down"></b>
  395. </a>
  396. <ul class="submenu">
  397. <li>
  398. <a href="tables.html">
  399. <i class="icon-double-angle-right"></i>
  400. 简单 &amp; 动态
  401. </a>
  402. </li>
  403. <li>
  404. <a href="jqgrid.html">
  405. <i class="icon-double-angle-right"></i>
  406. jqGrid plugin
  407. </a>
  408. </li>
  409. </ul>
  410. </li>
  411. <li>
  412. <a href="#" class="dropdown-toggle">
  413. <i class="icon-edit"></i>
  414. <span class="menu-text"> 表单 </span>
  415. <b class="arrow icon-angle-down"></b>
  416. </a>
  417. <ul class="submenu">
  418. <li>
  419. <a href="form-elements.html">
  420. <i class="icon-double-angle-right"></i>
  421. 表单组件
  422. </a>
  423. </li>
  424. <li>
  425. <a href="form-wizard.html">
  426. <i class="icon-double-angle-right"></i>
  427. 向导提示 &amp; 验证
  428. </a>
  429. </li>
  430. <li>
  431. <a href="wysiwyg.html">
  432. <i class="icon-double-angle-right"></i>
  433. 编辑器
  434. </a>
  435. </li>
  436. <li>
  437. <a href="dropzone.html">
  438. <i class="icon-double-angle-right"></i>
  439. 文件上传
  440. </a>
  441. </li>
  442. </ul>
  443. </li>
  444. <li>
  445. <a href="widgets.html">
  446. <i class="icon-list-alt"></i>
  447. <span class="menu-text"> 插件 </span>
  448. </a>
  449. </li>
  450. <li class="active">
  451. <a href="calendar.html">
  452. <i class="icon-calendar"></i>
  453. <span class="menu-text">
  454. 日历
  455. <span class="badge badge-transparent tooltip-error" title="2&nbsp;Important&nbsp;Events">
  456. <i class="icon-warning-sign red bigger-130"></i>
  457. </span>
  458. </span>
  459. </a>
  460. </li>
  461. <li>
  462. <a href="gallery.html">
  463. <i class="icon-picture"></i>
  464. <span class="menu-text"> 相册 </span>
  465. </a>
  466. </li>
  467. <li>
  468. <a href="#" class="dropdown-toggle">
  469. <i class="icon-tag"></i>
  470. <span class="menu-text"> 更多页面 </span>
  471. <b class="arrow icon-angle-down"></b>
  472. </a>
  473. <ul class="submenu">
  474. <li>
  475. <a href="profile.html">
  476. <i class="icon-double-angle-right"></i>
  477. 用户信息
  478. </a>
  479. </li>
  480. <li>
  481. <a href="inbox.html">
  482. <i class="icon-double-angle-right"></i>
  483. 收件箱
  484. </a>
  485. </li>
  486. <li>
  487. <a href="pricing.html">
  488. <i class="icon-double-angle-right"></i>
  489. 售价单
  490. </a>
  491. </li>
  492. <li>
  493. <a href="invoice.html">
  494. <i class="icon-double-angle-right"></i>
  495. 购物车
  496. </a>
  497. </li>
  498. <li>
  499. <a href="timeline.html">
  500. <i class="icon-double-angle-right"></i>
  501. 时间轴
  502. </a>
  503. </li>
  504. <li>
  505. <a href="login.html">
  506. <i class="icon-double-angle-right"></i>
  507. 登录 &amp; 注册
  508. </a>
  509. </li>
  510. </ul>
  511. </li>
  512. <li>
  513. <a href="#" class="dropdown-toggle">
  514. <i class="icon-file-alt"></i>
  515. <span class="menu-text">
  516. 其他页面
  517. <span class="badge badge-primary ">5</span>
  518. </span>
  519. <b class="arrow icon-angle-down"></b>
  520. </a>
  521. <ul class="submenu">
  522. <li>
  523. <a href="faq.html">
  524. <i class="icon-double-angle-right"></i>
  525. 帮助
  526. </a>
  527. </li>
  528. <li>
  529. <a href="error-404.html">
  530. <i class="icon-double-angle-right"></i>
  531. 404错误页面
  532. </a>
  533. </li>
  534. <li>
  535. <a href="error-500.html">
  536. <i class="icon-double-angle-right"></i>
  537. 500错误页面
  538. </a>
  539. </li>
  540. <li>
  541. <a href="grid.html">
  542. <i class="icon-double-angle-right"></i>
  543. 网格
  544. </a>
  545. </li>
  546. <li>
  547. <a href="blank.html">
  548. <i class="icon-double-angle-right"></i>
  549. 空白页面
  550. </a>
  551. </li>
  552. </ul>
  553. </li>
  554. </ul><!-- /.nav-list -->
  555. <div class="sidebar-collapse" id="sidebar-collapse">
  556. <i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i>
  557. </div>
  558. <script type="text/javascript">
  559. try{ace.settings.check('sidebar' , 'collapsed')}catch(e){}
  560. </script>
  561. </div>
  562. <div class="main-content">
  563. <div class="breadcrumbs" id="breadcrumbs">
  564. <script type="text/javascript">
  565. try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
  566. </script>
  567. <ul class="breadcrumb">
  568. <li>
  569. <i class="icon-home home-icon"></i>
  570. <a href="#">Home</a>
  571. </li>
  572. <li class="active">Calendar</li>
  573. </ul><!-- .breadcrumb -->
  574. <div class="nav-search" id="nav-search">
  575. <form class="form-search">
  576. <span class="input-icon">
  577. <input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
  578. <i class="icon-search nav-search-icon"></i>
  579. </span>
  580. </form>
  581. </div><!-- #nav-search -->
  582. </div>
  583. <div class="page-content">
  584. <div class="page-header">
  585. <h1>
  586. Full Calendar
  587. <small>
  588. <i class="icon-double-angle-right"></i>
  589. with draggable and editable events
  590. </small>
  591. </h1>
  592. </div><!-- /.page-header -->
  593. <div class="row">
  594. <div class="col-xs-12">
  595. <!-- PAGE CONTENT BEGINS -->
  596. <div class="row">
  597. <div class="col-sm-9">
  598. <div class="space"></div>
  599. <div id="calendar"></div>
  600. </div>
  601. <div class="col-sm-3">
  602. <div class="widget-box transparent">
  603. <div class="widget-header">
  604. <h4>Draggable events</h4>
  605. </div>
  606. <div class="widget-body">
  607. <div class="widget-main no-padding">
  608. <div id="external-events">
  609. <div class="external-event label-grey" data-class="label-grey">
  610. <i class="icon-move"></i>
  611. My Event 1
  612. </div>
  613. <div class="external-event label-success" data-class="label-success">
  614. <i class="icon-move"></i>
  615. My Event 2
  616. </div>
  617. <div class="external-event label-danger" data-class="label-danger">
  618. <i class="icon-move"></i>
  619. My Event 3
  620. </div>
  621. <div class="external-event label-purple" data-class="label-purple">
  622. <i class="icon-move"></i>
  623. My Event 4
  624. </div>
  625. <div class="external-event label-yellow" data-class="label-yellow">
  626. <i class="icon-move"></i>
  627. My Event 5
  628. </div>
  629. <div class="external-event label-pink" data-class="label-pink">
  630. <i class="icon-move"></i>
  631. My Event 6
  632. </div>
  633. <div class="external-event label-info" data-class="label-info">
  634. <i class="icon-move"></i>
  635. My Event 7
  636. </div>
  637. <label>
  638. <input type="checkbox" class="ace ace-checkbox" id="drop-remove" />
  639. <span class="lbl"> Remove after drop</span>
  640. </label>
  641. </div>
  642. </div>
  643. </div>
  644. </div>
  645. </div>
  646. </div>
  647. <!-- PAGE CONTENT ENDS -->
  648. </div><!-- /.col -->
  649. </div><!-- /.row -->
  650. </div><!-- /.page-content -->
  651. </div><!-- /.main-content -->
  652. <div class="ace-settings-container" id="ace-settings-container">
  653. <div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
  654. <i class="icon-cog bigger-150"></i>
  655. </div>
  656. <div class="ace-settings-box" id="ace-settings-box">
  657. <div>
  658. <div class="pull-left">
  659. <select id="skin-colorpicker" class="hide">
  660. <option data-skin="default" value="#438EB9">#438EB9</option>
  661. <option data-skin="skin-1" value="#222A2D">#222A2D</option>
  662. <option data-skin="skin-2" value="#C6487E">#C6487E</option>
  663. <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
  664. </select>
  665. </div>
  666. <span>&nbsp; Choose Skin</span>
  667. </div>
  668. <div>
  669. <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar" />
  670. <label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
  671. </div>
  672. <div>
  673. <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar" />
  674. <label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
  675. </div>
  676. <div>
  677. <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs" />
  678. <label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
  679. </div>
  680. <div>
  681. <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" />
  682. <label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
  683. </div>
  684. <div>
  685. <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container" />
  686. <label class="lbl" for="ace-settings-add-container">
  687. Inside
  688. <b>.container</b>
  689. </label>
  690. </div>
  691. </div>
  692. </div><!-- /#ace-settings-container -->
  693. </div><!-- /.main-container-inner -->
  694. <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
  695. <i class="icon-double-angle-up icon-only bigger-110"></i>
  696. </a>
  697. </div><!-- /.main-container -->
  698. <!-- basic scripts -->
  699. <!--[if !IE]> -->
  700. <script src="assets/js/jquery-2.0.3.min.js"></script>
  701. <!-- <![endif]-->
  702. <!--[if IE]>
  703. <script src="assets/js/jquery-1.10.2.min.js"></script>
  704. <![endif]-->
  705. <!--[if !IE]> -->
  706. <script type="text/javascript">
  707. window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
  708. </script>
  709. <!-- <![endif]-->
  710. <!--[if IE]>
  711. <script type="text/javascript">
  712. window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
  713. </script>
  714. <![endif]-->
  715. <script type="text/javascript">
  716. if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
  717. </script>
  718. <script src="assets/js/bootstrap.min.js"></script>
  719. <script src="assets/js/typeahead-bs2.min.js"></script>
  720. <!-- page specific plugin scripts -->
  721. <script src="assets/js/jquery-ui-1.10.3.custom.min.js"></script>
  722. <script src="assets/js/jquery.ui.touch-punch.min.js"></script>
  723. <script src="assets/js/fullcalendar.min.js"></script>
  724. <script src="assets/js/bootbox.min.js"></script>
  725. <!-- ace scripts -->
  726. <script src="assets/js/ace-elements.min.js"></script>
  727. <script src="assets/js/ace.min.js"></script>
  728. <!-- inline scripts related to this page -->
  729. <script type="text/javascript">
  730. jQuery(function($) {
  731. /* initialize the external events
  732. -----------------------------------------------------------------*/
  733. $('#external-events div.external-event').each(function() {
  734. // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
  735. // it doesn't need to have a start or end
  736. var eventObject = {
  737. title: $.trim($(this).text()) // use the element's text as the event title
  738. };
  739. // store the Event Object in the DOM element so we can get to it later
  740. $(this).data('eventObject', eventObject);
  741. // make the event draggable using jQuery UI
  742. $(this).draggable({
  743. zIndex: 999,
  744. revert: true, // will cause the event to go back to its
  745. revertDuration: 0 // original position after the drag
  746. });
  747. });
  748. /* initialize the calendar
  749. -----------------------------------------------------------------*/
  750. var date = new Date();
  751. var d = date.getDate();
  752. var m = date.getMonth();
  753. var y = date.getFullYear();
  754. var calendar = $('#calendar').fullCalendar({
  755. buttonText: {
  756. prev: '<i class="icon-chevron-left"></i>',
  757. next: '<i class="icon-chevron-right"></i>'
  758. },
  759. header: {
  760. left: 'prev,next today',
  761. center: 'title',
  762. right: 'month,agendaWeek,agendaDay'
  763. },
  764. events: [
  765. {
  766. title: 'All Day Event',
  767. start: new Date(y, m, 1),
  768. className: 'label-important'
  769. },
  770. {
  771. title: 'Long Event',
  772. start: new Date(y, m, d-5),
  773. end: new Date(y, m, d-2),
  774. className: 'label-success'
  775. },
  776. {
  777. title: 'Some Event',
  778. start: new Date(y, m, d-3, 16, 0),
  779. allDay: false
  780. }]
  781. ,
  782. editable: true,
  783. droppable: true, // this allows things to be dropped onto the calendar !!!
  784. drop: function(date, allDay) { // this function is called when something is dropped
  785. // retrieve the dropped element's stored Event Object
  786. var originalEventObject = $(this).data('eventObject');
  787. var $extraEventClass = $(this).attr('data-class');
  788. // we need to copy it, so that multiple events don't have a reference to the same object
  789. var copiedEventObject = $.extend({}, originalEventObject);
  790. // assign it the date that was reported
  791. copiedEventObject.start = date;
  792. copiedEventObject.allDay = allDay;
  793. if($extraEventClass) copiedEventObject['className'] = [$extraEventClass];
  794. // render the event on the calendar
  795. // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
  796. $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
  797. // is the "remove after drop" checkbox checked?
  798. if ($('#drop-remove').is(':checked')) {
  799. // if so, remove the element from the "Draggable Events" list
  800. $(this).remove();
  801. }
  802. }
  803. ,
  804. selectable: true,
  805. selectHelper: true,
  806. select: function(start, end, allDay) {
  807. bootbox.prompt("New Event Title:", function(title) {
  808. if (title !== null) {
  809. calendar.fullCalendar('renderEvent',
  810. {
  811. title: title,
  812. start: start,
  813. end: end,
  814. allDay: allDay
  815. },
  816. true // make the event "stick"
  817. );
  818. }
  819. });
  820. calendar.fullCalendar('unselect');
  821. }
  822. ,
  823. eventClick: function(calEvent, jsEvent, view) {
  824. var form = $("<form class='form-inline'><label>Change event name &nbsp;</label></form>");
  825. form.append("<input class='middle' autocomplete=off type=text value='" + calEvent.title + "' /> ");
  826. form.append("<button type='submit' class='btn btn-sm btn-success'><i class='icon-ok'></i> Save</button>");
  827. var div = bootbox.dialog({
  828. message: form,
  829. buttons: {
  830. "delete" : {
  831. "label" : "<i class='icon-trash'></i> Delete Event",
  832. "className" : "btn-sm btn-danger",
  833. "callback": function() {
  834. calendar.fullCalendar('removeEvents' , function(ev){
  835. return (ev._id == calEvent._id);
  836. })
  837. }
  838. } ,
  839. "close" : {
  840. "label" : "<i class='icon-remove'></i> Close",
  841. "className" : "btn-sm"
  842. }
  843. }
  844. });
  845. form.on('submit', function(){
  846. calEvent.title = form.find("input[type=text]").val();
  847. calendar.fullCalendar('updateEvent', calEvent);
  848. div.modal("hide");
  849. return false;
  850. });
  851. //console.log(calEvent.id);
  852. //console.log(jsEvent);
  853. //console.log(view);
  854. // change the border color just for fun
  855. //$(this).css('border-color', 'red');
  856. }
  857. });
  858. })
  859. </script>
  860. </body>
  861. </html>