ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/pages/calendar.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   6   <title>AdminLTE 2 | Calendar</title>
   7   <!-- Tell the browser to be responsive to screen width -->
   8   <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
   9   <!-- Bootstrap 3.3.6 -->
  10   <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
  11   <!-- Font Awesome -->
  12   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  13   <!-- Ionicons -->
  14   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
  15   <!-- fullCalendar 2.2.5-->
  16   <link rel="stylesheet" href="../plugins/fullcalendar/fullcalendar.min.css">
  17   <link rel="stylesheet" href="../plugins/fullcalendar/fullcalendar.print.css" media="print">
  18   <!-- Theme style -->
  19   <link rel="stylesheet" href="../dist/css/AdminLTE.min.css">
  20   <!-- AdminLTE Skins. Choose a skin from the css/skins
  21        folder instead of downloading all of them to reduce the load. -->
  22   <link rel="stylesheet" href="../dist/css/skins/_all-skins.min.css">
  23
  24   <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  25   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  26   <!--[if lt IE 9]>
  27   <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  28   <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  29   <![endif]-->
  30 </head>
  31 <body class="hold-transition skin-blue sidebar-mini">
  32 <div class="wrapper">
  33
  34   <header class="main-header">
  35     <!-- Logo -->
  36     <a href="../index2.html" class="logo">
  37       <!-- mini logo for sidebar mini 50x50 pixels -->
  38       <span class="logo-mini"><b>A</b>LT</span>
  39       <!-- logo for regular state and mobile devices -->
  40       <span class="logo-lg"><b>Admin</b>LTE</span>
  41     </a>
  42     <!-- Header Navbar: style can be found in header.less -->
  43     <nav class="navbar navbar-static-top">
  44       <!-- Sidebar toggle button-->
  45       <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
  46         <span class="sr-only">Toggle navigation</span>
  47         <span class="icon-bar"></span>
  48         <span class="icon-bar"></span>
  49         <span class="icon-bar"></span>
  50       </a>
  51
  52       <div class="navbar-custom-menu">
  53         <ul class="nav navbar-nav">
  54           <!-- Messages: style can be found in dropdown.less-->
  55           <li class="dropdown messages-menu">
  56             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  57               <i class="fa fa-envelope-o"></i>
  58               <span class="label label-success">4</span>
  59             </a>
  60             <ul class="dropdown-menu">
  61               <li class="header">You have 4 messages</li>
  62               <li>
  63                 <!-- inner menu: contains the actual data -->
  64                 <ul class="menu">
  65                   <li><!-- start message -->
  66                     <a href="#">
  67                       <div class="pull-left">
  68                         <img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  69                       </div>
  70                       <h4>
  71                         Support Team
  72                         <small><i class="fa fa-clock-o"></i> 5 mins</small>
  73                       </h4>
  74                       <p>Why not buy a new awesome theme?</p>
  75                     </a>
  76                   </li>
  77                   <!-- end message -->
  78                   <li>
  79                     <a href="#">
  80                       <div class="pull-left">
  81                         <img src="../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
  82                       </div>
  83                       <h4>
  84                         AdminLTE Design Team
  85                         <small><i class="fa fa-clock-o"></i> 2 hours</small>
  86                       </h4>
  87                       <p>Why not buy a new awesome theme?</p>
  88                     </a>
  89                   </li>
  90                   <li>
  91                     <a href="#">
  92                       <div class="pull-left">
  93                         <img src="../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
  94                       </div>
  95                       <h4>
  96                         Developers
  97                         <small><i class="fa fa-clock-o"></i> Today</small>
  98                       </h4>
  99                       <p>Why not buy a new awesome theme?</p>
 100                     </a>
 101                   </li>
 102                   <li>
 103                     <a href="#">
 104                       <div class="pull-left">
 105                         <img src="../dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
 106                       </div>
 107                       <h4>
 108                         Sales Department
 109                         <small><i class="fa fa-clock-o"></i> Yesterday</small>
 110                       </h4>
 111                       <p>Why not buy a new awesome theme?</p>
 112                     </a>
 113                   </li>
 114                   <li>
 115                     <a href="#">
 116                       <div class="pull-left">
 117                         <img src="../dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
 118                       </div>
 119                       <h4>
 120                         Reviewers
 121                         <small><i class="fa fa-clock-o"></i> 2 days</small>
 122                       </h4>
 123                       <p>Why not buy a new awesome theme?</p>
 124                     </a>
 125                   </li>
 126                 </ul>
 127               </li>
 128               <li class="footer"><a href="#">See All Messages</a></li>
 129             </ul>
 130           </li>
 131           <!-- Notifications: style can be found in dropdown.less -->
 132           <li class="dropdown notifications-menu">
 133             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 134               <i class="fa fa-bell-o"></i>
 135               <span class="label label-warning">10</span>
 136             </a>
 137             <ul class="dropdown-menu">
 138               <li class="header">You have 10 notifications</li>
 139               <li>
 140                 <!-- inner menu: contains the actual data -->
 141                 <ul class="menu">
 142                   <li>
 143                     <a href="#">
 144                       <i class="fa fa-users text-aqua"></i> 5 new members joined today
 145                     </a>
 146                   </li>
 147                   <li>
 148                     <a href="#">
 149                       <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the
 150                       page and may cause design problems
 151                     </a>
 152                   </li>
 153                   <li>
 154                     <a href="#">
 155                       <i class="fa fa-users text-red"></i> 5 new members joined
 156                     </a>
 157                   </li>
 158
 159                   <li>
 160                     <a href="#">
 161                       <i class="fa fa-shopping-cart text-green"></i> 25 sales made
 162                     </a>
 163                   </li>
 164                   <li>
 165                     <a href="#">
 166                       <i class="fa fa-user text-red"></i> You changed your username
 167                     </a>
 168                   </li>
 169                 </ul>
 170               </li>
 171               <li class="footer"><a href="#">View all</a></li>
 172             </ul>
 173           </li>
 174           <!-- Tasks: style can be found in dropdown.less -->
 175           <li class="dropdown tasks-menu">
 176             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 177               <i class="fa fa-flag-o"></i>
 178               <span class="label label-danger">9</span>
 179             </a>
 180             <ul class="dropdown-menu">
 181               <li class="header">You have 9 tasks</li>
 182               <li>
 183                 <!-- inner menu: contains the actual data -->
 184                 <ul class="menu">
 185                   <li><!-- Task item -->
 186                     <a href="#">
 187                       <h3>
 188                         Design some buttons
 189                         <small class="pull-right">20%</small>
 190                       </h3>
 191                       <div class="progress xs">
 192                         <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 193                           <span class="sr-only">20% Complete</span>
 194                         </div>
 195                       </div>
 196                     </a>
 197                   </li>
 198                   <!-- end task item -->
 199                   <li><!-- Task item -->
 200                     <a href="#">
 201                       <h3>
 202                         Create a nice theme
 203                         <small class="pull-right">40%</small>
 204                       </h3>
 205                       <div class="progress xs">
 206                         <div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 207                           <span class="sr-only">40% Complete</span>
 208                         </div>
 209                       </div>
 210                     </a>
 211                   </li>
 212                   <!-- end task item -->
 213                   <li><!-- Task item -->
 214                     <a href="#">
 215                       <h3>
 216                         Some task I need to do
 217                         <small class="pull-right">60%</small>
 218                       </h3>
 219                       <div class="progress xs">
 220                         <div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 221                           <span class="sr-only">60% Complete</span>
 222                         </div>
 223                       </div>
 224                     </a>
 225                   </li>
 226                   <!-- end task item -->
 227                   <li><!-- Task item -->
 228                     <a href="#">
 229                       <h3>
 230                         Make beautiful transitions
 231                         <small class="pull-right">80%</small>
 232                       </h3>
 233                       <div class="progress xs">
 234                         <div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 235                           <span class="sr-only">80% Complete</span>
 236                         </div>
 237                       </div>
 238                     </a>
 239                   </li>
 240                   <!-- end task item -->
 241                 </ul>
 242               </li>
 243               <li class="footer">
 244                 <a href="#">View all tasks</a>
 245               </li>
 246             </ul>
 247           </li>
 248           <!-- User Account: style can be found in dropdown.less -->
 249           <li class="dropdown user user-menu">
 250             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 251               <img src="../dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
 252               <span class="hidden-xs">Alexander Pierce</span>
 253             </a>
 254             <ul class="dropdown-menu">
 255               <!-- User image -->
 256               <li class="user-header">
 257                 <img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 258
 259                 <p>
 260                   Alexander Pierce - Web Developer
 261                   <small>Member since Nov. 2012</small>
 262                 </p>
 263               </li>
 264               <!-- Menu Body -->
 265               <li class="user-body">
 266                 <div class="row">
 267                   <div class="col-xs-4 text-center">
 268                     <a href="#">Followers</a>
 269                   </div>
 270                   <div class="col-xs-4 text-center">
 271                     <a href="#">Sales</a>
 272                   </div>
 273                   <div class="col-xs-4 text-center">
 274                     <a href="#">Friends</a>
 275                   </div>
 276                 </div>
 277                 <!-- /.row -->
 278               </li>
 279               <!-- Menu Footer-->
 280               <li class="user-footer">
 281                 <div class="pull-left">
 282                   <a href="#" class="btn btn-default btn-flat">Profile</a>
 283                 </div>
 284                 <div class="pull-right">
 285                   <a href="#" class="btn btn-default btn-flat">Sign out</a>
 286                 </div>
 287               </li>
 288             </ul>
 289           </li>
 290         </ul>
 291       </div>
 292     </nav>
 293   </header>
 294   <!-- Left side column. contains the logo and sidebar -->
 295   <aside class="main-sidebar">
 296     <!-- sidebar: style can be found in sidebar.less -->
 297     <section class="sidebar">
 298       <!-- Sidebar user panel -->
 299       <div class="user-panel">
 300         <div class="pull-left image">
 301           <img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 302         </div>
 303         <div class="pull-left info">
 304           <p>Alexander Pierce</p>
 305           <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
 306         </div>
 307       </div>
 308       <!-- search form -->
 309       <form action="#" method="get" class="sidebar-form">
 310         <div class="input-group">
 311           <input type="text" name="q" class="form-control" placeholder="Search...">
 312               <span class="input-group-btn">
 313                 <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
 314                 </button>
 315               </span>
 316         </div>
 317       </form>
 318       <!-- /.search form -->
 319       <!-- sidebar menu: : style can be found in sidebar.less -->
 320       <ul class="sidebar-menu">
 321         <li class="header">MAIN NAVIGATION</li>
 322         <li class="treeview">
 323           <a href="#">
 324             <i class="fa fa-dashboard"></i> <span>Dashboard</span>
 325             <span class="pull-right-container">
 326               <i class="fa fa-angle-left pull-right"></i>
 327             </span>
 328           </a>
 329           <ul class="treeview-menu">
 330             <li><a href="../index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
 331             <li><a href="../index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
 332           </ul>
 333         </li>
 334         <li class="treeview">
 335           <a href="#">
 336             <i class="fa fa-files-o"></i>
 337             <span>Layout Options</span>
 338             <span class="pull-right-container">
 339               <span class="label label-primary pull-right">4</span>
 340             </span>
 341           </a>
 342           <ul class="treeview-menu">
 343             <li><a href="layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
 344             <li><a href="layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
 345             <li><a href="layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
 346             <li><a href="layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
 347           </ul>
 348         </li>
 349         <li>
 350           <a href="widgets.html">
 351             <i class="fa fa-th"></i> <span>Widgets</span>
 352             <span class="pull-right-container">
 353               <small class="label pull-right bg-green">new</small>
 354             </span>
 355           </a>
 356         </li>
 357         <li class="treeview">
 358           <a href="#">
 359             <i class="fa fa-pie-chart"></i>
 360             <span>Charts</span>
 361             <span class="pull-right-container">
 362               <i class="fa fa-angle-left pull-right"></i>
 363             </span>
 364           </a>
 365           <ul class="treeview-menu">
 366             <li><a href="charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
 367             <li><a href="charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
 368             <li><a href="charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
 369             <li><a href="charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
 370           </ul>
 371         </li>
 372         <li class="treeview">
 373           <a href="#">
 374             <i class="fa fa-laptop"></i>
 375             <span>UI Elements</span>
 376             <span class="pull-right-container">
 377               <i class="fa fa-angle-left pull-right"></i>
 378             </span>
 379           </a>
 380           <ul class="treeview-menu">
 381             <li><a href="UI/general.html"><i class="fa fa-circle-o"></i> General</a></li>
 382             <li><a href="UI/icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
 383             <li><a href="UI/buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
 384             <li><a href="UI/sliders.html"><i class="fa fa-circle-o"></i> Sliders</a></li>
 385             <li><a href="UI/timeline.html"><i class="fa fa-circle-o"></i> Timeline</a></li>
 386             <li><a href="UI/modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
 387           </ul>
 388         </li>
 389         <li class="treeview">
 390           <a href="#">
 391             <i class="fa fa-edit"></i> <span>Forms</span>
 392             <span class="pull-right-container">
 393               <i class="fa fa-angle-left pull-right"></i>
 394             </span>
 395           </a>
 396           <ul class="treeview-menu">
 397             <li><a href="forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
 398             <li><a href="forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
 399             <li><a href="forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
 400           </ul>
 401         </li>
 402         <li class="treeview">
 403           <a href="#">
 404             <i class="fa fa-table"></i> <span>Tables</span>
 405             <span class="pull-right-container">
 406               <i class="fa fa-angle-left pull-right"></i>
 407             </span>
 408           </a>
 409           <ul class="treeview-menu">
 410             <li><a href="tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li>
 411             <li><a href="tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li>
 412           </ul>
 413         </li>
 414         <li class="active">
 415           <a href="calendar.html">
 416             <i class="fa fa-calendar"></i> <span>Calendar</span>
 417             <span class="pull-right-container">
 418               <small class="label pull-right bg-red">3</small>
 419               <small class="label pull-right bg-blue">17</small>
 420             </span>
 421           </a>
 422         </li>
 423         <li>
 424           <a href="mailbox/mailbox.html">
 425             <i class="fa fa-envelope"></i> <span>Mailbox</span>
 426             <span class="pull-right-container">
 427               <small class="label pull-right bg-yellow">12</small>
 428               <small class="label pull-right bg-green">16</small>
 429               <small class="label pull-right bg-red">5</small>
 430             </span>
 431           </a>
 432         </li>
 433         <li class="treeview">
 434           <a href="#">
 435             <i class="fa fa-folder"></i> <span>Examples</span>
 436             <span class="pull-right-container">
 437               <i class="fa fa-angle-left pull-right"></i>
 438             </span>
 439           </a>
 440           <ul class="treeview-menu">
 441             <li><a href="examples/invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
 442             <li><a href="examples/profile.html"><i class="fa fa-circle-o"></i> Profile</a></li>
 443             <li><a href="examples/login.html"><i class="fa fa-circle-o"></i> Login</a></li>
 444             <li><a href="examples/register.html"><i class="fa fa-circle-o"></i> Register</a></li>
 445             <li><a href="examples/lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
 446             <li><a href="examples/404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
 447             <li><a href="examples/500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
 448             <li><a href="examples/blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
 449             <li><a href="examples/pace.html"><i class="fa fa-circle-o"></i> Pace Page</a></li>
 450           </ul>
 451         </li>
 452         <li class="treeview">
 453           <a href="#">
 454             <i class="fa fa-share"></i> <span>Multilevel</span>
 455             <span class="pull-right-container">
 456               <i class="fa fa-angle-left pull-right"></i>
 457             </span>
 458           </a>
 459           <ul class="treeview-menu">
 460             <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
 461             <li>
 462               <a href="#"><i class="fa fa-circle-o"></i> Level One
 463                 <span class="pull-right-container">
 464                   <i class="fa fa-angle-left pull-right"></i>
 465                 </span>
 466               </a>
 467               <ul class="treeview-menu">
 468                 <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
 469                 <li>
 470                   <a href="#"><i class="fa fa-circle-o"></i> Level Two
 471                     <span class="pull-right-container">
 472                       <i class="fa fa-angle-left pull-right"></i>
 473                     </span>
 474                   </a>
 475                   <ul class="treeview-menu">
 476                     <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
 477                     <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
 478                   </ul>
 479                 </li>
 480               </ul>
 481             </li>
 482             <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
 483           </ul>
 484         </li>
 485         <li><a href="../documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
 486         <li class="header">LABELS</li>
 487         <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
 488         <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
 489         <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
 490       </ul>
 491     </section>
 492     <!-- /.sidebar -->
 493   </aside>
 494
 495   <!-- Content Wrapper. Contains page content -->
 496   <div class="content-wrapper">
 497     <!-- Content Header (Page header) -->
 498     <section class="content-header">
 499       <h1>
 500         Calendar
 501         <small>Control panel</small>
 502       </h1>
 503       <ol class="breadcrumb">
 504         <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
 505         <li class="active">Calendar</li>
 506       </ol>
 507     </section>
 508
 509     <!-- Main content -->
 510     <section class="content">
 511       <div class="row">
 512         <div class="col-md-3">
 513           <div class="box box-solid">
 514             <div class="box-header with-border">
 515               <h4 class="box-title">Draggable Events</h4>
 516             </div>
 517             <div class="box-body">
 518               <!-- the events -->
 519               <div id="external-events">
 520                 <div class="external-event bg-green">Lunch</div>
 521                 <div class="external-event bg-yellow">Go home</div>
 522                 <div class="external-event bg-aqua">Do homework</div>
 523                 <div class="external-event bg-light-blue">Work on UI design</div>
 524                 <div class="external-event bg-red">Sleep tight</div>
 525                 <div class="checkbox">
 526                   <label for="drop-remove">
 527                     <input type="checkbox" id="drop-remove">
 528                     remove after drop
 529                   </label>
 530                 </div>
 531               </div>
 532             </div>
 533             <!-- /.box-body -->
 534           </div>
 535           <!-- /. box -->
 536           <div class="box box-solid">
 537             <div class="box-header with-border">
 538               <h3 class="box-title">Create Event</h3>
 539             </div>
 540             <div class="box-body">
 541               <div class="btn-group" style="width: 100%; margin-bottom: 10px;">
 542                 <!--<button type="button" id="color-chooser-btn" class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">Color <span class="caret"></span></button>-->
 543                 <ul class="fc-color-picker" id="color-chooser">
 544                   <li><a class="text-aqua" href="#"><i class="fa fa-square"></i></a></li>
 545                   <li><a class="text-blue" href="#"><i class="fa fa-square"></i></a></li>
 546                   <li><a class="text-light-blue" href="#"><i class="fa fa-square"></i></a></li>
 547                   <li><a class="text-teal" href="#"><i class="fa fa-square"></i></a></li>
 548                   <li><a class="text-yellow" href="#"><i class="fa fa-square"></i></a></li>
 549                   <li><a class="text-orange" href="#"><i class="fa fa-square"></i></a></li>
 550                   <li><a class="text-green" href="#"><i class="fa fa-square"></i></a></li>
 551                   <li><a class="text-lime" href="#"><i class="fa fa-square"></i></a></li>
 552                   <li><a class="text-red" href="#"><i class="fa fa-square"></i></a></li>
 553                   <li><a class="text-purple" href="#"><i class="fa fa-square"></i></a></li>
 554                   <li><a class="text-fuchsia" href="#"><i class="fa fa-square"></i></a></li>
 555                   <li><a class="text-muted" href="#"><i class="fa fa-square"></i></a></li>
 556                   <li><a class="text-navy" href="#"><i class="fa fa-square"></i></a></li>
 557                 </ul>
 558               </div>
 559               <!-- /btn-group -->
 560               <div class="input-group">
 561                 <input id="new-event" type="text" class="form-control" placeholder="Event Title">
 562
 563                 <div class="input-group-btn">
 564                   <button id="add-new-event" type="button" class="btn btn-primary btn-flat">Add</button>
 565                 </div>
 566                 <!-- /btn-group -->
 567               </div>
 568               <!-- /input-group -->
 569             </div>
 570           </div>
 571         </div>
 572         <!-- /.col -->
 573         <div class="col-md-9">
 574           <div class="box box-primary">
 575             <div class="box-body no-padding">
 576               <!-- THE CALENDAR -->
 577               <div id="calendar"></div>
 578             </div>
 579             <!-- /.box-body -->
 580           </div>
 581           <!-- /. box -->
 582         </div>
 583         <!-- /.col -->
 584       </div>
 585       <!-- /.row -->
 586     </section>
 587     <!-- /.content -->
 588   </div>
 589   <!-- /.content-wrapper -->
 590
 591   <footer class="main-footer">
 592     <div class="pull-right hidden-xs">
 593       <b>Version</b> 2.3.7
 594     </div>
 595     <strong>Copyright &copy; 2014-2016 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights
 596     reserved.
 597   </footer>
 598
 599   <!-- Control Sidebar -->
 600   <aside class="control-sidebar control-sidebar-dark">
 601     <!-- Create the tabs -->
 602     <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
 603       <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
 604       <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
 605     </ul>
 606     <!-- Tab panes -->
 607     <div class="tab-content">
 608       <!-- Home tab content -->
 609       <div class="tab-pane" id="control-sidebar-home-tab">
 610         <h3 class="control-sidebar-heading">Recent Activity</h3>
 611         <ul class="control-sidebar-menu">
 612           <li>
 613             <a href="javascript:void(0)">
 614               <i class="menu-icon fa fa-birthday-cake bg-red"></i>
 615
 616               <div class="menu-info">
 617                 <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
 618
 619                 <p>Will be 23 on April 24th</p>
 620               </div>
 621             </a>
 622           </li>
 623           <li>
 624             <a href="javascript:void(0)">
 625               <i class="menu-icon fa fa-user bg-yellow"></i>
 626
 627               <div class="menu-info">
 628                 <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
 629
 630                 <p>New phone +1(800)555-1234</p>
 631               </div>
 632             </a>
 633           </li>
 634           <li>
 635             <a href="javascript:void(0)">
 636               <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
 637
 638               <div class="menu-info">
 639                 <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
 640
 641                 <p>nora@example.com</p>
 642               </div>
 643             </a>
 644           </li>
 645           <li>
 646             <a href="javascript:void(0)">
 647               <i class="menu-icon fa fa-file-code-o bg-green"></i>
 648
 649               <div class="menu-info">
 650                 <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
 651
 652                 <p>Execution time 5 seconds</p>
 653               </div>
 654             </a>
 655           </li>
 656         </ul>
 657         <!-- /.control-sidebar-menu -->
 658
 659         <h3 class="control-sidebar-heading">Tasks Progress</h3>
 660         <ul class="control-sidebar-menu">
 661           <li>
 662             <a href="javascript:void(0)">
 663               <h4 class="control-sidebar-subheading">
 664                 Custom Template Design
 665                 <span class="label label-danger pull-right">70%</span>
 666               </h4>
 667
 668               <div class="progress progress-xxs">
 669                 <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
 670               </div>
 671             </a>
 672           </li>
 673           <li>
 674             <a href="javascript:void(0)">
 675               <h4 class="control-sidebar-subheading">
 676                 Update Resume
 677                 <span class="label label-success pull-right">95%</span>
 678               </h4>
 679
 680               <div class="progress progress-xxs">
 681                 <div class="progress-bar progress-bar-success" style="width: 95%"></div>
 682               </div>
 683             </a>
 684           </li>
 685           <li>
 686             <a href="javascript:void(0)">
 687               <h4 class="control-sidebar-subheading">
 688                 Laravel Integration
 689                 <span class="label label-warning pull-right">50%</span>
 690               </h4>
 691
 692               <div class="progress progress-xxs">
 693                 <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
 694               </div>
 695             </a>
 696           </li>
 697           <li>
 698             <a href="javascript:void(0)">
 699               <h4 class="control-sidebar-subheading">
 700                 Back End Framework
 701                 <span class="label label-primary pull-right">68%</span>
 702               </h4>
 703
 704               <div class="progress progress-xxs">
 705                 <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
 706               </div>
 707             </a>
 708           </li>
 709         </ul>
 710         <!-- /.control-sidebar-menu -->
 711
 712       </div>
 713       <!-- /.tab-pane -->
 714       <!-- Stats tab content -->
 715       <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
 716       <!-- /.tab-pane -->
 717       <!-- Settings tab content -->
 718       <div class="tab-pane" id="control-sidebar-settings-tab">
 719         <form method="post">
 720           <h3 class="control-sidebar-heading">General Settings</h3>
 721
 722           <div class="form-group">
 723             <label class="control-sidebar-subheading">
 724               Report panel usage
 725               <input type="checkbox" class="pull-right" checked>
 726             </label>
 727
 728             <p>
 729               Some information about this general settings option
 730             </p>
 731           </div>
 732           <!-- /.form-group -->
 733
 734           <div class="form-group">
 735             <label class="control-sidebar-subheading">
 736               Allow mail redirect
 737               <input type="checkbox" class="pull-right" checked>
 738             </label>
 739
 740             <p>
 741               Other sets of options are available
 742             </p>
 743           </div>
 744           <!-- /.form-group -->
 745
 746           <div class="form-group">
 747             <label class="control-sidebar-subheading">
 748               Expose author name in posts
 749               <input type="checkbox" class="pull-right" checked>
 750             </label>
 751
 752             <p>
 753               Allow the user to show his name in blog posts
 754             </p>
 755           </div>
 756           <!-- /.form-group -->
 757
 758           <h3 class="control-sidebar-heading">Chat Settings</h3>
 759
 760           <div class="form-group">
 761             <label class="control-sidebar-subheading">
 762               Show me as online
 763               <input type="checkbox" class="pull-right" checked>
 764             </label>
 765           </div>
 766           <!-- /.form-group -->
 767
 768           <div class="form-group">
 769             <label class="control-sidebar-subheading">
 770               Turn off notifications
 771               <input type="checkbox" class="pull-right">
 772             </label>
 773           </div>
 774           <!-- /.form-group -->
 775
 776           <div class="form-group">
 777             <label class="control-sidebar-subheading">
 778               Delete chat history
 779               <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
 780             </label>
 781           </div>
 782           <!-- /.form-group -->
 783         </form>
 784       </div>
 785       <!-- /.tab-pane -->
 786     </div>
 787   </aside>
 788   <!-- /.control-sidebar -->
 789   <!-- Add the sidebar's background. This div must be placed
 790        immediately after the control sidebar -->
 791   <div class="control-sidebar-bg"></div>
 792 </div>
 793 <!-- ./wrapper -->
 794
 795 <!-- jQuery 2.2.3 -->
 796 <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
 797 <!-- Bootstrap 3.3.6 -->
 798 <script src="../bootstrap/js/bootstrap.min.js"></script>
 799 <!-- jQuery UI 1.11.4 -->
 800 <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
 801 <!-- Slimscroll -->
 802 <script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
 803 <!-- FastClick -->
 804 <script src="../plugins/fastclick/fastclick.js"></script>
 805 <!-- AdminLTE App -->
 806 <script src="../dist/js/app.min.js"></script>
 807 <!-- AdminLTE for demo purposes -->
 808 <script src="../dist/js/demo.js"></script>
 809 <!-- fullCalendar 2.2.5 -->
 810 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
 811 <script src="../plugins/fullcalendar/fullcalendar.min.js"></script>
 812 <!-- Page specific script -->
 813 <script>
 814   $(function () {
 815
 816     /* initialize the external events
 817      -----------------------------------------------------------------*/
 818     function ini_events(ele) {
 819       ele.each(function () {
 820
 821         // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
 822         // it doesn't need to have a start or end
 823         var eventObject = {
 824           title: $.trim($(this).text()) // use the element's text as the event title
 825         };
 826
 827         // store the Event Object in the DOM element so we can get to it later
 828         $(this).data('eventObject', eventObject);
 829
 830         // make the event draggable using jQuery UI
 831         $(this).draggable({
 832           zIndex: 1070,
 833           revert: true, // will cause the event to go back to its
 834           revertDuration: 0  //  original position after the drag
 835         });
 836
 837       });
 838     }
 839
 840     ini_events($('#external-events div.external-event'));
 841
 842     /* initialize the calendar
 843      -----------------------------------------------------------------*/
 844     //Date for the calendar events (dummy data)
 845     var date = new Date();
 846     var d = date.getDate(),
 847         m = date.getMonth(),
 848         y = date.getFullYear();
 849     $('#calendar').fullCalendar({
 850       header: {
 851         left: 'prev,next today',
 852         center: 'title',
 853         right: 'month,agendaWeek,agendaDay'
 854       },
 855       buttonText: {
 856         today: 'today',
 857         month: 'month',
 858         week: 'week',
 859         day: 'day'
 860       },
 861       //Random default events
 862       events: [
 863         {
 864           title: 'All Day Event',
 865           start: new Date(y, m, 1),
 866           backgroundColor: "#f56954", //red
 867           borderColor: "#f56954" //red
 868         },
 869         {
 870           title: 'Long Event',
 871           start: new Date(y, m, d - 5),
 872           end: new Date(y, m, d - 2),
 873           backgroundColor: "#f39c12", //yellow
 874           borderColor: "#f39c12" //yellow
 875         },
 876         {
 877           title: 'Meeting',
 878           start: new Date(y, m, d, 10, 30),
 879           allDay: false,
 880           backgroundColor: "#0073b7", //Blue
 881           borderColor: "#0073b7" //Blue
 882         },
 883         {
 884           title: 'Lunch',
 885           start: new Date(y, m, d, 12, 0),
 886           end: new Date(y, m, d, 14, 0),
 887           allDay: false,
 888           backgroundColor: "#00c0ef", //Info (aqua)
 889           borderColor: "#00c0ef" //Info (aqua)
 890         },
 891         {
 892           title: 'Birthday Party',
 893           start: new Date(y, m, d + 1, 19, 0),
 894           end: new Date(y, m, d + 1, 22, 30),
 895           allDay: false,
 896           backgroundColor: "#00a65a", //Success (green)
 897           borderColor: "#00a65a" //Success (green)
 898         },
 899         {
 900           title: 'Click for Google',
 901           start: new Date(y, m, 28),
 902           end: new Date(y, m, 29),
 903           url: 'http://google.com/',
 904           backgroundColor: "#3c8dbc", //Primary (light-blue)
 905           borderColor: "#3c8dbc" //Primary (light-blue)
 906         }
 907       ],
 908       editable: true,
 909       droppable: true, // this allows things to be dropped onto the calendar !!!
 910       drop: function (date, allDay) { // this function is called when something is dropped
 911
 912         // retrieve the dropped element's stored Event Object
 913         var originalEventObject = $(this).data('eventObject');
 914
 915         // we need to copy it, so that multiple events don't have a reference to the same object
 916         var copiedEventObject = $.extend({}, originalEventObject);
 917
 918         // assign it the date that was reported
 919         copiedEventObject.start = date;
 920         copiedEventObject.allDay = allDay;
 921         copiedEventObject.backgroundColor = $(this).css("background-color");
 922         copiedEventObject.borderColor = $(this).css("border-color");
 923
 924         // render the event on the calendar
 925         // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
 926         $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
 927
 928         // is the "remove after drop" checkbox checked?
 929         if ($('#drop-remove').is(':checked')) {
 930           // if so, remove the element from the "Draggable Events" list
 931           $(this).remove();
 932         }
 933
 934       }
 935     });
 936
 937     /* ADDING EVENTS */
 938     var currColor = "#3c8dbc"; //Red by default
 939     //Color chooser button
 940     var colorChooser = $("#color-chooser-btn");
 941     $("#color-chooser > li > a").click(function (e) {
 942       e.preventDefault();
 943       //Save color
 944       currColor = $(this).css("color");
 945       //Add color effect to button
 946       $('#add-new-event').css({"background-color": currColor, "border-color": currColor});
 947     });
 948     $("#add-new-event").click(function (e) {
 949       e.preventDefault();
 950       //Get value and make sure it is not null
 951       var val = $("#new-event").val();
 952       if (val.length == 0) {
 953         return;
 954       }
 955
 956       //Create events
 957       var event = $("<div />");
 958       event.css({"background-color": currColor, "border-color": currColor, "color": "#fff"}).addClass("external-event");
 959       event.html(val);
 960       $('#external-events').prepend(event);
 961
 962       //Add draggable funtionality
 963       ini_events(event);
 964
 965       //Remove event from text input
 966       $("#new-event").val("");
 967     });
 968   });
 969 </script>
 970 </body>
 971 </html>