I'm trying to insert a calendar into HTML , but this calendar is looking bad. The calendar is the green one that is on this page: link
Only that I only appear the tasks and the days do not. What am I doing wrong?
CODE I HAVE:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="CegosElearningReports.Report.Home" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cegos Analytics| Home Page</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="../../dist/css/skins/skin-black.min.css">
<link rel="stylesheet" href="../../plugins/iCheck/flat/blue.css">
<!-- Morris chart -->
<link rel="stylesheet" href="../../plugins/morris/morris.css">
<!-- jvectormap -->
<link rel="stylesheet" href="../../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<!-- Date Picker -->
<link rel="stylesheet" href="../../plugins/datepicker/datepicker3.css">
<!-- Daterange picker -->
<link rel="stylesheet" href="../../plugins/daterangepicker/daterangepicker-bs3.css">
<!-- bootstrap wysihtml5 - text editor -->
<link rel="stylesheet" href="../../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script><scriptsrc="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.auto-style1 {
width: 235px;
height: 71px;
float: none;
}
.auto-style2 {
color: #0066CC;
}
.auto-style3 {
font-size: medium;
}
</style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<form id="form1" runat="server">
<!-- Site wrapper -->
<div class="wrapper">
<header class="main-header">
<!-- Logo -->
<a href="../../index2.html" class="logo">
<span class="logo-lg"><b>
<img alt="aa" class="auto-style1" longdesc="aa" src="../Images/^082594892CD6A1E2D2CF4B7361463D84FEF2B4C6FEBD2707B5^pimgpsh_fullsize_distr.png" /></b></span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="/Images/user_settings.png" class="user-image" alt="User Image">
<span class="hidden-xs">User</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="/Images/user_settings.png" class="img-circle" alt="User Image">
<%--<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2012</small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="row">
<div class="col-xs-4 text-center">
<a href="#">Followers</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Sales</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Friends</a>
</div>
</div>
<!-- /.row -->
</li>--%>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">Profile</a>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">Sign out</a>
</div>
</li>
</ul>
</li>
<!-- Control Sidebar Toggle Button -->
<%--<li>
<a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
</li>--%>
</ul>
</div>
</nav>
</header>
<!-- =============================================== -->
<!-- Left side column. contains the sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<%-- <div class="pull-left image">--%>
<img src="/Images/user_settings.png" class="img-circle" alt="User Image">
<span class="fa-inverse">User</span>
<%--</div>--%>
</div>
<!-- search form -->
<!-- /.search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="treeview">
<a href="#">
<img src="/Images/home_menu.png" class="img-circle" alt="Home"><br />
<span class="auto-style3">Home</span>
</a>
<ul class="treeview-menu">
</ul>
</li>
<li class="treeview">
<a href="#">
<img src="/Images/graphic_menu.png" class="img-circle" alt="Admin Tools"><br />
<span>Admin Tools</span>
</a>
</li>
<li>
<li class="treeview">
<a href="../widgets.html">
<img src="/Images/graphic_menu.png" class="img-circle" alt="Reports"><br />
<span>Reports</span>
</a>
</li>
<li class="treeview">
<a href="#">
<img src="/Images/graphic_menu.png" class="img-circle" alt="X-Domain Reports"><br />
<span>X-Domain Reports</span>
</a>
</li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- =============================================== -->
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h3>
Home</h3>
</section>
<!-- Main content -->
<section class="content">
<div class="col-md-4">
<div class="box box-widget widget-user-2">
<!-- Add the bg color to the header using any of the bg-* classes -->
<div class="widget-user-header bg-default">
<div class="widget-user-image">
</div>
<!-- /.widget-user-image -->
<h3 class="widget-user-username">
<img class="img-circle" src="/Images/user_settings.png" alt="User Avatar"> </h3>
<h3 class="widget-user-username"> User</h3>
<h5 class="widget-user-desc"> Role</h5>
</div>
<div class="box-footer no-padding">
<ul class="nav nav-stacked">
<li> <strong> Last Update:</strong></li>
<li> <br />
<asp:Button ID="Button1" runat="server" Text="Change Password" Font-Bold="True" Width="134px"/>
<asp:Button ID="Button2" runat="server" Text="Sign Out" Font-Bold="True"/>
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="bower_components/jquery/dist/jquery.min.js"></script>
<script src="http://momentjs.com/downloads/moment.js"></script><linkrel='stylesheet'href='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.css'/><scriptsrc='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.js'></script><divid='calendar'></div><script>$(document).ready(function(){//pageisnowready,initializethecalendar...$('#calendar').fullCalendar({//putyouroptionsandcallbackshere})});</script><divclass="box box-solid box-default">
<div class="box-header">
<i class="fa fa-calendar"></i>
<h3 class="box-title">Calendar</h3>
<!-- tools box -->
<div class="pull-right box-tools">
<!-- button with a dropdown -->
<div class="btn-group">
<button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bars"></i></button>
<ul class="dropdown-menu pull-right" role="menu">
<li><a href="#">Add new event</a></li>
<li><a href="#">Clear events</a></li>
<li class="divider"></li>
<li><a href="#">View calendar</a></li>
</ul>
</div>
<button type="button" class="btn btn-success btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-success btn-sm" data-widget="remove"><i class="fa fa-times"></i>
</button>
</div>
<!-- /. tools -->
</div>
<!-- /.box-header -->
<div class="box-body no-padding">
<!--The calendar -->
<div id="calendar" style="width: 100%"></div>
</div>
<!-- /.box-body -->
<div class="box-footer text-black">
<div class="row">
<div class="col-sm-6">
<!-- Progress bars -->
<div class="clearfix">
<span class="pull-left">Task #1</span>
<small class="pull-right">90%</small>
</div>
<div class="progress xs">
<div class="progress-bar progress-bar-green" style="width: 90%;"></div>
</div>
<div class="clearfix">
<span class="pull-left">Task #2</span>
<small class="pull-right">70%</small>
</div>
<div class="progress xs">
<div class="progress-bar progress-bar-green" style="width: 70%;"></div>
</div>
</div>
<!-- /.col -->
<div class="col-sm-6">
<div class="clearfix">
<span class="pull-left">Task #3</span>
<small class="pull-right">60%</small>
</div>
<div class="progress xs">
<div class="progress-bar progress-bar-green" style="width: 60%;"></div>
</div>
<div class="clearfix">
<span class="pull-left">Task #4</span>
<small class="pull-right">40%</small>
</div>
<div class="progress xs">
<div class="progress-bar progress-bar-green" style="width: 40%;"></div>
</div>
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
</div>
</div>
<div class="col-md-6">
<!-- Horizontal Form -->
<div class="box box-default" style="text-align: justify">
<div class="box-header with-border">
<h3 class="box-title" style="font-size: xx-large"><strong>Welcome</strong></h3>
</div>
<div class="text-justify">
<div style="float: left; width: 520px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce nisi urna, elementum sed arcu venenatis, ultricies commodo
enim.
Suspendisse sit amet nibh iaculis purus blandit
mattis vitae vitae enim.
Pellentesque mauris mauris,
<br />
fermentum a libero id, viverra dapibus elit.
Morbi malesuada nec sem ut tempus. Praesent nec risus nibh.Pellentesque lobortis, quam vitae ornare convallis,
<br />
risus leo pellentesque diam, eget rhoncus augue turpis sit amet ante.
</div>
<div style="float:right;">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="/Images/Cegos Slider1.jpg" alt="First slide">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="/Images/Cegos Slider2.jpg" alt="Second slide">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="/Images/Cegos Slider3.jpg" alt="Third slide">
<div class="carousel-caption">
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="fa fa-angle-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="fa fa-angle-right"></span>
</a>
</div>
</div>
<!-- /.box-body -->
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<!-- /.box -->
</div>
<%--<br />--%>
<!-- TO DO List -->
<div class="box box-default">
<div class="box-header">
<i class="ion ion-clipboard"></i>
<h3 class="box-title">To Do List</h3>
<div class="box-tools pull-right">
<ul class="pagination pagination-sm inline">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>
<!-- /.box-header -->
<div class="box-body">
<ul class="todo-list">
<li>
<!-- drag handle -->
<span class="handle">
<i class="fa fa-ellipsis-v"></i>
<i class="fa fa-ellipsis-v"></i>
</span>
<!-- checkbox -->
<input type="checkbox" value="" name="">
<!-- todo text -->
<span class="text"></span>
<!-- Emphasis label -->
<small class="label label-danger"><i class="fa fa-clock-o"></i></small>
<!-- General tools such as edit or delete-->
<div class="tools">
<i class="fa fa-edit"></i>
<i class="fa fa-trash-o"></i>
</div>
</li>
<li>
<span class="handle">
<i class="fa fa-ellipsis-v"></i>
<i class="fa fa-ellipsis-v"></i>
</span>
<input type="checkbox" value="" name="">
<span class="text"></span>
<small class="label label-info"><i class="fa fa-clock-o"></i></small>
<div class="tools">
<i class="fa fa-edit"></i>
<i class="fa fa-trash-o"></i>
</div>
</li>
<li>
<span class="handle">
<i class="fa fa-ellipsis-v"></i>
<i class="fa fa-ellipsis-v"></i>
</span>
<input type="checkbox" value="" name="">
<span class="text"></span>
<small class="label label-warning"><i class="fa fa-clock-o"></i></small>
<div class="tools">
<i class="fa fa-edit"></i>
<i class="fa fa-trash-o"></i>
</div>
</li>
<li>
<span class="handle">
<i class="fa fa-ellipsis-v"></i>
<i class="fa fa-ellipsis-v"></i>
</span>
<input type="checkbox" value="" name="">
<span class="text"></span>
<small class="label label-success"><i class="fa fa-clock-o"></i></small>
<div class="tools">
<i class="fa fa-edit"></i>
<i class="fa fa-trash-o"></i>
</div>
</li>
<li>
<span class="handle">
<i class="fa fa-ellipsis-v"></i>
<i class="fa fa-ellipsis-v"></i>
</span>
<input type="checkbox" value="" name="">
<span class="text"></span>
<small class="label label-primary"><i class="fa fa-clock-o"></i></small>
<div class="tools">
<i class="fa fa-edit"></i>
<i class="fa fa-trash-o"></i>
</div>
</li>
<li>
<span class="handle">
<i class="fa fa-ellipsis-v"></i>
<i class="fa fa-ellipsis-v"></i>
</span>
<input type="checkbox" value="" name="">
<span class="text"></span>
<small class="label label-default"><i class="fa fa-clock-o"></i></small>
<div class="tools">
<i class="fa fa-edit"></i>
<i class="fa fa-trash-o"></i>
</div>
</li>
</ul>
</div>
<!-- /.box-body -->
<div class="box-footer clearfix no-border">
<button type="button" class="btn btn-default pull-right"><i class="fa fa-plus"></i> Add item</button>
</div>
</div>
<!-- /.box -->
<!-- /.col -->
</div>
</div>
<div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- /.box -->
<%-- <div class="box box-primary">
<div class="box-header">
<i class="ion ion-clipboard"></i>--%>
<!-- /.box -->
</section>
<!-- /.content -->
<!-- /.content-wrapper -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.0
</div>
<strong> Copyright © 2016-2017 <span class="auto-style2">Cegos Analytics</span>.</strong> All rights
reserved.
</footer>
<%-- <!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Create the tabs -->
<!-- Tab panes -->
<div class="tab-content">
<!-- Home tab content -->
<!-- /.tab-pane -->
<!-- Stats tab content -->
<div class="tab-pane" id="control-sidebar-stats-tab"></div>
<!-- /.tab-pane -->
<!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab">
<!-- /.form-group -->
</div>
<!-- /.tab-pane -->
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>--%>
<!-- ./wrapper -->
<!-- jQuery 2.2.0 -->
<script src="../../plugins/jQuery/jQuery-2.2.0.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="../../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../../plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>
</form>
</body>
</html>