SunMonTueWedThuFriSat
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345

Drag and Drop Calendar Selector

This javascript code is useful for selecting a range of dates from a calendar, e.g. for adding a new event to a calendar. It is not intended to create the calendar itself, that should be performed by server-side code (PHP, etc.) or some other javascript.

To use it, simply pass the calendar's id and the first date displayed to the DragDropCalendar constructor. dragDropComplete is a callback function at the end of the drag and drop operation.

Download the associated files here.

<script type="text/javascript" src="dragdrop.js"></script>
<script type="text/javascript" src="dragdropcalendar.js"></script>
<script type="text/javascript"><!--

var d = new DragDropCalendar ('calendar', new Date (2007, 10, 25));
// don't forget months in javascript are numbered 0-11, this date is November 25, the first date displayed

DragDropCalendar.prototype.dragDropComplete = function (start, end) {
	if (end < start) {
		var t = start;
		start = end;
		end = t;
	}

	alert ('start: ' + start + '\nend: ' + end);
}

//--></script>

Creative Commons LicenseDrag and Drop Calendar Selector by Geoff Lankow is licensed
under a Creative Commons Attribution 3.0 License.