git.roojs.org Git - bootswatch/blob - AdminLTE-master/pages/calendar.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <meta charset="UTF-8">
   5         <title>AdminLTE | Calendar</title>
   6         <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
   7         <!-- bootstrap 3.0.2 -->
   8         <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
   9         <!-- font Awesome -->
  10         <link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  11         <!-- Ionicons -->
  12         <link href="../css/ionicons.min.css" rel="stylesheet" type="text/css" />
  13         <!-- fullCalendar -->
  14         <link href="../css/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" />
  15         <link href="../css/fullcalendar/fullcalendar.print.css" rel="stylesheet" type="text/css" media='print' />
  16         <!-- Theme style -->
  17         <link href="../css/AdminLTE.css" rel="stylesheet" type="text/css" />
  18
  19         <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  20         <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  21         <!--[if lt IE 9]>
  22           <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  23           <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  24         <![endif]-->
  25     </head>
  26     <body class="skin-blue">
  27         <!-- header logo: style can be found in header.less -->
  28         <header class="header">
  29             <a href="../index.html" class="logo">
  30                 <!-- Add the class icon to your logo image or logo icon to add the margining -->
  31                 AdminLTE
  32             </a>
  33             <!-- Header Navbar: style can be found in header.less -->
  34             <nav class="navbar navbar-static-top" role="navigation">
  35                 <!-- Sidebar toggle button-->
  36                 <a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button">
  37                     <span class="sr-only">Toggle navigation</span>
  38                     <span class="icon-bar"></span>
  39                     <span class="icon-bar"></span>
  40                     <span class="icon-bar"></span>
  41                 </a>
  42                 <div class="navbar-right">
  43                     <ul class="nav navbar-nav">
  44                         <!-- Messages: style can be found in dropdown.less-->
  45                         <li class="dropdown messages-menu">
  46                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  47                                 <i class="fa fa-envelope"></i>
  48                                 <span class="label label-success">4</span>
  49                             </a>
  50                             <ul class="dropdown-menu">
  51                                 <li class="header">You have 4 messages</li>
  52                                 <li>
  53                                     <!-- inner menu: contains the actual data -->
  54                                     <ul class="menu">
  55                                         <li><!-- start message -->
  56                                             <a href="#">
  57                                                 <div class="pull-left">
  58                                                     <img src="../img/avatar3.png" class="img-circle" alt="User Image"/>
  59                                                 </div>
  60                                                 <h4>
  61                                                     Support Team
  62                                                     <small><i class="fa fa-clock-o"></i> 5 mins</small>
  63                                                 </h4>
  64                                                 <p>Why not buy a new awesome theme?</p>
  65                                             </a>
  66                                         </li><!-- end message -->
  67                                         <li>
  68                                             <a href="#">
  69                                                 <div class="pull-left">
  70                                                     <img src="../img/avatar2.png" class="img-circle" alt="user image"/>
  71                                                 </div>
  72                                                 <h4>
  73                                                     AdminLTE Design Team
  74                                                     <small><i class="fa fa-clock-o"></i> 2 hours</small>
  75                                                 </h4>
  76                                                 <p>Why not buy a new awesome theme?</p>
  77                                             </a>
  78                                         </li>
  79                                         <li>
  80                                             <a href="#">
  81                                                 <div class="pull-left">
  82                                                     <img src="../img/avatar.png" class="img-circle" alt="user image"/>
  83                                                 </div>
  84                                                 <h4>
  85                                                     Developers
  86                                                     <small><i class="fa fa-clock-o"></i> Today</small>
  87                                                 </h4>
  88                                                 <p>Why not buy a new awesome theme?</p>
  89                                             </a>
  90                                         </li>
  91                                         <li>
  92                                             <a href="#">
  93                                                 <div class="pull-left">
  94                                                     <img src="../img/avatar2.png" class="img-circle" alt="user image"/>
  95                                                 </div>
  96                                                 <h4>
  97                                                     Sales Department
  98                                                     <small><i class="fa fa-clock-o"></i> Yesterday</small>
  99                                                 </h4>
 100                                                 <p>Why not buy a new awesome theme?</p>
 101                                             </a>
 102                                         </li>
 103                                         <li>
 104                                             <a href="#">
 105                                                 <div class="pull-left">
 106                                                     <img src="../img/avatar.png" class="img-circle" alt="user image"/>
 107                                                 </div>
 108                                                 <h4>
 109                                                     Reviewers
 110                                                     <small><i class="fa fa-clock-o"></i> 2 days</small>
 111                                                 </h4>
 112                                                 <p>Why not buy a new awesome theme?</p>
 113                                             </a>
 114                                         </li>
 115                                     </ul>
 116                                 </li>
 117                                 <li class="footer"><a href="#">See All Messages</a></li>
 118                             </ul>
 119                         </li>
 120                         <!-- Notifications: style can be found in dropdown.less -->
 121                         <li class="dropdown notifications-menu">
 122                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 123                                 <i class="fa fa-warning"></i>
 124                                 <span class="label label-warning">10</span>
 125                             </a>
 126                             <ul class="dropdown-menu">
 127                                 <li class="header">You have 10 notifications</li>
 128                                 <li>
 129                                     <!-- inner menu: contains the actual data -->
 130                                     <ul class="menu">
 131                                         <li>
 132                                             <a href="#">
 133                                                 <i class="ion ion-ios7-people info"></i> 5 new members joined today
 134                                             </a>
 135                                         </li>
 136                                         <li>
 137                                             <a href="#">
 138                                                 <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
 139                                             </a>
 140                                         </li>
 141                                         <li>
 142                                             <a href="#">
 143                                                 <i class="fa fa-users warning"></i> 5 new members joined
 144                                             </a>
 145                                         </li>
 146
 147                                         <li>
 148                                             <a href="#">
 149                                                 <i class="ion ion-ios7-cart success"></i> 25 sales made
 150                                             </a>
 151                                         </li>
 152                                         <li>
 153                                             <a href="#">
 154                                                 <i class="ion ion-ios7-person danger"></i> You changed your username
 155                                             </a>
 156                                         </li>
 157                                     </ul>
 158                                 </li>
 159                                 <li class="footer"><a href="#">View all</a></li>
 160                             </ul>
 161                         </li>
 162                         <!-- Tasks: style can be found in dropdown.less -->
 163                         <li class="dropdown tasks-menu">
 164                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 165                                 <i class="fa fa-tasks"></i>
 166                                 <span class="label label-danger">9</span>
 167                             </a>
 168                             <ul class="dropdown-menu">
 169                                 <li class="header">You have 9 tasks</li>
 170                                 <li>
 171                                     <!-- inner menu: contains the actual data -->
 172                                     <ul class="menu">
 173                                         <li><!-- Task item -->
 174                                             <a href="#">
 175                                                 <h3>
 176                                                     Design some buttons
 177                                                     <small class="pull-right">20%</small>
 178                                                 </h3>
 179                                                 <div class="progress xs">
 180                                                     <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 181                                                         <span class="sr-only">20% Complete</span>
 182                                                     </div>
 183                                                 </div>
 184                                             </a>
 185                                         </li><!-- end task item -->
 186                                         <li><!-- Task item -->
 187                                             <a href="#">
 188                                                 <h3>
 189                                                     Create a nice theme
 190                                                     <small class="pull-right">40%</small>
 191                                                 </h3>
 192                                                 <div class="progress xs">
 193                                                     <div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 194                                                         <span class="sr-only">40% Complete</span>
 195                                                     </div>
 196                                                 </div>
 197                                             </a>
 198                                         </li><!-- end task item -->
 199                                         <li><!-- Task item -->
 200                                             <a href="#">
 201                                                 <h3>
 202                                                     Some task I need to do
 203                                                     <small class="pull-right">60%</small>
 204                                                 </h3>
 205                                                 <div class="progress xs">
 206                                                     <div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 207                                                         <span class="sr-only">60% Complete</span>
 208                                                     </div>
 209                                                 </div>
 210                                             </a>
 211                                         </li><!-- end task item -->
 212                                         <li><!-- Task item -->
 213                                             <a href="#">
 214                                                 <h3>
 215                                                     Make beautiful transitions
 216                                                     <small class="pull-right">80%</small>
 217                                                 </h3>
 218                                                 <div class="progress xs">
 219                                                     <div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 220                                                         <span class="sr-only">80% Complete</span>
 221                                                     </div>
 222                                                 </div>
 223                                             </a>
 224                                         </li><!-- end task item -->
 225                                     </ul>
 226                                 </li>
 227                                 <li class="footer">
 228                                     <a href="#">View all tasks</a>
 229                                 </li>
 230                             </ul>
 231                         </li>
 232                         <!-- User Account: style can be found in dropdown.less -->
 233                         <li class="dropdown user user-menu">
 234                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 235                                 <i class="glyphicon glyphicon-user"></i>
 236                                 <span>Jane Doe <i class="caret"></i></span>
 237                             </a>
 238                             <ul class="dropdown-menu">
 239                                 <!-- User image -->
 240                                 <li class="user-header bg-light-blue">
 241                                     <img src="../img/avatar3.png" class="img-circle" alt="User Image" />
 242                                     <p>
 243                                         Jane Doe - Web Developer
 244                                         <small>Member since Nov. 2012</small>
 245                                     </p>
 246                                 </li>
 247                                 <!-- Menu Body -->
 248                                 <li class="user-body">
 249                                     <div class="col-xs-4 text-center">
 250                                         <a href="#">Followers</a>
 251                                     </div>
 252                                     <div class="col-xs-4 text-center">
 253                                         <a href="#">Sales</a>
 254                                     </div>
 255                                     <div class="col-xs-4 text-center">
 256                                         <a href="#">Friends</a>
 257                                     </div>
 258                                 </li>
 259                                 <!-- Menu Footer-->
 260                                 <li class="user-footer">
 261                                     <div class="pull-left">
 262                                         <a href="#" class="btn btn-default btn-flat">Profile</a>
 263                                     </div>
 264                                     <div class="pull-right">
 265                                         <a href="#" class="btn btn-default btn-flat">Sign out</a>
 266                                     </div>
 267                                 </li>
 268                             </ul>
 269                         </li>
 270                     </ul>
 271                 </div>
 272             </nav>
 273         </header>
 274         <div class="wrapper row-offcanvas row-offcanvas-left">
 275             <!-- Left side column. contains the logo and sidebar -->
 276             <aside class="left-side sidebar-offcanvas">
 277                 <!-- sidebar: style can be found in sidebar.less -->
 278                 <section class="sidebar">
 279                     <!-- Sidebar user panel -->
 280                     <div class="user-panel">
 281                         <div class="pull-left image">
 282                             <img src="../img/avatar3.png" class="img-circle" alt="User Image" />
 283                         </div>
 284                         <div class="pull-left info">
 285                             <p>Hello, Jane</p>
 286
 287                             <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
 288                         </div>
 289                     </div>
 290                     <!-- search form -->
 291                     <form action="#" method="get" class="sidebar-form">
 292                         <div class="input-group">
 293                             <input type="text" name="q" class="form-control" placeholder="Search..."/>
 294                             <span class="input-group-btn">
 295                                 <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
 296                             </span>
 297                         </div>
 298                     </form>
 299                     <!-- /.search form -->
 300                     <!-- sidebar menu: : style can be found in sidebar.less -->
 301                     <ul class="sidebar-menu">
 302                         <li>
 303                             <a href="../index.html">
 304                                 <i class="fa fa-dashboard"></i> <span>Dashboard</span>
 305                             </a>
 306                         </li>
 307                         <li>
 308                             <a href="widgets.html">
 309                                 <i class="fa fa-th"></i> <span>Widgets</span> <small class="badge pull-right bg-green">new</small>
 310                             </a>
 311                         </li>
 312                         <li class="treeview">
 313                             <a href="#">
 314                                 <i class="fa fa-bar-chart-o"></i>
 315                                 <span>Charts</span>
 316                                 <i class="fa fa-angle-left pull-right"></i>
 317                             </a>
 318                             <ul class="treeview-menu">
 319                                 <li><a href="charts/morris.html"><i class="fa fa-angle-double-right"></i> Morris</a></li>
 320                                 <li><a href="charts/flot.html"><i class="fa fa-angle-double-right"></i> Flot</a></li>
 321                                 <li><a href="charts/inline.html"><i class="fa fa-angle-double-right"></i> Inline charts</a></li>
 322                             </ul>
 323                         </li>
 324                         <li class="treeview">
 325                             <a href="#">
 326                                 <i class="fa fa-laptop"></i>
 327                                 <span>UI Elements</span>
 328                                 <i class="fa fa-angle-left pull-right"></i>
 329                             </a>
 330                             <ul class="treeview-menu">
 331                                 <li><a href="UI/general.html"><i class="fa fa-angle-double-right"></i> General</a></li>
 332                                 <li><a href="UI/icons.html"><i class="fa fa-angle-double-right"></i> Icons</a></li>
 333                                 <li><a href="UI/buttons.html"><i class="fa fa-angle-double-right"></i> Buttons</a></li>
 334                                 <li><a href="UI/sliders.html"><i class="fa fa-angle-double-right"></i> Sliders</a></li>
 335                                 <li><a href="UI/timeline.html"><i class="fa fa-angle-double-right"></i> Timeline</a></li>
 336                             </ul>
 337                         </li>
 338                         <li class="treeview">
 339                             <a href="#">
 340                                 <i class="fa fa-edit"></i> <span>Forms</span>
 341                                 <i class="fa fa-angle-left pull-right"></i>
 342                             </a>
 343                             <ul class="treeview-menu">
 344                                 <li><a href="forms/general.html"><i class="fa fa-angle-double-right"></i> General Elements</a></li>
 345                                 <li><a href="forms/advanced.html"><i class="fa fa-angle-double-right"></i> Advanced Elements</a></li>
 346                                 <li><a href="forms/editors.html"><i class="fa fa-angle-double-right"></i> Editors</a></li>
 347                             </ul>
 348                         </li>
 349                         <li class="treeview">
 350                             <a href="#">
 351                                 <i class="fa fa-table"></i> <span>Tables</span>
 352                                 <i class="fa fa-angle-left pull-right"></i>
 353                             </a>
 354                             <ul class="treeview-menu">
 355                                 <li><a href="tables/simple.html"><i class="fa fa-angle-double-right"></i> Simple tables</a></li>
 356                                 <li><a href="tables/data.html"><i class="fa fa-angle-double-right"></i> Data tables</a></li>
 357                             </ul>
 358                         </li>
 359                         <li class="active">
 360                             <a href="calendar.html">
 361                                 <i class="fa fa-calendar"></i> <span>Calendar</span>
 362                                 <small class="badge pull-right bg-red">3</small>
 363                             </a>
 364                         </li>
 365                         <li>
 366                             <a href="mailbox.html">
 367                                 <i class="fa fa-envelope"></i> <span>Mailbox</span>
 368                                 <small class="badge pull-right bg-yellow">12</small>
 369                             </a>
 370                         </li>
 371                         <li class="treeview">
 372                             <a href="#">
 373                                 <i class="fa fa-folder"></i> <span>Examples</span>
 374                                 <i class="fa fa-angle-left pull-right"></i>
 375                             </a>
 376                             <ul class="treeview-menu">
 377                                 <li><a href="examples/invoice.html"><i class="fa fa-angle-double-right"></i> Invoice</a></li>
 378                                 <li><a href="examples/login.html"><i class="fa fa-angle-double-right"></i> Login</a></li>
 379                                 <li><a href="examples/register.html"><i class="fa fa-angle-double-right"></i> Register</a></li>
 380                                 <li><a href="examples/lockscreen.html"><i class="fa fa-angle-double-right"></i> Lockscreen</a></li>
 381                                 <li><a href="examples/404.html"><i class="fa fa-angle-double-right"></i> 404 Error</a></li>
 382                                 <li><a href="examples/500.html"><i class="fa fa-angle-double-right"></i> 500 Error</a></li>
 383                                 <li><a href="examples/blank.html"><i class="fa fa-angle-double-right"></i> Blank Page</a></li>
 384                             </ul>
 385                         </li>
 386                     </ul>
 387                 </section>
 388                 <!-- /.sidebar -->
 389             </aside>
 390
 391             <!-- Right side column. Contains the navbar and content of the page -->
 392             <aside class="right-side">
 393                 <!-- Content Header (Page header) -->
 394                 <section class="content-header">
 395                     <h1>
 396                         Calendar
 397                         <small>Control panel</small>
 398                     </h1>
 399                     <ol class="breadcrumb">
 400                         <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
 401                         <li class="active">Calendar</li>
 402                     </ol>
 403                 </section>
 404
 405                 <!-- Main content -->
 406                 <section class="content">
 407
 408
 409                     <div class="row">
 410                         <div class="col-md-3">
 411                             <div class="box box-primary">
 412                                 <div class="box-header">
 413                                     <h4 class="box-title">Draggable Events</h4>
 414                                 </div>
 415                                 <div class="box-body">
 416                                     <!-- the events -->
 417                                     <div id='external-events'>
 418                                         <div class='external-event bg-green'>Lunch</div>
 419                                         <div class='external-event bg-red'>Go home</div>
 420                                         <div class='external-event bg-aqua'>Do homework</div>
 421                                         <div class='external-event bg-yellow'>Work on UI design</div>
 422                                         <div class='external-event bg-navy'>Sleep tight</div>
 423                                         <p>
 424                                             <input type='checkbox' id='drop-remove' /> <label for='drop-remove'>remove after drop</label>
 425                                         </p>
 426                                     </div>
 427                                 </div><!-- /.box-body -->
 428                             </div><!-- /. box -->
 429                             <div class="box box-primary">
 430                                 <div class="box-header">
 431                                     <h3 class="box-title">Create Event</h3>
 432                                 </div>
 433                                 <div class="box-body">
 434                                     <div class="btn-group" style="width: 100%; margin-bottom: 10px;">
 435                                         <button type="button" id="color-chooser-btn" class="btn btn-danger btn-block btn-sm dropdown-toggle" data-toggle="dropdown">Color <span class="caret"></span></button>
 436                                         <ul class="dropdown-menu" id="color-chooser">
 437                                             <li><a class="text-green" href="#"><i class="fa fa-square"></i> Green</a></li>
 438                                             <li><a class="text-blue" href="#"><i class="fa fa-square"></i> Blue</a></li>
 439                                             <li><a class="text-navy" href="#"><i class="fa fa-square"></i> Navy</a></li>
 440                                             <li><a class="text-yellow" href="#"><i class="fa fa-square"></i> Yellow</a></li>
 441                                             <li><a class="text-orange" href="#"><i class="fa fa-square"></i> Orange</a></li>
 442                                             <li><a class="text-aqua" href="#"><i class="fa fa-square"></i> Aqua</a></li>
 443                                             <li><a class="text-red" href="#"><i class="fa fa-square"></i> Red</a></li>
 444                                             <li><a class="text-fuchsia" href="#"><i class="fa fa-square"></i> Fuchsia</a></li>
 445                                             <li><a class="text-purple" href="#"><i class="fa fa-square"></i> Purple</a></li>
 446                                         </ul>
 447                                     </div><!-- /btn-group -->
 448                                     <div class="input-group">
 449                                         <input id="new-event" type="text" class="form-control" placeholder="Event Title">
 450                                         <div class="input-group-btn">
 451                                             <button id="add-new-event" type="button" class="btn btn-default btn-flat">Add</button>
 452                                         </div><!-- /btn-group -->
 453                                     </div><!-- /input-group -->
 454                                 </div>
 455                             </div>
 456                         </div><!-- /.col -->
 457                         <div class="col-md-9">
 458                             <div class="box box-primary">
 459                                 <div class="box-body no-padding">
 460                                     <!-- THE CALENDAR -->
 461                                     <div id="calendar"></div>
 462                                 </div><!-- /.box-body -->
 463                             </div><!-- /. box -->
 464                         </div><!-- /.col -->
 465                     </div><!-- /.row -->
 466
 467
 468                 </section><!-- /.content -->
 469             </aside><!-- /.right-side -->
 470         </div><!-- ./wrapper -->
 471
 472
 473         <!-- jQuery 2.0.2 -->
 474         <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
 475         <!-- jQuery UI 1.10.3 -->
 476         <script src="../js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
 477         <!-- Bootstrap -->
 478         <script src="../js/bootstrap.min.js" type="text/javascript"></script>
 479         <!-- AdminLTE App -->
 480         <script src="../js/AdminLTE/app.js" type="text/javascript"></script>
 481         <!-- fullCalendar -->
 482         <script src="../js/plugins/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
 483         <!-- Page specific script -->
 484         <script type="text/javascript">
 485             $(function() {
 486
 487                 /* initialize the external events
 488                  -----------------------------------------------------------------*/
 489                 function ini_events(ele) {
 490                     ele.each(function() {
 491
 492                         // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
 493                         // it doesn't need to have a start or end
 494                         var eventObject = {
 495                             title: $.trim($(this).text()) // use the element's text as the event title
 496                         };
 497
 498                         // store the Event Object in the DOM element so we can get to it later
 499                         $(this).data('eventObject', eventObject);
 500
 501                         // make the event draggable using jQuery UI
 502                         $(this).draggable({
 503                             zIndex: 1070,
 504                             revert: true, // will cause the event to go back to its
 505                             revertDuration: 0  //  original position after the drag
 506                         });
 507
 508                     });
 509                 }
 510                 ini_events($('#external-events div.external-event'));
 511
 512                 /* initialize the calendar
 513                  -----------------------------------------------------------------*/
 514                 //Date for the calendar events (dummy data)
 515                 var date = new Date();
 516                 var d = date.getDate(),
 517                         m = date.getMonth(),
 518                         y = date.getFullYear();
 519                 $('#calendar').fullCalendar({
 520                     header: {
 521                         left: 'prev,next today',
 522                         center: 'title',
 523                         right: 'month,agendaWeek,agendaDay'
 524                     },
 525                     buttonText: {//This is to add icons to the visible buttons
 526                         prev: "<span class='fa fa-caret-left'></span>",
 527                         next: "<span class='fa fa-caret-right'></span>",
 528                         today: 'today',
 529                         month: 'month',
 530                         week: 'week',
 531                         day: 'day'
 532                     },
 533                     //Random default events
 534                     events: [
 535                         {
 536                             title: 'All Day Event',
 537                             start: new Date(y, m, 1),
 538                             backgroundColor: "#f56954", //red
 539                             borderColor: "#f56954" //red
 540                         },
 541                         {
 542                             title: 'Long Event',
 543                             start: new Date(y, m, d - 5),
 544                             end: new Date(y, m, d - 2),
 545                             backgroundColor: "#f39c12", //yellow
 546                             borderColor: "#f39c12" //yellow
 547                         },
 548                         {
 549                             title: 'Meeting',
 550                             start: new Date(y, m, d, 10, 30),
 551                             allDay: false,
 552                             backgroundColor: "#0073b7", //Blue
 553                             borderColor: "#0073b7" //Blue
 554                         },
 555                         {
 556                             title: 'Lunch',
 557                             start: new Date(y, m, d, 12, 0),
 558                             end: new Date(y, m, d, 14, 0),
 559                             allDay: false,
 560                             backgroundColor: "#00c0ef", //Info (aqua)
 561                             borderColor: "#00c0ef" //Info (aqua)
 562                         },
 563                         {
 564                             title: 'Birthday Party',
 565                             start: new Date(y, m, d + 1, 19, 0),
 566                             end: new Date(y, m, d + 1, 22, 30),
 567                             allDay: false,
 568                             backgroundColor: "#00a65a", //Success (green)
 569                             borderColor: "#00a65a" //Success (green)
 570                         },
 571                         {
 572                             title: 'Click for Google',
 573                             start: new Date(y, m, 28),
 574                             end: new Date(y, m, 29),
 575                             url: 'http://google.com/',
 576                             backgroundColor: "#3c8dbc", //Primary (light-blue)
 577                             borderColor: "#3c8dbc" //Primary (light-blue)
 578                         }
 579                     ],
 580                     editable: true,
 581                     droppable: true, // this allows things to be dropped onto the calendar !!!
 582                     drop: function(date, allDay) { // this function is called when something is dropped
 583
 584                         // retrieve the dropped element's stored Event Object
 585                         var originalEventObject = $(this).data('eventObject');
 586
 587                         // we need to copy it, so that multiple events don't have a reference to the same object
 588                         var copiedEventObject = $.extend({}, originalEventObject);
 589
 590                         // assign it the date that was reported
 591                         copiedEventObject.start = date;
 592                         copiedEventObject.allDay = allDay;
 593                         copiedEventObject.backgroundColor = $(this).css("background-color");
 594                         copiedEventObject.borderColor = $(this).css("border-color");
 595
 596                         // render the event on the calendar
 597                         // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
 598                         $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
 599
 600                         // is the "remove after drop" checkbox checked?
 601                         if ($('#drop-remove').is(':checked')) {
 602                             // if so, remove the element from the "Draggable Events" list
 603                             $(this).remove();
 604                         }
 605
 606                     }
 607                 });
 608
 609                 /* ADDING EVENTS */
 610                 var currColor = "#f56954"; //Red by default
 611                 //Color chooser button
 612                 var colorChooser = $("#color-chooser-btn");
 613                 $("#color-chooser > li > a").click(function(e) {
 614                     e.preventDefault();
 615                     //Save color
 616                     currColor = $(this).css("color");
 617                     //Add color effect to button
 618                     colorChooser
 619                             .css({"background-color": currColor, "border-color": currColor})
 620                             .html($(this).text()+' <span class="caret"></span>');
 621                 });
 622                 $("#add-new-event").click(function(e) {
 623                     e.preventDefault();
 624                     //Get value and make sure it is not null
 625                     var val = $("#new-event").val();
 626                     if (val.length == 0) {
 627                         return;
 628                     }
 629
 630                     //Create event
 631                     var event = $("<div />");
 632                     event.css({"background-color": currColor, "border-color": currColor, "color": "#fff"}).addClass("external-event");
 633                     event.html(val);
 634                     $('#external-events').prepend(event);
 635
 636                     //Add draggable funtionality
 637                     ini_events(event);
 638
 639                     //Remove event from text input
 640                     $("#new-event").val("");
 641                 });
 642             });
 643         </script>
 644
 645     </body>
 646 </html>