Material Dashboard

index.html

<div id="wrapper">

  <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
      <a class="navbar-brand" href="index.html">写的东西</a>
    </div>

    <ul class="nav navbar-top-links navbar-right">

      <!-- Messages -->
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
        </a>
        <ul class="dropdown-menu dropdown-messages">
          <li>
            <a href="#">
              <div>
                <strong>Invite</strong>
                <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
              </div>
              <div><strong>Invite</strong> Invite to work on JK Rowling's Universe, 'Harry Potter'</div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a href="#">
              <div>
                <strong>Terry Pratchett</strong>
                <span class="pull-right text-muted">
                  <em>Yesterday</em>
                </span>
              </div>
              <div><strong>No New Novel</strong> As stated before</div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a class="text-center" href="#">
              <strong>Read All Messages</strong>
              <i class="fa fa-angle-right"></i>
            </a>
          </li>
        </ul>

      </li>

      <!-- Goals -->
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="fa fa-list fa-fw"></i> <i class="fa fa-caret-down"></i>
        </a>
        <ul class="dropdown-menu dropdown-tasks">
          <li>
            <a href="#">
              <div>
                <p>
                  <strong>Scenes with Rough Drafts</strong>
                  <span class="pull-right text-muted">40% Complete</span>
                </p>
                <div class="progress progress-striped active">
                  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                    <span class="sr-only">40% Complete (success)</span>
                  </div>
                </div>
              </div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a href="#">
              <div>
                <p>
                  <strong>Completed Character Data</strong>
                  <span class="pull-right text-muted">20% Complete</span>
                </p>
                <div class="progress progress-striped active">
                  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                    <span class="sr-only">20% Complete</span>
                  </div>
                </div>
              </div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a href="#">
              <div>
                <p>
                  <strong>Research with Sources</strong>
                  <span class="pull-right text-muted">60% Complete</span>
                </p>
                <div class="progress progress-striped active">
                  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                    <span class="sr-only">60% Complete (warning)</span>
                  </div>
                </div>
              </div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a class="text-center" href="#">
              <strong>See All Tasks</strong>
              <i class="fa fa-angle-right"></i>
            </a>
          </li>
        </ul>
      </li>

      <!-- Universes -->
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="fa fa-globe fa-fw"></i> <i class="fa fa-caret-down"></i>
        </a>
        <ul class="dropdown-menu dropdown-alerts">
          <li>
            <h5>Enter a Universe</h5></li>
          <li>
            <a href="#">
              <div>
                Harry Potter
                <span class="pull-right text-muted small">Guest</span>
              </div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a href="#">
              <div>
                Lord of the Rings
              </div>
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a href="#" class="active">
            Sherlock的首页
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a class="text-center" href="#">
              <i class="fa fa-plus"></i>
        <strong>添加一个 Universe</strong>
            </a>
          </li>
        </ul>
        <!-- /.dropdown-alerts -->
      </li>

      <!-- User Settings -->
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
        </a>
        <ul class="dropdown-menu dropdown-user">
          <li><a href="#"><i class="fa fa-user fa-fw"></i> 用户配置文件</a>
          </li>
          <li><a href="#"><i class="fa fa-gear fa-fw"></i> 设置</a>
          </li>
          <li class="divider"></li>
          <li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> 注销</a>
          </li>
        </ul>
        <!-- /.dropdown-user -->
      </li>

    </ul>
