index.html

<script type="text/template" id="todayEventTemplate">
                            <div class="event-item" >
                                <div class="event-item-name date">!%= event.dateFormatted %!</div>
                                    <div class="event-item-name"> !% console.log(event); %!
                                        !% if (event.url) {%!
                                            <a href="!%=event.url%!" >
                                            !% } %! 
                                            !%= event.title %! 
                                            !% if (event.url) {%!
                                            </a>
                                        !% } %! 
                                    </div>
                                <div class="event-item-location">!%= event.location %!</div>
                            </div>
            </script>
            <!-- Calendar script -->
            <script type="text/template" id="template-calendar">
                    <div class="col-wrap">
                        <div class="col-left">
                            <div class='clndr-controls'>
                              <div class='clndr-control-button'><span class='clndr-previous-button'> < </span></div>
                              <div class='month'>!%= month %! </div>
                              <div class='clndr-control-button rightalign'><span class='clndr-next-button'> > </span></div>
                            </div>
                                <table class='clndr-table' border='0' cellspacing='0' cellpadding='0'>
                                  <thead>
                                      <tr class='header-days'>
                                          !% for(var i = 0; i < daysOfTheWeek.length; i++) { %!
                                            <td class='header-day'>!%= daysOfTheWeek[i] %!</td>
                                          !% } %!
                                      </tr>
                                  </thead>
                                  <tbody>
                                      !% for(var i = 0; i < numberOfRows; i++){ %!
                                        <tr>
                                            !% for(var j = 0; j < 7; j++){ %!
                                            !% var d = j + i * 7; %!
                                                <td class='!%= days[d].classes %!'>
                                                    <div class='day-contents'>!%= days[d].day %!
                                                </div>
                                                </td>
                                            !% } %!
                                        </tr>
                                      !% } %!
                                  </tbody>
                                </table>
                    </div> 

                    <div class="col-right">
                        <div class="clndr-today-button" >
                            
                        </div>
                        <div class="event-listing" id="todayEvents">
                            <div class="event-listing-title"> </div>
                            !% _.each(eventsThisMonth, function(event) { %!
                            <div class="event-item" id="eventDay">
                                <div class="event-item-name date !% if(moment().isAfter(event.date, 'day')) { %! past !% } %! ">!%= event.dateFormatted %!</div>
                                    <div class="event-item-name">
                                        !% if (event.url) {%!
                                            <a href="!%=event.url%!" >
                                            !% } %! 
                                            !%= event.title %! 
                                            !% if (event.url) {%!
                                            </a>
                                        !% } %! 
                                    </div>
                                <div class="event-item-location">!%= event.location %!</div>
                            </div>
                            !% }); %!
                        </div>
                        <div id="downClick" class="seeMore-button">&#8897;</div>
                    </div> 
                </div> 
            </script><!-- end calendar script -->

site.js

// 
_.templateSettings = {
  interpolate: /\!\%=(.+?)\%\!/g,
  evaluate: /\!\%(.+?)\%\!/g
};

// call this from the developer console and you can control both instances
var calendars = {};

$(document).ready( function() {

  // assuming you've got the appropriate language files,
  // clndr will respect whatever moment's language is set to.
  // moment.locale('ru');

  // here's some magic to make sure the dates are happening this month.
  var thisMonth = moment().format('YYYY-MM');

  var eventArray = [      ];

  // the order of the click handlers is predictable.
  // direct click action callbacks come first: click, nextMonth, previousMonth, nextYear, previousYear, or today.
  // then onMonthChange (if the month changed).
  // finally onYearChange (if the year changed).

  calendars.clndr1 = $('#calendar').clndr({
    template: $('#template-calendar').html(),
    events: [
            { date: '2015-04-08 ', dateFormatted: 'SUNDAY APR 12 ', title: 'event', location: 'location  |  location'},
            { date: '2015-04-20 ', dateFormatted: 'SUNDAY APR 12 ',title: 'event', location: 'location  |  location'},
            { date: '2015-04-20 ', dateFormatted: 'SUNDAY APR 12 ',title: 'event', location: 'location  |  location'},
            { date: '2015-04-22 ', dateFormatted: 'SUNDAY APR 12 ',title: 'event', location: 'location  |  location'},
            { date: '2015-04-18 ', dateFormatted: 'SUNDAY APR 12 ',title: 'event', location: 'location  |  location'},
            { date: '2015-05-01', dateFormatted: 'SUNDAY APR 12 ', title: 'event' , location: 'location  |  location', url:'http://google.com/' }
    ],
    // constraints: {
    //   startDate: '2013-11-01',
    //   endDate: '2013-11-15'
    // },
    clickEvents: {
      click: function(target) {
        
        $('#todayEvents').html("");

          var compiledTemplate = _.template($('#todayEventTemplate').html());
        _.each(target.events, function(event) {
            console.log(event);
            $('#todayEvents').append(compiledTemplate(event));
        });
        // if you turn the `constraints` option on, try this out:
        // if($(target.element).hasClass('inactive')) {
        //   console.log('not a valid datepicker date.');
        // } else {
        //   console.log('VALID datepicker date.');
        // }
      },
      nextMonth: function() {
        console.log('next month.');
      },
      previousMonth: function() {
        console.log('previous month.');
      },
      onMonthChange: function() {
        console.log('month changed.');
      },
      nextYear: function() {
        console.log('next year.');
      },
      previousYear: function() {
        console.log('previous year.');
      },
      onYearChange: function() {
        console.log('year changed.');
      }
    },
    multiDayEvents: {
      startDate: 'startDate',
      endDate: 'endDate',
      singleDay: 'date'
    },
    showAdjacentMonths: true,
    adjacentDaysChangeMonth: false
  });


  // bind both clndrs to the left and right arrow keys
  $(document).keydown( function(e) {
    if(e.keyCode == 37) {
      // left arrow
      calendars.clndr1.back();
      calendars.clndr2.back();
    }
    if(e.keyCode == 39) {
      // right arrow
      calendars.clndr1.forward();
      calendars.clndr2.forward();
    }
  });

 var scrolled=0;
  $("#downClick").on("click", function(){
      scrolled=scrolled+300;
        
        $(".event-listing").animate({
                scrollTop:  scrolled
           });

      });

});