Based on your original post, something like this will work if Waypoints is a global variable, which I am assuming it is:
<script id="tripEventTemplate" type="text/x-kendo-template">
# for(var i=0; i < Waypoints.length; i++){ #
<div style="color:#:Waypoints[i].FontColor #;margin-bottom:10px;background-color:#:Waypoints[i].BackgroundColor #">
<div>
<div>#= Waypoints[i].description #</div>
</div>
</div>
# } #
So, just doing:
<script id="tripEventTemplate" type="text/x-kendo-template">
<div data-template="tripWaypointCalendarTemplate"
data-bind="source: Waypoints">
</div>
Is not going to bind it. I think you also have issues where the <div> you are trying to bind it has no data-type, so there is nothing specifying which widget it will be (if it is to be a widget).
In your code, you would need to set up an observable like this:
var newObserv = kendo.observable({
Waypoints: arrayOfWaypoints
});
//Get html of your template
var templateHtml = kendo.template($('#tripEventTemplate').html());
$('#some-content-holder-div').html(templateHtml({}));
kendo.bind($('#some-content-holder-div'), newObserv);
The thing in your template you are wanting to have a source of 'Waypoints' will be populated with Waypoints.