</nav>
  <nav>
  <div class="navbar-default sidebar" role="navigation">
      <div class="sidebar-nav navbar-collapse">
        <ul class="nav" id="side-menu" role="tablist">
          <li>
            <a href="#Details" aria-controls="Details" role="tab" data-toggle="tab">
              <i class="fa fa-dashboard fa-fw"></i> Universe Details
            </a>
          </li>
          <li>
            <a href="#Characters" aria-controls="Characters" role="tab" data-toggle="tab">
              <i class="fa fa-users fa-fw"></i> 字符
            </a>
          </li>
          <li>
            <a href="#Settings" aria-controls="Settings" role="tab" data-toggle="tab">
              <i class="fa fa-map-marker fa-fw"></i> Settings
            </a>
          </li>
          <li>
            <a href="#Notes" aria-controls="Notes" role="tab" data-toggle="tab">
              <i class="fa fa-tags fa-fw"></i> Notes
            </a>
          </li>
          <li>
            <a data-toggle="collapse" href="#storySidebarCollapse" aria-expanded="false" aria-controls="storySidebarCollapse" href="#">
              <i class="fa fa-book fa-fw"></i> Tell a Story
            </a>
            <ul class="nav nav-second-level collapse" id="storySidebarCollapse">
              <li>
                <a href="#Timeline" aria-controls="Stories" role="tab" data-toggle="tab">
                  <i class="fa fa-calendar-o fa-fw"></i> Timeline
                </a>
              </li>
              <li>
                <a href="#Stories" aria-controls="Stories" role="tab" data-toggle="tab">
                  <i class="fa fa-quote-left fa-fw"></i> Plot it Out
                </a>
              </li>
            </ul>
          </li>

        </ul>
      </div>
    </div>
  </nav>
  
  

  <div id="page-wrapper">
    <div class="container-fluid">

      <div class="tab-content">

        <div role="tabpanel" class="tab-pane" id="Details">
          <h1>Details</h1>

          <div class="row">
            <div class="col-md-4">
              <div class="panel panel-graph">
                <div class="panel-body">
                  <div id="genderChart"></div>
                </div>
                <div class="panel-heading text-center">
                  <h3>Gender Breakdown</h3>
                </div>
              </div>
            </div>

            <div class="col-md-4">
              <div class="panel panel-graph">
                <div class="panel-body">
                  <div id="countChart"></div>
                </div>
                <div class="panel-heading text-center">
                  <h3>General Stats</h3>
                </div>
              </div>
            </div>

            <div class="col-md-4">
              <div class="panel panel-big-number">
                <div class="panel-body">
                  <h1>1500</h1>
                </div>
                <div class="panel-heading">
                  <h3>Word Count</h3>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-4">
              <div class="panel panel-default">
                <div class="panel-body">

                </div>
                <div class="panel-heading">

                </div>
              </div>
            </div>
          </div>
        </div>

        <div role="tabpanel" class="tab-pane" id="Characters">
          <h1>Characters</h1>

          <div class="row">
            <div class="col-sm-3">
              <div class="white-panel pn index-panel">
                <a class="highlight" href="#New">New</a>

                <a href="#">
                  <span>Irene Adler</span>
                </a>

                <a href="#">
                  <span>Dr. John Watson</span>
                </a>

                <a href="#" class="active">
                  <span>Sherlock Holmes</span>
                  <i class="fa fa-pencil highlight"></i>
                </a>


              </div>
            </div>
            <div class="col-sm-9">
              <div class="panel panel-details">
                <div class="panel-heading">
                  Sherlock Holmes
                </div>
                <div class="panel-body">
                  <div class="detail-section" data-bind="template: { name: 'HtmlStringDisplay', data: { name: 'Motivation', contents: Motivation} }">
                    <h2></h2>
                  </div>
                  <div class="detail-section" data-bind="template: { name: 'HtmlStringDisplay', data: { name: 'Apperance', contents: Apperance} }">
                    <h3>Apperance</h3>

                    <p><b>Tall & Gaunt</b></p>
                    <ul>
                      <li> He measured 6 feet or over 6 feet but he was so lean that he seemed even taller.</li>
                      <li> He had a tall, gaunt figure made even gaunter and taller by his long grey travelling-cloak and close-fitting cloth cap.</li>
                      <li> He was a tall, thin man, gaunt man of sixty.</li>
                      <li> He had a thin, eager face.</li>
                      <li> He had a thin, sinewy arm, a long, thin, nervous arm</li>
                      <li> He had a long, thin form.</li>
                      <li> He had long, thin fingers. a long, thin fore-finger</li>
                      <li> He had a long, thin nose.</li>
                    </ul>
                    <p><b>Features</b></p>
                    <ul>
                      <li> He had a dolichocephalic skull with well-marked supra-orbital development.</li>
                      <li> His hair were black.</li>
                      <li> He had heavy tufted brows, heavy, dark brows, bushy eyebrows. </li>
                      <li> He had a thin hawk-like nose.</li>
                      <li> He had thin and firm lips.</li>
                      <li> He had steady grey eyes. particularly sharp and piercing, with a far-away, introspective look when he was exerting his full powers. .</li>
                    </ul>
                    <p><b>Voice</b></p>
                    <ul>
                      <li>他很快，很高，有点刺耳的声音</li>
                    </ul>
                  </div>
                  <div class="detail-section" data-bind="template: { name: 'HtmlStringDisplay', data: { name: 'Mannerisms', contents: Mannerisms} }">
                    <h3>言谈举止</h3>
                    <p>Bit of an arrogant ass, actually. At least in <i>literally</i> every movie adaptation that exists.</p>
                  </div>
                  <div class="detail-section" data-bind="template: { name: 'HtmlStringDisplay', data: { name: 'Occupation', contents: Occupation} }">
                    <h3>职业</h3>
                    <p>Oh, he's a consulting detective. So he advises Scotland Yard when they can't solve cases. This in no way gives him a bloated ego at allll.</p>
                  </div>

                  <!-- ko if: Relationships().length > 0-->
                  <h4>关系</h4>
                  <div>
                    <div>
                      <i class="fa fa-users"></i> Sherlock Holmes is partners with John Watson
                    </div>
                    <div>
                      <i class="fa fa-users"></i> Sherlock Holmes is the tennant of Mrs. Hudson
                    </div>
                  </div>
                  <!-- /ko-->
                </div>
              </div>
            </div>
          </div>

        </div>

        <div role="tabpanel" class="tab-pane" id="Settings">
          <h1>设置</h1>

          <div class="row">
            <div class="col-sm-3">
              <div class="white-panel pn index-panel">
                <a class="highlight" href="#New">New</a>


                <a href="#" class="active">
                  <span>Scotland Yard</span>
                  <i class="fa fa-pencil highlight"></i>
                </a>

                <a href="#">
                  <span>221 Baker St</span>
                </a>


              </div>
            </div>
            <div class="col-sm-9">
              <div class="panel panel-edit">
                <div class="panel-heading">
                  苏格兰场

                </div>
                <div class="panel-body">
                  <div class="row">
                    <div class="col-md-6">
                      <div data-bind="template: { name: 'TextEditor', data: { Name: 'Name', Contents: Name} }">
                        <div class="form-group">
                          <label class="sr-only">Name</label>
                          <input type="text" class="form-control" placeholder="Name" />
                        </div>
                      </div>
                    </div>

                    <div class="col-md-6">
                      <div class="form-group">
                        <label class="sr-only">超级设置</label>
                        <div class="input-group">
                          <select class="form-control" data-bind="options: $root.Index,
                                  value: SuperSettingId,
                                  optionsText: 'value',
                                  optionsValue: 'key',
                                  optionsCaption: '-No Super Setting-'
                                  "></select>
                          <span class="input-group-addon">
                            <i class="fa fa-question-circle" 
                               data-toggle="popover" 
                                data-placement="left"
                               title="Super Settings" 
                               data-content="And here's some amazing content. It's very engaging. Right?"></i>  
                          </span>
                        </div>


                      </div>
                    </div>
                  </div>

                  <div>
                    <!-- Nav tabs -->
                    <div class="form-group">
                      <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active">
                          <a href="#Descript" data-bind="attr: { 'href' : '#Description' + SettingId()}" role="tab" data-toggle="tab">描述</a>
                        </li>
                        <li role="presentation">
                          <a href="#History" data-bind="attr: { 'href' : '#History' + SettingId()}" role="tab" data-toggle="tab">History</a>
                        </li>
                      </ul>
                    </div>

                    <!-- Tab panes -->
                    <div class="tab-content">
                      <div id="Descript" role="tabpanel" class="tab-pane active">
                        <div data-bind="template: { name: 'RichTextEditor', data: { Name: 'Description', Contents: Description, id: 'EditApperance'} }">
                          <textarea id="descript" class="ckedit">
                            <p><b>地址</b>: 新苏格兰场，sw1h 0bg 8-10百老汇，伦敦，英国
                            </p>
                          </textarea>
                        </div>
                      </div>
                      <div id="History" role="tabpanel" data-bind="attr: { 'id' : 'History' + SettingId()}" role="tabpanel" class="tab-pane">
                        <div data-bind="template: { name: 'RichTextEditor', data: { Name: 'History', Contents: History, id: 'EditMannerisms'} }">
                          <textarea id="history" class="ckedit">
                            <p>Scotland Yard (officially New Scotland Yard) is a metonym for the headquarters of the Metropolitan Police Service, the territorial police force responsible for policing most of London.</p>

