How to exclude weekends and show only weekdays

[kylestetz]

How to exclude weekends and show only weekdays

[kylestetz]

Thanks for elaborating on your confusion, I definitely see the ambiguity there.

These options are indeed only related to the labels for the days and not for turning the days on and off in the template. I wrote the note about using moment.js because daysOfTheWeek and weekOffset are a little finicky and I'm hoping people avoid using them altogether. The problem is caused by the fact that moment and clndr can both offset the start of the week, which will obviously cause errors.

You're right that this is a matter of writing a template that ignores weekends, and luckily that's not too difficult. I'll give you a start here... There are no back/forward controls, though they are very simple to add:

<script type="text/template" id="full-clndr-template">
  <div class="clndr-grid">
    <div class="days-of-the-week">
      <% _.each(['M', 'T', 'W', 'T', 'F'], function(day) { %>
        <div class="header-day"><%= day %></div>
      <% }); %>
    </div>
    <div class="days">
      <% _.each(days, function(day) { %>
        <% if(day.date.weekday() !== 0 && day.date.weekday() !== 6){ %>
          <div class="<%= day.classes %>"><span class="day-number"><%= day.day %></span></div>
        <% } %>
      <% }); %>
    </div>
  </div>
</script>

Two things of note:

1. The _.each(['M', 'T', 'W', 'T', 'F'] ... ) call allows us to make five header columns. Normally the daysOfTheWeek variable would go here, but that doesn't suit your needs.
2. We've got an if statement inside of the days loop, which taps into the day.date moment object. We can call any moment function here, so I chose to check whether the weekday is equal to 0 or 6, which would denote a weekend.

index.html in the clndr Github Pages site (https://github.com/kylestetz/CLNDR/blob/gh-pages/index.html) has three different templates you can use as a starting point to learn more about this, and I am happy to answer any other questions you have!

[smohadjer]

How could this be done in a logic-less templating engine such as handlebars?

 <% if(day.date.weekday() !== 0 && day.date.weekday() !== 6){ %>
          <div class="<%= day.classes %>"><span class="day-number"><%= day.day %></span></div>
 <% } %>

[kylestetz]

Handlebars has {{#if}} blocks, so you should be able to write a simple if statement like the one you posted.

I'm not well-versed in handlebars so I will defer to a tutorial of partials and helpers:
http://blog.teamtreehouse.com/handlebars-js-part-2-partials-and-helpers

Let me know if that's helpful!

[smohadjer]

Thanks, that was helpful indeed! :)

However I'm noticing that if I don't render "Sundays" in my calendar, for some reason it renders a full row of days belonging to next month under the calendar. Am I doing something wrong? Here is a link:
http://sandbox.saeidmohadjer.com/calendar_handlebars.html

[kylestetz]

This is happening because the Sunday that you are excluding would be the left-most grid element on the bottom row, so it is rendering the entire row. The simple way to get around this would be to pass the option showAdjacentMonths: false into your clndr configuration.

Since you're using the render function, you could dig into that data object and remove the last row if the last day of the current month is a Sunday. That would be the hard option.