localendar documentation
Page tree
Skip to end of metadata
Go to start of metadata

We recently had a user who asked, "Is there a way to create multiple links to future calendar months on my web page, that I don't have to manually update every month?"

In other words, if this month is March, he wanted links on his page like this:

This Month
April
May
June
...

and next month he'd expect to automatically see

This Month
May
June
July
...

Our month views always default to the current month, so the "This Month" link is easy. Using our sample calendar as an example, the link would be

<a href="http://www.localendar.com/public/sample">This Month</a>

But what about the other dynamic links? Here's some quick JavaScript we wrote that demonstrates one solution. It relies on the start_date parameter you can pass into your calendar:

<a href='http://www.localendar.com/public/sample>This Month</a><br/>
<script>

var month_names = new Array ( );
month_names[month_names.length] = "January";
month_names[month_names.length] = "February";
month_names[month_names.length] = "March";
month_names[month_names.length] = "April";
month_names[month_names.length] = "May";
month_names[month_names.length] = "June";
month_names[month_names.length] = "July";
month_names[month_names.length] = "August";
month_names[month_names.length] = "September";
month_names[month_names.length] = "October";
month_names[month_names.length] = "November";
month_names[month_names.length] = "December";

function getNextCalendarMonth(in_date)
{
	if (in_date.getMonth() == 11) {
		var out_date = new Date(in_date.getFullYear() + 1, 0, 1);
	} else {
		var out_date= new Date(in_date.getFullYear(), in_date.getMonth() + 1, 1);
	}
	return out_date;
}
function formatDate(in_date)
{
	var out_string = "";
	out_string = (in_date.getMonth()+1)+"/"+in_date.getDate()+"/"+in_date.getFullYear();
	return out_string;
}

var mplus1=getNextCalendarMonth(new Date());
var mplus2=getNextCalendarMonth(mplus1);
var mplus3=getNextCalendarMonth(mplus2);
var mplus4=getNextCalendarMonth(mplus3);
document.write("<a href='http://www.localendar.com/public/sample?start_date="+formatDate(mplus1)+"'>"+month_names[mplus1.getMonth()]+"</a><br/>");
document.write("<a href='http://www.localendar.com/public/sample?start_date="+formatDate(mplus2)+"'>"+month_names[mplus2.getMonth()]+"</a><br/>");
document.write("<a href='http://www.localendar.com/public/sample?start_date="+formatDate(mplus3)+"'>"+month_names[mplus3.getMonth()]+"</a><br/>");
document.write("<a href='http://www.localendar.com/public/sample?start_date="+formatDate(mplus4)+"'>"+month_names[mplus4.getMonth()]+"</a><br/>");
</script>

Naturally, you could make it a little more generic to show the entire next year, but we think you get the idea from this snippet.

  • No labels