Usage docs should explain how to use eventsThisInterval

[nk9]

If you have specified a 3-month lengthOfTime, the object your template gets from eventsThisInterval is an array of arrays. The sample template code which iterates eventsThisMonth expecting to encounter events won't work; you have to nest a second _.each() inside the first to access the event objects.

$('#mycal').clndr({
	lengthOfTime: {
		months: 3,
		interval: 3,
		startDate: "2020-09-01"
	},
	events: [
		{
			title: "Birthday party",
			date: "2020-07-24",
			type: "vbm"
		}, {
			title: "Fireworks",
			date: "2020-07-04",
			type:  "registration"
		}
	// […]
	]
});

And so your template needs to do:

<div class="events">
	<% _.each(eventsThisInterval, function(month) {
		_.each(month, function(event) { %>
			console.log("<%= event %>");
			<div class="event-item">
				<div class="event-item-title"><%= event.title %></div>
			</div>
		<% });
	}); %>
</div>

It would be helpful if the usage docs in the README explained this, or even mentioned it. I'm not sure what the situation is with interval lengths other than a month, but that's something to mention if it's different again.

[nk9]

I'd also point out that when you have a multi-day event which crosses a month boundary, the eventsThisInterval API returns it once for each month. While this does make sense, it's another thing to point out to users. And it would be nice to get some indication of this. If I only want a range event to show up once (say I'm showing a list of all the events in a given interval), the only way to ignore the month-straddling events at present is to keep a variable flag of whether it's been seen before. If the months returned were an object letting you know which month you were viewing, you could compare the start or end date of the event to the month to determine whether you wanted to display it.