Print day of the week in date block

[kylestetz]

Print day of the week in date block

[kylestetz]

Not to worry, we can make this happen. Moment.js has some awesome formatting tools ... http://momentjs.com/docs/#/displaying/format/ ... and we can use moment right inside of a template. Each day in the days array contains a moment object, so we're all set up to do some custom formatting.

Where you have this in your jsfiddle template (at line 19):

<div class="<%= day.classes %>" id="<%= day.id %>"><%= day.day %>

Change it to this (and remove id, since it's no longer necessary as of clndr v1.0.8):

<div class="<%= day.classes %>"><%= day.date.format('ddd DD') %>

What's happening: when looping through the days array, the date field is a moment object. Calling date.format() allows us to make our own date format. The format 'ddd' outputs the first three letters of the day of the week, and 'DD' outputs the day as two digits.

That should do the trick! Thanks for checking out the plugin.

[neal5689]

Perfect! thanks for that, it's much appreciated.
One more small question, I have the month and year displayed at the top like so: <div class="month"><%= month %> <%= year %></div>
I'd also like to display the previous month, and the next month, e.g. if we're in November now, on the left hand side of the page it will say Oct and on the right hand side of the page it will say Dec.
If this is at all possible?

[kylestetz]

Good question, we'll have to do sort of a hack to accomplish this one.

I didn't supply a moment object containing the current month in the template, which would have made this a little more convenient for you. You can, however, combine the year and month variables in the template into a moment object representing the current month. You would do that like this:

moment(year + ' ' + month)

So if you want to print out the previous month, you can do some moment magic like this:

moment(year + ' ' + month).subtract(1, 'months').format('MMMM')

And to get the next month written out, follow the same pattern but add instead of subtracting:

moment(year + ' ' + month).add(1, 'months').format('MMMM')

[neal5689]

Great, thanks again for that, works a charm!
I have encountered one small problem today though whilst working, I promise this will be the last one,
I have the calendar set up, works great, I have click functions on the .day divs though, like so:

$(document).ready(function () {
    $('.day').click(function () {
        $('.listings-event-content-wrap').hide();
        $('#listing-' + $(this).attr('data-hook')).fadeIn("slow");
        $('html, body').animate({
            scrollTop: $('#listing-' + $(this).attr('data-hook')).offset().top - 55
        }, "slow");
    });
});

but for some reason, if you navigate to the next month, and navigate back, the click function no longer works, which is a little bit frustrating, here's the full HTML setup:

<div class="listings-calendar-wrap">
  <script type="text/template" id="listings-calendar">
  <div class="listings-calendar-month"><%= month %> <%= year %></div>

<% _.each(days, function(day) { %>  
<% _.each(day.events, function(event) { %> 

    <div id="listing-<%= day.date.format('DD-MM-YY') %>" class="listings-event-content-wrap">
        <div class="listings-event-content">
            <div class="event-image" style="background-image: url('<%= event.image %>');"></div>
            <div class="event-title"><%= event.title %></div>
            <div class="event-time-loc"><%= event.time %>/<%= event.location %></div>
            <div class="event-price"><%= event.price %></div>
            <div class="event-info"><%= event.text %></div>
            <div class="social-wrap">
                <img class="social-icon social-tweet" src="../images/social-tweet.png" width="22" height="22" />
                <img class="social-icon social-facebook" src="../images/social-facebook.png" width="22" height="22" />
            </div>
            <div class="event-book-tickets">book tickets</div>
        </div>
    </div>

<% }) %>
<% }) %>

    <div class="clndr-controls">
      <div class="clndr-previous-button"><img src="../images/listings-prev.png" width="20" height="30" /></div>
      <div class="clndr-next-button"><img src="../images/listings-next.png" width="20" height="30" /></div>
    </div>

    <div class="clndr-grid">
        <div class="days">
          <% _.each(days, function(day) { %>
          <div class="<%= day.classes %>" data-hook="<%= day.date.format('DD-MM-YY') %>">
              <div class="day-padding">
                <div class="date-titles">
                <%= day.date.format('ddd') %><span>/<%= day.date.format('DD') %></span>
                </div>
                    <% _.each(day.events, function(event) { %>
                    <div class="event-titles-wrap">
                      <div class="event-title"><%= event.title %></div>
                      <div class="event-category"><%= event.category %></div>
                    </div>  
                      <div class="event-image" style="background-image: url('<%= event.image %>');"></div>
                      <div class="event-time-loc"><%= event.time %>/<%= event.location %></div>
                      <div class="event-price"><%= event.price %></div>
                    <% }) %>

                </div>
            </div>
          <% }); %>
        </div>
    </div>

  </script>
</div>

I'm not sure why, ideally I'd have the .listings-event-content-wrap outside the .listings-calendar-wrap, but this breaks the calendar. I'm not sure what the solution is, if there is one, but it's just something I noticed that I need to, and am trying to fix! Any suggestions would be greatly appreciated.

[kylestetz]

The problem you're having is that you're binding events to .day elements when the page loads, but when you navigate to a new month clndr deletes the entire calendar markup and re-renders it. Your event callbacks are deleted along with all the DOM elements. There is a callback designed specifically to get around this limitation:

('#calendar').clndr({
  clickEvents: {
    click: function(target) {
      console.log(target);
    }
  }
});

The clickEvents.click callback is called whenever a day is clicked on. The target object passed in looks like this:

target: {
  date: moment(), // contains a moment object set to the correct date
  events: [], // an array of any events that are happening on this day
  element: DOMElement // the .day element that the user clicked on (you can call $(target.element) to do jQuery things with it)
}

That should get you where you want to be. I recommend browsing all of the options available to clndr, since they might spark some ideas for you about what's possible: https://github.com/kylestetz/CLNDR#usage

[neal5689]

That's great, I've got it working now! Thanks again for your help and the superb plugin, I look forward to using it more in the future. I'll send you a link to the site when it's finished, to see clndr in use!

[kylestetz]

👌