<p>The name derives from the location of the original Metropolitan Police headquarters at 4 Whitehall Place, which had a rear entrance on a street called Great Scotland Yard.[1] The Scotland Yard entrance became the public entrance to the police station, and over time the street and the Metropolitan Police became synonymous. The New York Times wrote in 1964 that just as Wall Street gave its name to New York's financial district, Scotland Yard became the name for police activity in London.</p>
                          </textarea>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>

        <div role="tabpanel" class="tab-pane" id="Notes">
          <h1>Notes</h1>
        </div>

        <div role="tabpanel" class="tab-pane active" id="Timeline">
          <div id="calendar"></div>
        </div>

        <div role="tabpanel" class="tab-pane" id="Stories">
          <!-- Scene Bank is for scenes that aren't a part of a story yet, drag and drop into place (?) -->
          <ul class="scene-bank">
            <li>Being chased by a 'hound'</li>
            <li>Taking the Case</li>
            <li>Total fluff - drinking tea</li>
          </ul>

          <div class="row">
            <div class="col-md-2">
              <div class="white-panel pn index-panel">
                <a class="highlight" href="#New">New</a>

                <a href="#" class="active">
                  <span>Hound of the Baskervilles</span>
                </a>

                <a href="#">
                  <span>Study in Scarlet</span>
                </a>

                <a href="#" class="">
                  <span>His Last Bow</span>
                </a>


              </div>

            </div>
            <div class="col-md-3">
              <ul class="timeline">
                <li>
                  <div class="timeline-badge success">
                    <i class="fa fa-check"></i>
                  </div>
                  <div class="timeline-panel">
                    <div class="timeline-heading">
                      <h4 class="timeline-title">
                        First Scene
                      </h4>
                      <p><small class="text-muted"><i class="fa fa-clock-o"></i> 11/1/1915, 2pm</small>
                      </p>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="timeline-badge info">
                    <i class="fa fa-pencil"></i>
                  </div>
                  <div class="timeline-panel">
                    <div class="timeline-heading">
                      <h4 class="timeline-title">
                        Second Scene <i class="fa fa-pencil"></i>
                      </h4>
                      <p><small class="text-muted"><i class="fa fa-clock-o"></i> 11/1/1915, 3pm</small>
                      </p>
                    </div>
                  </div>
                </li>

                <li>
                  <div class="timeline-badge warning">
                    <i class="fa fa-dot-circle-o"></i>
                  </div>
                  <div class="timeline-panel">
                    <div class="timeline-heading">
                      <h4 class="timeline-title">
                        Third Scene
                      </h4>
                      <p><small class="text-muted"><i class="fa fa-clock-o"></i> 11/1/1915, 5pm</small>
                      </p>
                    </div>
                  </div>
                </li>

                <li>
                  <div class="timeline-badge success">
                    <i class="fa fa-check"></i>
                  </div>
                  <div class="timeline-panel">
                    <div class="timeline-heading">
                      <h4 class="timeline-title">
                        Fourth Scene
                      </h4>
                      <p><small class="text-muted"><i class="fa fa-clock-o"></i> 11/1/1915, 5pm</small>
                      </p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="col-md-7">
              <div class="panel panel-edit">
                <div class="panel-heading">
                  Second Scene
                </div>
                <div class="panel-body">
                  <div class="row">
                    <div class="col-md-6">
                      <div>
                        <div class="form-group">
                          <label class="sr-only">Date</label>
                          <input type="text" class="form-control" placeholder="Date" />
                        </div>
                      </div>
                    </div>

                    <div class="col-md-6">
                      <div class="form-group">
                        <label class="sr-only">Setting</label>
                        <select class="form-control">
                          <option></option>
                          <option value="volvo">Scotland Yard</option>
                          <option selected value="saab">221B Baker St</option>
                        </select>
                      </div>


                    </div>
                  </div>
                </div>

                <div>
                  <!-- Nav tabs -->
                  <div class="form-group">
                    <ul class="nav nav-tabs" role="tablist">
                      <li role="presentation" class="active">
                        <a href="#Meta" data-bind="attr: { 'href' : '#Description' + SettingId()}" role="tab" data-toggle="tab">Meta Info</a>
                      </li>
                      <li role="presentation">
                        <a href="#Write" data-bind="attr: { 'href' : '#History' + SettingId()}" role="tab" data-toggle="tab">Write It!</a>
                      </li>
                    </ul>
                  </div>

                  <!-- Tab panes -->
                  <div class="tab-content">
                    <div id="Meta" role="tabpanel" class="tab-pane active">
                      <div data-bind="template: { name: 'RichTextEditor', data: { Name: 'Description', Contents: Description, id: 'EditApperance'} }">
                        <div class="row">
                          <div class="col-sm-4">
                            <h3>Characters Involved</h3>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" value="" checked>
                                Sherlock Holmes
                              </label>
                            </div>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" value="">
                                John Watson
                              </label>
                            </div>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" value="">
                                Mrs. Hudson
                              </label>
                            </div>
                          </div>
                          <div class="col-sm-4">
                            <h3>Characters Involved</h3>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" value="" checked>
                                Sherlock Holmes
                              </label>
                            </div>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" value="">
                                John Watson
                              </label>
                            </div>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" value="">
                                Mrs. Hudson
                              </label>
                            </div>
                          </div>
                          <div class="col-sm-4">
                            <h3>Relevant Notes</h3>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" value="">
                                Research on gunpowder types
                              </label>
                            </div>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" value="">
                                Dog bark links
                              </label>
                            </div>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" value="" checked>
                                Analysis of Sherlock's Tells
                              </label>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div id="Write" role="tabpanel" data-bind="attr: { 'id' : 'History' + SettingId()}" role="tabpanel" class="tab-pane">
                      <div data-bind="template: { name: 'RichTextEditor', data: { Name: 'History', Contents: History, id: 'EditMannerisms'} }">
                        <textarea id="text" class="ckedit">
                            <p>
                                "I have in my pocket a manuscript," said Dr. James Mortimer.
                            </p>
                            <p>
                              "I observed it as you entered the room," said Holmes.
                            </p>
                            <p>
                              "It is an old manuscript."
                            </p>
                            <p>
                              "Early eighteenth century, unless it is a forgery."
                            </p>
                            <p>
                              "How can you say that, sir?"
                            </p>
                            <p>
                              "You have presented an inch or two of it to my examination all the time
                              that you have been talking. It would be a poor expert who could not give
                              the date of a document within a decade or so. You may possibly have read
                              my little monograph upon the subject. I put that at 1730."
                            </p>
                            <p>
                              "The exact date is 1742." Dr. Mortimer drew it from his breast-pocket.
                              "This family paper was committed to my care by Sir Charles Baskerville,
                              whose sudden and tragic death some three months ago created so much
                              excitement in Devonshire. I may say that I was his personal friend as well
                              as his medical attendant. He was a strong-minded man, sir, shrewd,
                              practical, and as unimaginative as I am myself. Yet he took this document
                              very seriously, and his mind was prepared for just such an end as did
                              eventually overtake him."
                            </p>
                            <p>
                              Holmes stretched out his hand for the manuscript and flattened it upon his
                              knee. "You will observe, Watson, the alternative use of the long s and the
                              short. It is one of several indications which enabled me to fix the date."
                            </p>
                          </textarea>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


    </div>

  </div>
