Ajax result return as text and use it as a value for JSON array in CLNDR.js, but it is not working

Question

Im having confusion what could be the appropriate title for this question, anyway let me explain what my problem is. Im currently using a plugin CLNDR.js and what im trying to do is display events in my calendar using the data (birthdays) from the database. The result in my php query is pre-formated.

My PHP is this:

<?php
require 'connection.php';
error_reporting(0); 
session_start();

    $currentYear = date("Y");


    $query = mysqli_query($con,"SELECT * FROM table2");
    $count = mysqli_num_rows($query);

    if($count < 1){ }else{

        while($row = mysqli_fetch_array($query)){


             echo ' { date: \'' .$currentYear. '-' .$row['BirthMonth']. '-' .$row['BirthDay']. '\', title: \'' . $row['LastName'] . ' birthday \' }, ' ;

        }   

    }

?>  

and the result that i have is like this:

{ date: '2015-5-29', title: 'Williams birthday' }, { date: '2015-5-29', title: 'Marcus birthday' }, { date: '2015-1-19', title: 'Spear birthday' },

and my jquery codes for CLNDR.js is this:

<script type="text/javascript">
 $(document).ready(function(){

  $.ajax({
          type: 'POST',
          url: 'function/serverdays.php',
          dataType: 'text',
          success: function(data) {

              var year = moment().year();  
              var newyear = moment(year + '-01-01').format('YYYY-MM-DD');
              var valentine = moment(year + '-02-14').format('YYYY-MM-DD');
              var allsaints = moment(year + '-11-01').format('YYYY-MM-DD');
              var allsouls = moment(year + '-11-02').format('YYYY-MM-DD');
              var christmas = moment(year + '-12-25').format('YYYY-MM-DD');
              var lastday = moment(year + '-12-31').format('YYYY-MM-DD');

            var events = [
             data, 
             { date: newyear, title: 'NEW YEAR'},
             { date: valentine, title: 'VALENTINE\'S DAY'},
             { date: allsaints, title: 'ALL SAINTS DAY'},
             { date: allsouls, title: 'ALL SOULS DAY'},
             { date: christmas, title: 'CHRISTMAS DAY'},
             { date: lastday, title: 'LAST DAY OF THE YEAR'},
            ];  

           $('#mini-clndr').clndr({
             template: $('#calendar-template').html(),
             events: events,
             constraints: {
              startDate: moment(year + '-01-01'),
              endDate: moment(year + '-12-31')
             },
             clickEvents: {
               click: function(target) {
                 if(target.events.length) {
                   var daysContainer = $('#mini-clndr').find('.days-container');
                   daysContainer.toggleClass('show-events', true);
                   $('#mini-clndr').find('.x-button').click( function() {
                     daysContainer.toggleClass('show-events', false);
                   });
                 }
               }
             },
             adjacentDaysChangeMonth: true,
             forceSixRows: true
           });

          },
          error:function (xhr, ajaxOptions, thrownError){
              alert(thrownError);
          }
    });




 });
</script>

so i assume that the result looks like this:

            var events = [ 
             { date: '2015-5-29', title: 'Williams birthday' }, 
             { date: '2015-5-29', title: 'Marcus birthday' }, 
             { date: '2015-1-19', title: 'Spear birthday' },
             { date: newyear, title: 'NEW YEAR'},
             { date: valentine, title: 'VALENTINE\'S DAY'},
             { date: allsaints, title: 'ALL SAINTS DAY'},
             { date: allsouls, title: 'ALL SOULS DAY'},
             { date: christmas, title: 'CHRISTMAS DAY'},
             { date: lastday, title: 'LAST DAY OF THE YEAR'},
            ];

my html tags

<div id='mini-clndr'></div>



 <script id="calendar-template" type="text/template">
      <div class="controls">
        <div class="clndr-previous-button">&lsaquo;</div><div class="month"><%= month %></div><div class="clndr-next-button">&rsaquo;</div>
      </div>

      <div class="days-container">
        <div class="days">
          <div class="headers">
            <% _.each(daysOfTheWeek, function(day) { %><div class="day-header"><%= day %></div><% }); %>
          </div>
          <% _.each(days, function(day) { %><div class="<%= day.classes %>" id="<%= day.id %>"><%= day.day %></div><% }); %>
        </div>
    <div class="events">
      <div class="headers">
         <div class="x-button">x</div>
         <div class="event-header">EVENTS</div>
      </div>

      <div class="events-list">
       <% _.each(eventsThisMonth, function(event) { %>
          <div class="event">
              <div class="event-item-name"><%= event.date %> : <%= event.title %></div>
            <div class="event-item-location"><%= event.location %></div>
          </div> 
       <% }); %>
    </div>
  </div>
      </div>

</script>

but iam getting an error from the console pointing to the plugin

Uncaught TypeError: Cannot read property 'format' of undefined

im not that good in jquery though, and im having trouble looking for support using ajax for 'clndr.js' since there are only few post about it. What is the possible solution for this?