index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Calendar</title>
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/cover.css"/>
    
    <link rel="stylesheet" type="text/css" href="css/calendar.css"/>
    <script type="text/javascript" src="lib/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/calendar.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</head>
<body>

<div class="site-wrapper">

      <div class="site-wrapper-inner">

        <div class="cover-container container">

          <div class="masthead clearfix">
            <div class="inner">
		    <h3 class="masthead-brand"><span class="glyphicon glyphicon-calendar"></span> Bootstrap Calendar</h3>
              <ul class="nav masthead-nav">
                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="api.html">API</a></li>
                <li><a href="code.html">Code</a></li>
              </ul>
            </div>
            <div class="inner">
            	<p class="lead">A simple calendar plugin for the awesome <a target="_new" href="http://getbootstrap.com/"><em>Bootstrap</em></a> framework</p>
            </div>
          </div>
          <h3 class="page-header text-left">Example</h3>
          <p class="text-left">Here is a basic <i>use-case</i> of this plugin. It adds notes to any date on the calendar. 
         		Currently, this example saves data in the <i>localStorage</i>. 
         </p>	 
          
          <div class="inner cover">
			<div id="notes-calendar" class="row" data-toggle="calendar"></div>
          </div>
          
          <h3 class="page-header text-left">Markup</h3>
          <p class="text-left">By adding the following markup, you will get the calendar rendered like the one shown above.
          It internally leverages Bootstrap's <a target="_new" href="http://getbootstrap.com/javascript/#carousel"><em>Carousel</em></a> plugin for the layout & transitions with a default template. 
          However, you can configure it to some other template based on your needs.
          </p>	           	
		  <pre class="text-left">&lt;div data-toggle="calendar"&gt;&lt;/div&gt;</pre>
        </div>
      </div>

    </div>

<div class="modal fade" id="selectCalendarModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Select Month & Year</h4>
            </div>
            <div class="modal-body">
                <form class="form-inline text-center" role="form">
                    <div class="form-group">
                        <label for="selMonth" class="col-sm-4 control-label">Month</label>
                        <div class="col-sm-8">
                            <select id="selMonth" class="form-control"></select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="selYear" class="col-sm-4 control-label">Year</label>
                        <div class="col-sm-8">
                            <select id="selYear" class="form-control"></select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="changeCalendar" type="button" class="btn btn-primary">Change Calendar</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="editNotesModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Add or edit notes</h4>
            </div>
            <div class="modal-body">
                <textarea id="notes" class="form-control" rows="3"></textarea><br/>
                <span class="glyphicon glyphicon-trash pull-right"/>
            </div>
            <div class="modal-footer">
                <button id="saveNotes" type="button" class="btn btn-primary">Save Notes</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>