</div>
</div>

material-dashboard.markdown

Material Dashboard

A Pen by 杨俊 on CodePen.

License.

script.js

$('[data-toggle="popover"]').popover();

CKEDITOR.replace( 'descript' );
CKEDITOR.replace( 'text' );
CKEDITOR.replace( 'history' );



google.charts.load('current', {
  'packages': ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var options = {
    legend: {
      position: 'none'
    }
  };
  
  
  var genderData = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Male', 7],
    ['Female', 8],
    ['Gender Fluid', 3],
  ]);
  var chart = new google.visualization.PieChart(document.getElementById('genderChart'));
  chart.draw(genderData, options);

  var dataCount = new google.visualization.DataTable();
  
  dataCount.addColumn('string', 'Time of Day');
  dataCount.addColumn('number', 'Motivation Level');

  dataCount.addRows([
    ["Characters", 1],
    ["Settings", 2],
    ["Scenes", 3],
    ["Notes", 4],
    ["Plotlines", 5]
  ]);
  var material = new google.charts.Bar(document.getElementById('countChart'));
  material.draw(dataCount, options);
}


$(document).ready(function() {
		
		$('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,basicWeek,basicDay'
			},
			defaultDate: '2016-05-12',
			editable: true,
			eventLimit: true, // allow "more" link when too many events
			events: [
				{
					title: 'All Day Event',
					start: '2016-05-01'
				},
				{
					title: 'Long Event',
					start: '2016-05-07',
					end: '2016-05-10'
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: '2016-05-09T16:00:00'
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: '2016-05-16T16:00:00'
				},
				{
					title: 'Conference',
					start: '2016-05-11',
					end: '2016-05-13'
				},
				{
					title: 'Meeting',
					start: '2016-05-12T10:30:00',
					end: '2016-05-12T12:30:00'
				},
				{
					title: 'Lunch',
					start: '2016-05-12T12:00:00'
				},
				{
					title: 'Meeting',
					start: '2016-05-12T14:30:00'
				},
				{
					title: 'Happy Hour',
					start: '2016-05-12T17:30:00'
				},
				{
					title: 'Dinner',
					start: '2016-05-12T20:00:00'
				},
				{
					title: 'Birthday Party',
					start: '2016-05-13T07:00:00'
				},
				{
					title: 'Click for Google',
					url: 'http://google.com/',
					start: '2016-05-28'
				}
			]
		});
		
	});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="//cdn.ckeditor.com/4.5.9/standard/ckeditor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>

