CLNDR.js with Next and Previous months controls.

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://kylestetz.github.io/CLNDR/js/underscore.js"></script>
<script src="https://kylestetz.github.io/CLNDR/js/moment.js"></script>
<script src="https://kylestetz.github.io/CLNDR/js/clndr.js"></script>
<div class="cal1">
            <script type="text/template" id="template-calendar">
                <div class='clndr-controls'>
    <div class='clndr-control-button'>
        <span class='clndr-previous-button'>
            &lsaquo; <%= this.month.subtract(1, "month").format('MMMM YYYY') %>
        </span>
    </div>
    <div class='month'>
        <%= month %>
            <%= year %>
    </div>
    <div class='clndr-control-button rightalign'>
        <span class='clndr-next-button'>
            <%= this.month.add(2, "months").format('MMMM YYYY') %> &rsaquo; 
        </span>
    </div>
</div>
<table class='clndr-table' border='0' cellspacing='0' cellpadding='0'>
    <thead>
        <tr class='header-days'>
            <% _.each(daysOfTheWeek, function (day) { %>
                <td class='header-day'>
                    <%= day %>
                </td>
                <% }); %>
        </tr>
    </thead>
    <tbody>
        <% for(var i = 0; i < numberOfRows; i++){ %>
            <tr>
                <% for(var j = 0; j < 7; j++){ %>
                    <% var d = j + i * 7; %>
                        <td class='<%= days[d].classes %>'>
                            <div class='day-contents'>
                                <%= days[d].day %>
                            </div>
                        </td>
                        <% } %>
            </tr>
            <% } %>
    </tbody>
</table>
            </script>
        </div>

CSS

.cal1 {
  margin: 30px auto;
  max-width: 600px;
  font-family: 'Droid Sans Mono';
  font-size: 14px;
}
.cal1 .clndr .clndr-controls {
  display: inline-block;
  width: 100%;
  position: relative;
  margin-bottom: 10px;
}
.cal1 .clndr .clndr-controls .month {
  float: left;
  width: 33%;
  text-align: center;
}
.cal1 .clndr .clndr-controls .clndr-control-button {
  float: left;
  width: 33%;
}
.cal1 .clndr .clndr-controls .clndr-control-button.rightalign {
  text-align: right;
  width: 34%;
}
.cal1 .clndr .clndr-controls .clndr-control-button .clndr-next-button {
  cursor: pointer;
  -webkit-user-select: none;
  /* Chrome/Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+ */
}
.cal1 .clndr .clndr-controls .clndr-control-button .clndr-next-button:hover {
  background: #ddd;
}
.cal1 .clndr .clndr-controls .clndr-control-button .clndr-next-button.inactive {
  opacity: 0.5;
}
.cal1 .clndr .clndr-controls .clndr-control-button .clndr-next-button.inactive:hover {
  background: none;
  cursor: default;
}
.cal1 .clndr .clndr-controls .clndr-control-button .clndr-previous-button {
  cursor: pointer;
  -webkit-user-select: none;
  /* Chrome/Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+ */
}
.cal1 .clndr .clndr-controls .clndr-control-button .clndr-previous-button:hover {
  background: #ddd;
}
.cal1 .clndr .clndr-controls .clndr-control-button .clndr-previous-button.inactive {
  opacity: 0.5;
}
.cal1 .clndr .clndr-controls .clndr-control-button .clndr-previous-button.inactive:hover {
  background: none;
  cursor: default;
}
.cal1 .clndr .clndr-table {
  table-layout: fixed;
  width: 100%;
}
.cal1 .clndr .clndr-table .header-days {
  height: 30px;
  font-size: 10px;
  background: #0D70A6;
}
.cal1 .clndr .clndr-table .header-days .header-day {
  vertical-align: middle;
  text-align: center;
  border-left: 1px solid #000000;
  border-top: 1px solid #000000;
  color: #fff;
}
.cal1 .clndr .clndr-table...

JavaScript

$('.cal1').clndr({
    template: $('#template-calendar').html()
});