calendar.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>Amaze UI Admin index Examples</title>
  7. <meta name="description" content="这是一个 index 页面">
  8. <meta name="keywords" content="index">
  9. <meta name="viewport" content="width=device-width, initial-scale=1">
  10. <meta name="renderer" content="webkit">
  11. <meta http-equiv="Cache-Control" content="no-siteapp" />
  12. <link rel="icon" type="image/png" href="../i/favicon.png">
  13. <link rel="apple-touch-icon-precomposed" href="../i/app-icon72x72@2x.png">
  14. <meta name="apple-mobile-web-app-title" content="Amaze UI" />
  15. <link rel="stylesheet" href="../css/amazeui.min.css" />
  16. <link rel="stylesheet" href="../css/fullcalendar.min.css" />
  17. <link rel="stylesheet" href="../css/fullcalendar.print.css" media='print' />
  18. <link rel="stylesheet" href="../css/app.css">
  19. <script src="../js/jquery.min.js"></script>
  20. </head>
  21. <body data-type="widgets">
  22. <script src="../js/theme.js"></script>
  23. <div class="am-g tpl-g">
  24. <!-- 头部 -->
  25. <header>
  26. <!-- logo -->
  27. <div class="am-fl tpl-header-logo">
  28. <a href="javascript:;"><img src="../img/logo.png" alt=""></a>
  29. </div>
  30. <!-- 右侧内容 -->
  31. <div class="tpl-header-fluid">
  32. <!-- 侧边切换 -->
  33. <div class="am-fl tpl-header-switch-button am-icon-list">
  34. <span>
  35. </span>
  36. </div>
  37. <!-- 搜索 -->
  38. <div class="am-fl tpl-header-search">
  39. <form class="tpl-header-search-form" action="javascript:;">
  40. <button class="tpl-header-search-btn am-icon-search"></button>
  41. <input class="tpl-header-search-box" type="text" placeholder="搜索内容...">
  42. </form>
  43. </div>
  44. <!-- 其它功能-->
  45. <div class="am-fr tpl-header-navbar">
  46. <ul>
  47. <!-- 欢迎语 -->
  48. <li class="am-text-sm tpl-header-navbar-welcome">
  49. <a href="javascript:;">欢迎你, <span>Amaze UI</span> </a>
  50. </li>
  51. <!-- 新邮件 -->
  52. <li class="am-dropdown tpl-dropdown" data-am-dropdown>
  53. <a href="javascript:;" class="am-dropdown-toggle tpl-dropdown-toggle" data-am-dropdown-toggle>
  54. <i class="am-icon-envelope"></i>
  55. <span class="am-badge am-badge-success am-round item-feed-badge">4</span>
  56. </a>
  57. <!-- 弹出列表 -->
  58. <ul class="am-dropdown-content tpl-dropdown-content">
  59. <li class="tpl-dropdown-menu-messages">
  60. <a href="javascript:;" class="tpl-dropdown-menu-messages-item am-cf">
  61. <div class="menu-messages-ico">
  62. <img src="../img/user04.png" alt="">
  63. </div>
  64. <div class="menu-messages-time">
  65. 3小时前
  66. </div>
  67. <div class="menu-messages-content">
  68. <div class="menu-messages-content-title">
  69. <i class="am-icon-circle-o am-text-success"></i>
  70. <span>夕风色</span>
  71. </div>
  72. <div class="am-text-truncate"> Amaze UI 的诞生,依托于 GitHub 及其他技术社区上一些优秀的资源;Amaze UI 的成长,则离不开用户的支持。 </div>
  73. <div class="menu-messages-content-time">2016-09-21 下午 16:40</div>
  74. </div>
  75. </a>
  76. </li>
  77. <li class="tpl-dropdown-menu-messages">
  78. <a href="javascript:;" class="tpl-dropdown-menu-messages-item am-cf">
  79. <div class="menu-messages-ico">
  80. <img src="../img/user02.png" alt="">
  81. </div>
  82. <div class="menu-messages-time">
  83. 5天前
  84. </div>
  85. <div class="menu-messages-content">
  86. <div class="menu-messages-content-title">
  87. <i class="am-icon-circle-o am-text-warning"></i>
  88. <span>禁言小张</span>
  89. </div>
  90. <div class="am-text-truncate"> 为了能最准确的传达所描述的问题, 建议你在反馈时附上演示,方便我们理解。 </div>
  91. <div class="menu-messages-content-time">2016-09-16 上午 09:23</div>
  92. </div>
  93. </a>
  94. </li>
  95. <li class="tpl-dropdown-menu-messages">
  96. <a href="javascript:;" class="tpl-dropdown-menu-messages-item am-cf">
  97. <i class="am-icon-circle-o"></i> 进入列表…
  98. </a>
  99. </li>
  100. </ul>
  101. </li>
  102. <!-- 新提示 -->
  103. <li class="am-dropdown" data-am-dropdown>
  104. <a href="javascript:;" class="am-dropdown-toggle" data-am-dropdown-toggle>
  105. <i class="am-icon-bell"></i>
  106. <span class="am-badge am-badge-warning am-round item-feed-badge">5</span>
  107. </a>
  108. <!-- 弹出列表 -->
  109. <ul class="am-dropdown-content tpl-dropdown-content">
  110. <li class="tpl-dropdown-menu-notifications">
  111. <a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf">
  112. <div class="tpl-dropdown-menu-notifications-title">
  113. <i class="am-icon-line-chart"></i>
  114. <span> 有6笔新的销售订单</span>
  115. </div>
  116. <div class="tpl-dropdown-menu-notifications-time">
  117. 12分钟前
  118. </div>
  119. </a>
  120. </li>
  121. <li class="tpl-dropdown-menu-notifications">
  122. <a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf">
  123. <div class="tpl-dropdown-menu-notifications-title">
  124. <i class="am-icon-star"></i>
  125. <span> 有3个来自人事部的消息</span>
  126. </div>
  127. <div class="tpl-dropdown-menu-notifications-time">
  128. 30分钟前
  129. </div>
  130. </a>
  131. </li>
  132. <li class="tpl-dropdown-menu-notifications">
  133. <a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf">
  134. <div class="tpl-dropdown-menu-notifications-title">
  135. <i class="am-icon-folder-o"></i>
  136. <span> 上午开会记录存档</span>
  137. </div>
  138. <div class="tpl-dropdown-menu-notifications-time">
  139. 1天前
  140. </div>
  141. </a>
  142. </li>
  143. <li class="tpl-dropdown-menu-notifications">
  144. <a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf">
  145. <i class="am-icon-bell"></i> 进入列表…
  146. </a>
  147. </li>
  148. </ul>
  149. </li>
  150. <!-- 退出 -->
  151. <li class="am-text-sm">
  152. <a href="javascript:;">
  153. <span class="am-icon-sign-out"></span> 退出
  154. </a>
  155. </li>
  156. </ul>
  157. </div>
  158. </div>
  159. </header>
  160. <!-- 风格切换 -->
  161. <div class="tpl-skiner">
  162. <div class="tpl-skiner-toggle am-icon-cog">
  163. </div>
  164. <div class="tpl-skiner-content">
  165. <div class="tpl-skiner-content-title">
  166. 选择主题
  167. </div>
  168. <div class="tpl-skiner-content-bar">
  169. <span class="skiner-color skiner-white" data-color="theme-white"></span>
  170. <span class="skiner-color skiner-black" data-color="theme-black"></span>
  171. </div>
  172. </div>
  173. </div>
  174. <!-- 侧边导航栏 -->
  175. <div class="left-sidebar">
  176. <!-- 用户信息 -->
  177. <div class="tpl-sidebar-user-panel">
  178. <div class="tpl-user-panel-slide-toggleable">
  179. <div class="tpl-user-panel-profile-picture">
  180. <img src="../img/user04.png" alt="">
  181. </div>
  182. <span class="user-panel-logged-in-text">
  183. <i class="am-icon-circle-o am-text-success tpl-user-panel-status-icon"></i>
  184. 禁言小张
  185. </span>
  186. <a href="javascript:;" class="tpl-user-panel-action-link"> <span class="am-icon-pencil"></span> 账号设置</a>
  187. </div>
  188. </div>
  189. <!-- 菜单 -->
  190. <ul class="sidebar-nav">
  191. <li class="sidebar-nav-heading">Components <span class="sidebar-nav-heading-info"> 附加组件</span></li>
  192. <li class="sidebar-nav-link">
  193. <a href="/">
  194. <i class="am-icon-home sidebar-nav-link-logo"></i> 首页
  195. </a>
  196. </li>
  197. <li class="sidebar-nav-link">
  198. <a href="../html/tables.html">
  199. <i class="am-icon-table sidebar-nav-link-logo"></i> 表格
  200. </a>
  201. </li>
  202. <li class="sidebar-nav-link">
  203. <a href="../html/calendar.html" class="active">
  204. <i class="am-icon-calendar sidebar-nav-link-logo"></i> 日历
  205. </a>
  206. </li>
  207. <li class="sidebar-nav-link">
  208. <a href="../html/form.html">
  209. <i class="am-icon-wpforms sidebar-nav-link-logo"></i> 表单
  210. </a>
  211. </li>
  212. <li class="sidebar-nav-link">
  213. <a href="../html/chart.html">
  214. <i class="am-icon-bar-chart sidebar-nav-link-logo"></i> 图表
  215. </a>
  216. </li>
  217. <li class="sidebar-nav-heading">Page<span class="sidebar-nav-heading-info"> 常用页面</span></li>
  218. <li class="sidebar-nav-link">
  219. <a href="javascript:;" class="sidebar-nav-sub-title">
  220. <i class="am-icon-table sidebar-nav-link-logo"></i> 数据列表
  221. <span class="am-icon-chevron-down am-fr am-margin-right-sm sidebar-nav-sub-ico"></span>
  222. </a>
  223. <ul class="sidebar-nav sidebar-nav-sub">
  224. <li class="sidebar-nav-link">
  225. <a href="../html/table-list.html">
  226. <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 文字列表
  227. </a>
  228. </li>
  229. <li class="sidebar-nav-link">
  230. <a href="../html/table-list-img.html">
  231. <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 图文列表
  232. </a>
  233. </li>
  234. </ul>
  235. </li>
  236. <li class="sidebar-nav-link">
  237. <a href="/signup">
  238. <i class="am-icon-clone sidebar-nav-link-logo"></i> 注册
  239. <span class="am-badge am-badge-secondary sidebar-nav-link-logo-ico am-round am-fr am-margin-right-sm">6</span>
  240. </a>
  241. </li>
  242. <li class="sidebar-nav-link">
  243. <a href="/login">
  244. <i class="am-icon-key sidebar-nav-link-logo"></i> 登录
  245. </a>
  246. </li>
  247. <li class="sidebar-nav-link">
  248. <a href="/page404">
  249. <i class="am-icon-tv sidebar-nav-link-logo"></i> 404错误
  250. </a>
  251. </li>
  252. </ul>
  253. </div>
  254. <!-- 内容区域 -->
  255. <div class="tpl-content-wrapper">
  256. <div class="row-content am-cf">
  257. <div class="tpl-calendar-box">
  258. <div id="calendar"></div>
  259. </div>
  260. </div>
  261. </div>
  262. </div>
  263. </div>
  264. <!-- 弹出层 -->
  265. <div class="am-modal am-modal-no-btn" id="calendar-edit-box">
  266. <div class="am-modal-dialog tpl-model-dialog">
  267. <div class="am-modal-hd">
  268. <a href="javascript: void(0)" class="am-close edit-box-close am-close-spin" data-am-modal-close>&times;</a>
  269. </div>
  270. <div class="am-modal-bd tpl-am-model-bd am-cf">
  271. <form class="am-form tpl-form-border-form">
  272. <div class="am-form-group am-u-sm-12">
  273. <label for="user-name" class="am-u-sm-12 am-form-label am-text-left">标题 <span class="tpl-form-line-small-title">Title</span></label>
  274. <div class="am-u-sm-12">
  275. <input type="text" class="tpl-form-input am-margin-top-xs calendar-edit-box-title" id="user-name" placeholder="" disabled>
  276. </div>
  277. </div>
  278. </form>
  279. </div>
  280. </div>
  281. </div>
  282. <script src="../js/moment.js"></script>
  283. <script src="../js/amazeui.min.js"></script>
  284. <script src="../js/fullcalendar.min.js"></script>
  285. <script src="../js/app.js"></script>
  286. <script>
  287. $(document).ready(function() {
  288. var editBox = $('#calendar-edit-box');
  289. $('.edit-box-close').on('click', function() {
  290. $('#calendar').fullCalendar('unselect');
  291. })
  292. $('#calendar').fullCalendar({
  293. header: {
  294. left: 'prev,next today',
  295. center: 'title',
  296. right: 'month,agendaWeek,agendaDay'
  297. },
  298. monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
  299. monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
  300. dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
  301. dayNamesShort: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
  302. today: ["今天"],
  303. firstDay: 1,
  304. buttonText: {
  305. today: '本月',
  306. month: '月',
  307. week: '周',
  308. day: '日',
  309. prev: '上一月',
  310. next: '下一月'
  311. },
  312. defaultDate: '2016-09-12',
  313. lang: 'zh-cn',
  314. navLinks: true, // can click day/week names to navigate views
  315. selectable: true,
  316. selectHelper: true,
  317. select: function(start, end) {
  318. var title = prompt('填写你的记录的:');
  319. var eventData;
  320. if (title) {
  321. eventData = {
  322. title: title,
  323. start: start,
  324. end: end
  325. };
  326. $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
  327. }
  328. $('#calendar').fullCalendar('unselect');
  329. },
  330. editable: true,
  331. eventLimit: true, // allow "more" link when too many events
  332. eventClick: function(event, jsEvent, view) {
  333. // event.source.events[0].title = '222223333'
  334. // 修改数据
  335. // 标题
  336. $('.calendar-edit-box-title').val(event.title)
  337. // 弹出框
  338. editBox.modal();
  339. },
  340. events: [{
  341. id: 1,
  342. title: '给她抱抱 叫她包包 喂她吃饱 给她买包',
  343. start: '2016-09-01',
  344. end: '2016-09-10'
  345. }, {
  346. id: 2,
  347. title: '给她抱抱',
  348. start: '2016-09-07',
  349. end: '2016-09-10'
  350. }, {
  351. id: 3,
  352. title: '叫她包包',
  353. start: '2016-09-09',
  354. end: '2016-09-10'
  355. }, {
  356. id: 4,
  357. title: '喂她吃饱',
  358. start: '2016-09-16',
  359. end: '2016-09-10'
  360. }, {
  361. id: 5,
  362. title: '喂她吃饱',
  363. start: '2016-09-11',
  364. end: '2016-09-13'
  365. }, {
  366. id: 6,
  367. title: '喂她吃饱',
  368. start: '2016-09-12',
  369. end: '2016-09-12'
  370. }, {
  371. id: 7,
  372. title: '喂她吃饱',
  373. start: '2016-09-12',
  374. end: '2016-09-12'
  375. }, {
  376. id: 8,
  377. title: '喂她吃饱',
  378. start: '2016-09-12',
  379. end: '2016-09-12'
  380. }, {
  381. id: 9,
  382. title: '喂她吃饱',
  383. start: '2016-09-12',
  384. end: '2016-09-12'
  385. }, {
  386. id: 10,
  387. title: '喂她吃饱',
  388. start: '2016-09-12',
  389. end: '2016-09-12'
  390. }, {
  391. id: 11,
  392. title: 'Birthday Party',
  393. start: '2016-09-13',
  394. end: '2016-09-12'
  395. }, {
  396. id: 12,
  397. title: 'Click for Google',
  398. start: '2016-09-28',
  399. end: '2016-09-12'
  400. }]
  401. });
  402. });
  403. </script>
  404. </body>
  405. </html>