style.scss

$color-background:    #f8f8f8;

body {
  background-color: color-background;
}

.index-panel a {
    display: block;
    padding-bottom: 15px;
}

#wrapper {
  width: 100%;
}

#page-wrapper {
  padding: 0 15px;
  min-height: 568px;
  background-color: color-background;
}

@media (min-width: 768px) {
  #page-wrapper {
    position: inherit;
    margin: 0 0 0 250px;
    padding: 15px 30px 0 30px;
    border-left: 1px solid #e7e7e7;
  }
}

.navbar-top-links {
  margin-right: 0;
}

.navbar-top-links li {
  display: inline-block;
}

.navbar-top-links li:last-child {
  margin-right: 15px;
}

.navbar-top-links li a {
  padding: 15px;
  min-height: 50px;
}

.navbar-top-links .dropdown-menu li {
  display: block;
}

.navbar-top-links .dropdown-menu li:last-child {
  margin-right: 0;
}

.navbar-top-links .dropdown-menu li a {
  padding: 3px 20px;
  min-height: 0;
}

.navbar-top-links .dropdown-menu li a div {
  white-space: normal;
}

.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
  width: 310px;
  min-width: 0;
}

.navbar-top-links .dropdown-messages {
  margin-left: 5px;
}

.navbar-top-links .dropdown-tasks {
  margin-left: -59px;
}

