example00-basic.html 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  5. <title>TOAST UI Calendar App DEMO</title>
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  7. <link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css">
  8. <link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css">
  9. <link rel="stylesheet" type="text/css" href="./dist/tui-calendar.css">
  10. <link rel="stylesheet" type="text/css" href="./css/default.css">
  11. <link rel="stylesheet" type="text/css" href="./css/icons.css">
  12. </head>
  13. <body>
  14. <div id="top">
  15. <a href="https://github.com/nhn/tui.calendar">
  16. <img src="./images/img-bi.png" srcset="./images/img-bi@2x.png 2x,./images/img-bi@3x.png 3x">
  17. </a>
  18. </div>
  19. <div id="lnb">
  20. <div class="lnb-new-schedule">
  21. <button id="btn-new-schedule" type="button" class="btn btn-default btn-block lnb-new-schedule-btn" data-toggle="modal">
  22. 任务状态</button>
  23. </div>
  24. <div id="lnb-calendars" class="lnb-calendars">
  25. <div>
  26. <div class="lnb-calendars-item">
  27. <label>
  28. <input class="tui-full-calendar-checkbox-square" type="checkbox" value="all" checked>
  29. <span></span>
  30. <strong>全部状态</strong>
  31. </label>
  32. </div>
  33. </div>
  34. <div id="calendarList" class="lnb-calendars-d1">
  35. </div>
  36. </div>
  37. <div class="lnb-footer">
  38. © HITACHI.
  39. </div>
  40. </div>
  41. <div id="right">
  42. <div id="menu">
  43. <span class="dropdown">
  44. <button id="dropdownMenu-calendarType" class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"
  45. aria-haspopup="true" aria-expanded="true">
  46. <i id="calendarTypeIcon" class="calendar-icon ic_view_month" style="margin-right: 4px;"></i>
  47. <span id="calendarTypeName">Dropdown</span>&nbsp;
  48. <i class="calendar-icon tui-full-calendar-dropdown-arrow"></i>
  49. </button>
  50. <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu-calendarType">
  51. <li role="presentation">
  52. <a class="dropdown-menu-title" role="menuitem" data-action="toggle-daily">
  53. <i class="calendar-icon ic_view_day"></i>Daily
  54. </a>
  55. </li>
  56. <li role="presentation">
  57. <a class="dropdown-menu-title" role="menuitem" data-action="toggle-weekly">
  58. <i class="calendar-icon ic_view_week"></i>Weekly
  59. </a>
  60. </li>
  61. <li role="presentation">
  62. <a class="dropdown-menu-title" role="menuitem" data-action="toggle-monthly">
  63. <i class="calendar-icon ic_view_month"></i>Month
  64. </a>
  65. </li>
  66. <li role="presentation">
  67. <a class="dropdown-menu-title" role="menuitem" data-action="toggle-weeks2">
  68. <i class="calendar-icon ic_view_week"></i>2 weeks
  69. </a>
  70. </li>
  71. <li role="presentation">
  72. <a class="dropdown-menu-title" role="menuitem" data-action="toggle-weeks3">
  73. <i class="calendar-icon ic_view_week"></i>3 weeks
  74. </a>
  75. </li>
  76. <li role="presentation" class="dropdown-divider"></li>
  77. <li role="presentation">
  78. <a role="menuitem" data-action="toggle-workweek">
  79. <input type="checkbox" class="tui-full-calendar-checkbox-square" value="toggle-workweek" checked>
  80. <span class="checkbox-title"></span>Show weekends
  81. </a>
  82. </li>
  83. <li role="presentation">
  84. <a role="menuitem" data-action="toggle-start-day-1">
  85. <input type="checkbox" class="tui-full-calendar-checkbox-square" value="toggle-start-day-1">
  86. <span class="checkbox-title"></span>Start Week on Monday
  87. </a>
  88. </li>
  89. <li role="presentation">
  90. <a role="menuitem" data-action="toggle-narrow-weekend">
  91. <input type="checkbox" class="tui-full-calendar-checkbox-square" value="toggle-narrow-weekend">
  92. <span class="checkbox-title"></span>Narrower than weekdays
  93. </a>
  94. </li>
  95. </ul>
  96. </span>
  97. <span id="menu-navi">
  98. <button type="button" class="btn btn-default btn-sm move-today" data-action="move-today">Today</button>
  99. <button type="button" class="btn btn-default btn-sm move-day" data-action="move-prev">
  100. <i class="calendar-icon ic-arrow-line-left" data-action="move-prev"></i>
  101. </button>
  102. <button type="button" class="btn btn-default btn-sm move-day" data-action="move-next">
  103. <i class="calendar-icon ic-arrow-line-right" data-action="move-next"></i>
  104. </button>
  105. </span>
  106. <span id="renderRange" class="render-range"></span>
  107. </div>
  108. <div id="calendar"></div>
  109. </div>
  110. <script src="./js/jquery-3.1.1.min.js"></script>
  111. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  112. <script src="https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js"></script>
  113. <script src="https://uicdn.toast.com/tui.time-picker/v2.0.3/tui-time-picker.min.js"></script>
  114. <script src="https://uicdn.toast.com/tui.date-picker/v4.0.3/tui-date-picker.min.js"></script>
  115. <script src='js/moment-2.20.1.min.js'></script>
  116. <script src='js/chance-1.0.13.min.js'></script>
  117. <script src="../base.js"></script>
  118. <script src="./dist/tui-calendar.js"></script>
  119. <script src="./js/data/calendars.js"></script>
  120. <script src="./js/data/schedules.js"></script>
  121. <script src="./js/theme/dooray.js"></script>
  122. <script src="./js/app.js"></script>
  123. </body>
  124. </html>