<style type="text/css">
.localendar-close {
  position: absolute;
  top: 4px;
  right: 4px;
  margin:2px;
  border: none;
}
.localendar-mini td, th {
  width: 30px;
  height: 30px;
  text-align: center;
  vertical-align: middle;
  font-family: arial;
  font-size: 16px;
}
.localendar-label,.localendar-time,.localendar-title {
  font-family:arial;font-size:12px;
}
.localendar-label {
  font-weight:bold;font-size:14px;
}
.localendar-hasEvents {
  background:orange !important;
  cursor: pointer;
}
.localendar-selected {
  /* Uncomment to enable this feature
  background-color: yellow;
  */
}
.localendar-monthName{
  background-color:#ffffff;
  color: #999999;
  /* Uncomment this to hide the Month name
  display:none;
  */
}
.localendar-balloon{
  text-align:left;
}
</style>
<script>
  // Other settings you can customize for your site
  var lcPopupColor="rgba(230, 230, 230, .9)"; /* Try other values like: rgb(230,230,230), #b0c4de, yellow, etc */
  var lcPopupOutline="#333333";
  var lcPopupCornerRadius=20; /* Set to 0 for square corners */
</script>
<script type="text/javascript" src='//localendar.com/js/PublishedIncludeMini.js'></script>

<!-- Place this line where you would like the calendar to appear (in a <div>, table, etc) -->
<script type="text/javascript" src='//localendar.com/public/NPLIevents?categories=100%2C101%2C107%2C102%2C108%2C105%2C104%2C106%2C103&style=M5&include=Y'></script>