.navbar-top-links .dropdown-alerts {
  margin-left: -123px;
}

.navbar-top-links .dropdown-user {
  right: 0;
  left: auto;
}

.sidebar .sidebar-nav.navbar-collapse {
  padding-right: 0;
  padding-left: 0;
}

.sidebar .sidebar-search {
  padding: 15px;
}

.sidebar ul li {
  border-bottom: 1px solid #e7e7e7;
}

.sidebar ul li a.active {
  background-color: #eee;
}

.sidebar .arrow {
  float: right;
}

.sidebar .fa.arrow:before {
  content: "\f104";
}

.sidebar .active > a > .fa.arrow:before {
  content: "\f107";
}

.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
  border-bottom: 0 !important;
}

.sidebar .nav-second-level li a {
  padding-left: 37px;
}

.sidebar .nav-third-level li a {
  padding-left: 52px;
}

@media (min-width: 768px) {
  .sidebar {
    z-index: 1;
    position: absolute;
    width: 250px;
    margin-top: 51px;
    left:0;
  }
  .navbar-top-links .dropdown-messages,
  .navbar-top-links .dropdown-tasks,
  .navbar-top-links .dropdown-alerts {
    margin-left: auto;
  }
}

.btn-outline {
  color: inherit;
  background-color: transparent;
  transition: all .5s;
}

.btn-primary.btn-outline {
  color: #428bca;
}

.btn-success.btn-outline {
  color: #5cb85c;
}

.btn-info.btn-outline {
  color: #5bc0de;
}

