[Success] Tested with ES6(2015) Template Strings

Hi just want to tell i use ES6 Template String and it works fine!
I added Prev/Next month marked events when they are today or in a date range and wrapped weeks in a week div for simpler usage with flexbox

/*
 globals $
 */

var clndr = require('clndr')
var moment = require('moment')

moment.locale('de')
var thisMonth = moment().format('YYYY-MM')
var currentMonth = moment().format('YYYY-MM')
var nextMonth = moment().add('month', 1).format('YYYY-MM')

var eventArray = [
  {
    title: 'Multi-Day Event',
    startDate: '2017-02-09',
    endDate: '2017-02-12',
    time: '10.00 - 20.00'
  }, {
    endDate: thisMonth + '-23',
    startDate: thisMonth + '-21',
    title: 'Another Multi-Day Event',
    time: '10.00 - 20.00'
  }, {
    date: thisMonth + '-27',
    title: 'Single Day Event',
    time: '10.00 - 20.00'
  },
  {date: '2017-02-09', title: 'Persian Kitten Auction', location: 'Center for Beautiful Cats', time: '10.00 - 20.00'},
  {date: currentMonth + '-' + '19', title: 'Cat Frisbee', location: 'Jefferson Park', time: '10.00 - 20.00'},
  {
    date: currentMonth + '-' + '23',
    title: 'Kitten Demonstration',
    location: 'Center for Beautiful Cats',
    time: '10.00 - 20.00'
  },
  {
    date: nextMonth + '-' + '07',
    title: 'Small Cat Photo Session',
    location: 'Center for Cat Photography',
    time: '10.00 - 20.00'
  }
]

const templateString = (data) =>
  `<div class="row">
    <div class="col-md-6">

            <div class="events">
                ${data.eventsThisMonth.map(event => eventTemplate(event)).join('')}
            </div>
    </div>

    <div class="col-md-6">
    <div class="calendar">
         <div class="controls">
            <span class="clndr-previous-button">${prevMonthName(data.year, data.month)}</span>
            <span class="font-30 font-weight-bold font-white text-uppercase">${data.month}</span>
            <span class="clndr-next-button">${nextMonthName(data.year, data.month)}</span>
         </div>

         <div class="headers">
           ${data.daysOfTheWeek.map(day =>
    `<div class="day-header text-uppercase font-18 text-bold text-white">${day}</div>`).join('')}               
         </div>

         <div class="days">
          ${data.days.map(day => drawCalendar(day, data.days.length)).join(' ')}
         </div>
    </div>   
 </div>`

var dayCount = 0
function drawCalendar (day, daysLength) {
  var weekStart = `<div class="week">`
  var weekEnd = `</div>`

  if (dayCount % 7 === 0 || dayCount === 0) {
  } else {
    weekStart = ''
  }
  dayCount++;
  if (dayCount % 7 === 0 || dayCount === daysLength) {
  } else {
    weekEnd = ''
  }

  return `${weekStart}<div class="day ${day.classes}">${day.day}</div> ${weekEnd}`

}

function nextMonthName (year, month) {
  return moment().year(year).month(month).add(1, 'M').format('MMMM');
}

function prevMonthName (year, month) {
  return moment().year(year).month(month).subtract(1, 'M').format('MMMM');

}

function eventTemplate (event) {
  var today = new Date().getTime()
  var showOrHidden = 'hide-event'
  var dateString = ``
  var timeString = ``
  if (event.startDate !== undefined) {
    var startDate = moment(event.startDate)
    var endDate = moment(event.endDate)
    if (startDate <= today && today <= endDate) {
      showOrHidden = 'show-event'
    }
    dateString = `${helpers.formatDate(event.startDate)}  - ${helpers.formatDate(event.endDate, true)}`
  } else {
    if (moment(event.date).isSame(today, 'day')) {
      showOrHidden = 'show-event'
    }
    dateString = `${helpers.formatDate(event.date, true)}`
  }

  if (event.time !== undefined) {
    timeString = `<div class="time">${event.time}</div>`
  }

  return `<div class="event-date-single ${showOrHidden}">
                <div class="date font-30 font-weight-bold"> ${dateString}</div>
                <div class="event-title text-uppercase  font-30 text-light"> ${event.title} </div>
                ${timeString}
          </div>`
}

var helpers = {

  formatDate (date, short = false) {
    if (short) {
      return moment(date).format('DD.')
    } else {
      return moment(date).format('DD.MM')
    }
  }

}

$(document).ready(function () {
  var calender = $('.calendar-div').clndr(
    {
      events: eventArray,
      render: function (data) {
        return templateString(data)
      },
      moment: moment,

    })
})
kylestetz / CLNDR

[Success] Tested with ES6(2015) Template Strings #297
