title: Why does dayNamesMin not work in JQuery's calendar?
body: <p>I'm trying to implement a jquery dateticker but it's not behaving according to the following guide:</p>
  <p><a href="https://designmodo.com/calendar-jquery-css3/" rel="nofollow noreferrer">https://designmodo.com/calendar-jquery-css3/</a></p>
  <p>This guide says I should be able to set the text that shows for the days of the week with the dayNamesMin field:</p>
  <pre><code>    $('#calendar').datepicker({
          inline: true,
          firstDay: 1,
          showOtherMonths: true,
          dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
      });
  </code></pre>
  <p>But this doesn't seem to be working for me.</p>
  <p>I setup the div for the calendar like this:</p>
  <pre><code>&lt;div class=&quot;calendar&quot; id=&quot;aug-calendar&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>And I initialize the calendar like this:</p>
  <pre><code>    $('#aug-calendar').datepicker({
          showOtherMonths: false,
          dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
      });
  </code></pre>
  <p>Just in case you need to see it, here's the calendar class:</p>
  <pre><code>    .calendar {
          color: white;
          font-weight: bold;
      }
  </code></pre>
  <p>But here's what the calendar looks like:</p>
  <p><a href="https://i.stack.imgur.com/inZn8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/inZn8.png" alt="enter image description here" /></a></p>
  <p>The day names still show up as Su, Mo, Tu...</p>
  <p>Can anyone explain why dayNamesMin is not working?</p>
  <hr />
  <p>UPDATE: Here is a link to the live page:</p>
  <p><a href="http://hollandandbarnes.azurewebsites.net/entertainment/upcoming-events/" rel="nofollow noreferrer">http://hollandandbarnes.azurewebsites.net/entertainment/upcoming-events/</a></p>
  <p>...and the full code for the page:</p>
  <pre><code>@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
  @{
      Layout = &quot;Master.cshtml&quot;;
  }
  
  @* the fun starts here *@
  
  &lt;div&gt;
      &lt;div class=&quot;logo-and-title-container&quot;&gt;
          &lt;div class=&quot;logo-container&quot;&gt;
              &lt;img src=&quot;~/assets/img/logo for upcoming events - 1893x293.png&quot; alt=&quot;Holland &amp; Barnes.com&quot; width=&quot;500px&quot; /&gt;
          &lt;/div&gt;
          &lt;div class=&quot;upcoming-events-title-container&quot;&gt;
              &lt;span class=&quot;upcoming-events-title&quot;&gt;Upcoming Events Search&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;search-container&quot;&gt;
          &lt;div class=&quot;search-textbox-outer-container&quot;&gt;
              &lt;div class=&quot;search-textbox-inner-container&quot;&gt;
                  &lt;input type=&quot;text&quot; class=&quot;search-textbox&quot;&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;search-category-checkbox-group-container&quot;&gt;
              &lt;div class=&quot;search-category-checkbox-row&quot;&gt;
                  &lt;div class=&quot;search-category-checkbox-container&quot;&gt;
                      &lt;input type=&quot;checkbox&quot;&gt;&amp;nbsp;Annual Festival
                  &lt;/div&gt;
                  &lt;div class=&quot;search-category-checkbox-container&quot;&gt;
                      &lt;input type=&quot;checkbox&quot;&gt;&amp;nbsp;Concerts
                  &lt;/div&gt;
                  &lt;div class=&quot;search-category-checkbox-container&quot;&gt;
                      &lt;input type=&quot;checkbox&quot;&gt;&amp;nbsp;Conventions
                  &lt;/div&gt;
                  &lt;div class=&quot;search-category-checkbox-container&quot;&gt;
                      &lt;input type=&quot;checkbox&quot;&gt;&amp;nbsp;Cultural Events
                  &lt;/div&gt;
                  &lt;div class=&quot;search-category-checkbox-container&quot;&gt;
                      &lt;input type=&quot;checkbox&quot;&gt;&amp;nbsp;Speakers
                  &lt;/div&gt;
                  &lt;div class=&quot;search-category-checkbox-container&quot;&gt;
                      &lt;input type=&quot;checkbox&quot;&gt;&amp;nbsp;Education
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;search-category-checkbox-row&quot;&gt;
                  &lt;div class=&quot;search-category-checkbox-container&quot;&gt;
                      &lt;input type=&quot;checkbox&quot;&gt;&amp;nbsp;Sporting Events
                  &lt;/div&gt;
                  &lt;div class=&quot;search-category-checkbox-container&quot;&gt;
                      &lt;input type=&quot;checkbox&quot;&gt;&amp;nbsp;Trade Shows
                  &lt;/div&gt;
                  &lt;div class=&quot;search-category-checkbox-container&quot;&gt;
                      &lt;input type=&quot;checkbox&quot;&gt;&amp;nbsp;Live Theatre
                  &lt;/div&gt;
                  &lt;div class=&quot;search-category-checkbox-container&quot;&gt;
                      &lt;input type=&quot;checkbox&quot;&gt;&amp;nbsp;Fashion
                  &lt;/div&gt;
                  &lt;div class=&quot;search-category-checkbox-container&quot;&gt;
                      &lt;input type=&quot;checkbox&quot;&gt;&amp;nbsp;Business
                  &lt;/div&gt;
                  &lt;div class=&quot;search-category-checkbox-container&quot;&gt;
                      &lt;input type=&quot;checkbox&quot;&gt;&amp;nbsp;Arts
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;main-content-container&quot;&gt;
          &lt;div class=&quot;calendar-container&quot;&gt;
              &lt;div class=&quot;calendar&quot; id=&quot;aug-calendar&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;calendar&quot; id=&quot;sep-calendar&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;calendar&quot; id=&quot;oct-calendar&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;calendar&quot; id=&quot;nov-calendar&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;buttons-and-events-container&quot;&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  @section Styles {
      &lt;style&gt;
          .search-category-checkbox-container {
              width: 150px;
          }
  
          .search-category-checkbox-row {
              width: 90%;
              height: 20px;
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              margin: 5px 0;
          }
  
          .search-category-checkbox-group-container {
              width: 100%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              margin-bottom: 20px;
              color: black;
              font-family: Futura;
              font-size: 20px;
          }
  
          .search-textbox {
              width: 95%;
              border: none;
              height: 46px;
              font-size: 25px;
              padding-left: 10px;
          }
  
          .search-textbox-inner-container {
              border: black solid 2px;
              width: 100%;
              margin: 30px 40px;
              height: 50px;
              background: url('/assets/img/search icon.png') no-repeat;
              background-position: right;
              background-origin: content-box;
              padding-right: 5px;
              box-shadow: 8px 8px 10px #aaaaaa;
          }
  
          .search-textbox-outer-container {
              width: 100%;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
          }
  
          .search-container {
              background-color: white;
              width: 100%;
              display: flex;
              flex-direction: column;
              justify-content: center;
          }
  
          .upcoming-events-title {
              font-size: 50px;
              color: white;
          }
  
          .upcoming-events-title-container {
              width: 60%;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
          }
  
          .logo-container {
              width: 40%;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              min-width: 550px;
          }
  
          .logo-and-title-container {
              background-color: rgb(35,31,32);
              width: 100%;
              height: 200px;
              display: flex;
              flex-direction: row;
              justify-content: space-between;
          }
  
          .calendar {
              color: white;
              font-weight: bold;
              padding: 10px;
          }
  
          .ui-datepicker {
              font-family: Futura;
          }
  
          /*.next, .prev {
              display: none;
          }*/
  
          /*
          .table-condensed thead tr:first-child .datepicker-switch {
              width: 100% !important;
              margin: auto !important;
              background-color: red;
          }*/
  
          .main-content-container {
              width: 100%;
              display: flex;
              flex-direction: row;
              justify-content: flex-start;
          }
  
          .calendar-container {
              display: flex;
              flex-direction: column;
              justify-content: center;
              background-color: rgb(65,64,66);
              width: 300px;
              align-items: center;
              padding: 10px 0;
          }
  
          .buttons-and-events-container {
              display: flex;
              flex-direction: column;
              justify-content: center;
              background-color: rgb(230,231,232);
              flex-grow: 1;
          }
  
          @@font-face {
              font-family: &quot;Futura&quot;;
              src: url(&quot;assets/fonts/Futura.ttf&quot;) format(&quot;TrueType&quot;),
          }
      &lt;/style&gt;
  }
  
  @section Scripts {
      &lt;script&gt;
          $(function () {
              for (let month of ['aug', 'sep', 'oct', 'nov']) {
                  $('#' + month + '-calendar').datepicker({
                      showOtherMonths: false,
                      dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
                  });
              }
  
              //$('#aug-calendar thead tr:first-child').addClass('green-background');
              //$('#aug-calendar thead tr:first-child').css('width', '100%');
              //$('#aug-calendar thead tr:first-child').html('&lt;th class=&quot;red-background&quot; style=&quot;width: 100%;&quot;&gt;August&lt;/th&gt;');
                
          });
      &lt;/script&gt;
  }
  </code></pre>