.btn-warning.btn-outline {
  color: #f0ad4e;
}

.btn-danger.btn-outline {
  color: #d9534f;
}

.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {
  color: #fff;
}

.chat {
  margin: 0;
  padding: 0;
  list-style: none;
}

.chat li {
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px dotted #999;
}

.chat li.left .chat-body {
  margin-left: 60px;
}

.chat li.right .chat-body {
  margin-right: 60px;
}

.chat li .chat-body p {
  margin: 0;
}

.panel .slidedown .glyphicon,
.chat .glyphicon {
  margin-right: 5px;
}

.chat-panel .panel-body {
  height: 350px;
  overflow-y: scroll;
}

.login-panel {
  margin-top: 25%;
}

.flot-chart {
  display: block;
  height: 400px;
}

.flot-chart-content {
  width: 100%;
  height: 100%;
}

.dataTables_wrapper {
  position: relative;
  clear: both;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  background: 0 0;
}

table.dataTable thead .sorting_asc:after {
  content: "\f0de";
  float: right;
  font-family: fontawesome;
}

table.dataTable thead .sorting_desc:after {
  content: "\f0dd";
  float: right;
  font-family: fontawesome;
}

table.dataTable thead .sorting:after {
  content: "\f0dc";
  float: right;
  font-family: fontawesome;
  color: rgba(50, 50, 50, 0.5);
}

.btn-circle {
  width: 30px;
  height: 30px;
  padding: 6px 0;
  border-radius: 15px;
  text-align: center;
  font-size: 12px;
  line-height: 1.428571429;
}

.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  border-radius: 25px;
  font-size: 18px;
  line-height: 1.33;
}

.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  border-radius: 35px;
  font-size: 24px;
  line-height: 1.33;
}

.show-grid [class^=col-] {
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid #ddd;
  background-color: #eee !important;
}

.show-grid {
  margin: 15px 0;
}

.huge {
  font-size: 40px;
}

.panel-green {
  border-color: #5cb85c;
}

.panel-green .panel-heading {
  border-color: #5cb85c;
  color: #fff;
  background-color: #5cb85c;
}

.panel-green a {
  color: #5cb85c;
}

.panel-green a:hover {
  color: #3d8b3d;
}

.panel-red {
  border-color: #d9534f;
}

.panel-red .panel-heading {
  border-color: #d9534f;
  color: #fff;
  background-color: #d9534f;
}

.panel-red a {
  color: #d9534f;
}

.panel-red a:hover {
  color: #b52b27;
}

.panel-yellow {
  border-color: #f0ad4e;
}

.panel-yellow .panel-heading {
  border-color: #f0ad4e;
  color: #fff;
  background-color: #f0ad4e;
}

.panel-yellow a {
  color: #f0ad4e;
}

.panel-yellow a:hover {
  color: #df8a13;
}

/*Keeps all the timelines right aligned, just the way I want*/
.timeline > li > .timeline-panel {
    width: 90%;
}

.timeline:before
{
    left: 5%;
}

.timeline > li > .timeline-badge {
    left: 5%;
}

.timeline > li > .timeline-panel {
    float: right;
}

.timeline > li > .timeline-panel:before {
    right: auto;
    left: -15px;
    border-right-width: 15px;
    border-left-width: 0;
}

.timeline > li> .timeline-panel:after {
    right: auto;
    left: -14px;
    border-right-width: 14px;
    border-left-width: 0;
}

ul.scene-bank {
    border: solid 1px black;
    border-radius: 5px;
    padding: 10px;
}

ul.scene-bank li:before {
    content: "\f047";
    font: normal normal normal 14px/1 FontAwesome;
    padding:5px;
}

ul.scene-bank li {
    list-style: none;
    display: inline-block;
    border: 1px solid #d4d4d4;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.175);
    box-shadow: 0 1px 6px rgba(0,0,0,0.175);
    padding: 3px;
    margin-left: 1.5%;
    border-radius: 3px;
    width: 30%;
    margin-top:5px; 
    margin-bottom:5px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.1/bootstrap-material-design.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.1/fullcalendar.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.1/fullcalendar.js" rel="stylesheet" />
<link href="http://blackrockdigital.github.io/startbootstrap-sb-admin-2/dist/css/timeline.css" rel="stylesheet" />