datepicker在一行中显示该月的所有日期

当前试图找出一种操作日期选择器的方法,以便它将日期显示在一个行中的一个月中的所有日期

我想首先从每月1到31或30行开始日期。并在数字下显示到星期天星期一...等,这是其中的示例代码

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Event Calendar in  one row</title>
  <script>
    function buildCal(m, y, cM, cH, cDW, cD, brdr) {
	var mn = ['January','February','March','April','May','June','July','August','September','October','November','December'];
	var dim = [31,0,31,30,31,30,31,31,30,31,30,31];

    // calculate the offset from Sunday at the beginning of the month
	var oD = new Date(y, m-1, 1); //DD replaced line to fix date bug when current day is 31st
	oD.od = oD.getDay()+1; //DD replaced line to fix date bug when current day is 31st
	
	var todaydate = new Date(); //DD added
	var scanfortoday = (y == todaydate.getFullYear() && m == (todaydate.getMonth() + 1))? todaydate.getDate() : 0; //DD added
	
	// check for leap year, set February number of days (28 or 29)
	dim[1] = (((oD.getFullYear() % 100 !== 0) && (oD.getFullYear() % 4 === 0)) || (oD.getFullYear() % 400 === 0)) ? 29 : 28;
	
	var t = '<div class="' + cM +'" >';
	t += '<div class="' + cH + '">' + mn[m - 1] + ' - ' + y + '</div>'; // month and year header
	
	for(w = 0; w < 5; w++) { //creates 35 repeating day names, 21 / 3 = 7, 7 x 5 = 35 total
		for(s = 0; s < 21; s += 3) t += '<div class="' + cDW + '">' + "SunMonTueWedThuFriSat".substr(s,3) + '</div>';
	}
	t += '<div class="' + cDW + '">Sun</div><div class="' + cDW + '">Mon</div>'; //add two more day names to make 37 total
	
	t += '<div style="clear:both"></div>'; //clear the float:left
	
	//collect events for this month
	var currentEvents = [], start, end, span;
	for(e = 0; e < events.length; e++) {
		var dStr = events[e].start.split(' ');
		var da = dStr[0].split('-');
		var ti = dStr[1].split(':');
		start = new Date(parseInt(da[0],10),parseInt((da[1])-1,10),parseInt(da[2],10),parseInt(ti[0],10),parseInt(ti[1],10),parseInt(ti[2],10));
		dStr = events[e].end.split(' ');
		da = dStr[0].split('-');
		ti = dStr[1].split(':');
		end = new Date(parseInt(da[0],10),parseInt((da[1])-1,10),parseInt(da[2],10),parseInt(ti[0],10),parseInt(ti[1],10),parseInt(ti[2],10));
		if((start.getMonth() + 1) == m && start.getFullYear() == y) {
			span = Math.round((end.valueOf() - start.valueOf()) / (24 * 60 * 60 * 1000)); 
			span = (events[e].allDay === "1" || events[e].allDay === "true") ? span : span + 1;
			// add additional information to the array
			events[e].span = span;  //span of the event in days
			events[e].day = start.getDate(); //date of the event
			events[e].offset = oD.od - 1; //month start offset
			events[e].startDate = start; //start date object
			events[e].endDate = end; //end date object
			events[e].used = false;  //needed later for sorting
			events[e].top = 0; //needed later for positioning
			currentEvents.push(events[e]);
		}
	}
	
	var sortedDates = [];
	for (var key in currentEvents) {
		sortedDates.push(currentEvents[key].startDate); //copy the startDates into a simple array
	}
	sortedDates.sort(date_sort_asc); //sort the start dates
	var sortedEvents = currentEvents;
	for (se = 0; se < sortedDates.length; se++) {
		for (ce = 0; ce < sortedDates.length; ce++) { //match up the unsorted with the sorted startDates.
			if(currentEvents[ce].startDate === sortedDates[se] && (!currentEvents[ce].used)) {
				sortedEvents[ce].sortKey = se; // add a sort key to the sorted array of events
				currentEvents[ce].used = true; //2 events may have exactly the same time stamp, "true" will prevent the same event from being added twice
			} 
		}
	}
	
	//look for overlapping events
	var monthDays = daysInMonth(m, y);//number of days in the current month
	var overlaps = [], usedDates = [], left;
	for (de = 0; de < sortedEvents.length; de++) {
		var id = sortedEvents[de].id;
		var sMonth = sortedEvents[de].startDate.getMonth();
		var sDate = sortedEvents[de].startDate.getDate();
		var sYear = sortedEvents[de].startDate.getFullYear();
		var sd = sMonth + '-' + sDate + '-' + sYear; //combine month-date-year
		if (de === 0) { left = '0:' + sortedEvents[de].id  + ':' + (sDate + oD.od);usedDates.push(left);} //save the dates that are used for layout
		var sd1, span1 = sortedEvents[de].span;
		for (re = 0; re < span1; re++) { //events can span days. Event days other than the start day can overlap another event's days
			for (ee = 0; ee < sortedEvents.length; ee++) {
				sd1 = sortedEvents[ee].startDate.getMonth() + '-' + sortedEvents[ee].startDate.getDate() + '-' + sortedEvents[de].startDate.getFullYear();//combine date-year
				if (sd === sd1 && (sortedEvents[ee].id !== id)) overlaps.push(id + ',' + sortedEvents[ee].id);//compare
			}
			left = '0:' + sortedEvents[de].id  + ':' + (sDate + sortedEvents[de].offset);
			if ((sDate + 1) > monthDays) { //advance date for multi-day events
				sDate = 1; 
				sMonth = (sMonth < 11) ? sMonth + 1 : 0; 
			} else { 
				sDate += 1;
			}
			sd = sMonth + '-' + sDate + '-' + sYear;
			usedDates.push(left); //save the dates that are used for layout
		}
	}
	
	if (overlaps.length > 0) {
		
		//access each event in chronological order using sortKey property.
		for (le = 0; le < sortedEvents.length; le++) { 
			for (ue = 0; ue < sortedEvents.length; ue++) {
				if (sortedEvents[ue].sortKey == le) {
					var limit = 0, thisRow = 0;
					//find out which row the event is currently assigned to.
					for (h = 0; h < usedDates.length; h++) {
						var set = usedDates[h].split(':');
						if (set[1] == sortedEvents[ue].id) {
							thisRow = set[0];
						}
					}
					while (!(findNextOpenRow(sortedEvents[ue].id, thisRow))) {}					
				}
			}	
		}
		
		//remove the dates from the usedDates array. We are left with id and row number only
		for (te = 0; te < usedDates.length; te++) { 
			usedDates[te] = usedDates[te].substr(0, usedDates[te].lastIndexOf(':'));
		}
		
		usedDates = usedDates.filter(onlyUnique); //eliminate all duplicates
		
		//adjust the "top" property of the sortedEvents so we can stack multiple events on each day 
		for (xe = 0; xe < sortedEvents.length; xe++) {
			for (ie = 0; ie < usedDates.length; ie++) {
				var hw = usedDates[ie].split(':');
				if (sortedEvents[xe].id == hw[1]) {
					sortedEvents[xe].top = hw[0];
				}
			}
		}
	}
	
	//function to find an open row for each event to eliminate overlaping
	function findNextOpenRow(id, row) {
		var test = true, group = [];
		for (b = 0; b < usedDates.length; b++) {
			var set = usedDates[b].split(':');
			if (set[1] == id) group.push(set[2]); //collect all dates used by an event into group array
		}
		for (h = 0; h < group.length; h++) { //loop through the event's dates to look for conflicts
			for (c = 0; c < usedDates.length; c++) {
				var sample = usedDates[c].split(':');
				if (sample[0] == row && sample[1] != id && sample[2] == group[h]) { //true = conflict found
					test = false; //return false and loop again until no conflict is found
					//increase the row number of the conflicting event by one
					for (w = 0; w < usedDates.length; w++) {
						var set = usedDates[w].split(':');
						if (set[1] == sample[1]) { 
							usedDates[w] = (parseInt(set[0]) + 1) + ':' + set[1] + ':' + set[2];
						}
					}
				}
				if (!test) break;
			}
			if (!test) break;
		}
		return test;
	}
	
	var daysPrevMonth = ((m - 1) === 0) ? dim[dim.length-1] : dim[m-2];//previous month number of days
	for(i = 1; i <= 37; i++){ // create 37 boxes for days of the month
		var x = '';
		if ((i - oD.od) < 0) { //print out previous month's days			
			x = '<span style="color:#ccc">' + (daysPrevMonth + (i - (oD.od-1))) + '</span>';
		} else if (((i - oD.od) >= 0) && ((i - oD.od) < dim[m-1])) { //print out this month's days
			x = (i - oD.od) + 1;
		} else { //print out next month's days
			x = '<span style="color:#ccc">' + (i - (dim[m-1] + (oD.od-1))) + '</span>';
		}
		
		if (x == scanfortoday) {// find today
			x = '<span id="today">' + x + '</span>'; // highlight today
	    }
		 
		for (me = 0; me < sortedEvents.length; me++) {
			if ((sortedEvents[me].day + sortedEvents[me].offset) == i) { // add in the current events
				x += '<div class="eventBar" style="margin-top:' + (sortedEvents[me].top * 20) + 'px;width:' + (((sortedEvents[me].span * 49) - 4) + sortedEvents[me].span) + 'px">' + sortedEvents[me].title + ', ' + sortedEvents[me].span + ' day event</div>';
			}
		}
		t += '<div class="' + cD + '">' + x + '</div>';
	}
	return t += '</div>';
}

//date sorting function
var date_sort_asc = function (date1, date2) {
  if (date1 > date2) return 1;
  if (date1 < date2) return -1;
  return 0;
};

//returns days in a given month and year
function daysInMonth(month,year) {
    return new Date(year, month, 0).getDate();
}

//eliminates duplicates from an array
function onlyUnique(value, index, self) { 
    return self.indexOf(value) === index;
}
  </script>
</head>
<body>
  <button id="prev" onMouseUp="changeMonth(false)"> << </button>
<button id="next" onMouseUp="changeMonth(true)"> >> </button>
<div id="cal"></div>
<script>
var events = [
		{"id":"1","title":"1","start":"2013-11-29 10:25:28","end":"2013-11-30 10:25:34","url":"","allDay":"1"},
		{"id":"2","title":"2","start":"2013-12-15 10:25:47","end":"2013-12-16 10:25:39","url":"","allDay":"1"},
		{"id":"3","title":"3","start":"2013-12-26 10:25:50","end":"2013-12-27 10:25:42","url":"","allDay":"false"},
		{"id":"4","title":"4","start":"2013-11-19 00:00:00","end":"2013-11-23 00:00:00","url":"","allDay":"false"},
		{"id":"5","title":"5","start":"2013-12-09 00:00:00","end":"2013-12-11 00:00:00","url":"event","allDay":"false"},
		{"id":"6","title":"6","start":"2013-12-08 00:00:00","end":"2013-12-10 00:00:00","url":"event","allDay":"false"},
		{"id":"7","title":"7","start":"2013-12-15 10:25:47","end":"2013-12-18 10:25:39","url":"","allDay":"1"},
		{"id":"8","title":"8","start":"2013-12-10 10:25:47","end":"2013-12-12 10:26:39","url":"","allDay":"1"},
		{"id":"9","title":"events day","start":"2013-12-10 10:25:47","end":"2013-12-18 10:26:39","url":"","allDay":"1"}
		];
  
var todaydate = new Date();
var curmonth = todaydate.getMonth() + 1; //get current month (1-12)
var curyear = todaydate.getFullYear(); //get current year
var selectedmonth = curmonth;
var selectedyear = curyear;

document.getElementById('cal').innerHTML = buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1);

function changeMonth(direction) {
	if (direction) {
		selectedyear =  ((selectedmonth+1) > 12) ? selectedyear+1 : selectedyear;
		selectedmonth = ((selectedmonth+1) > 12) ? 1 : selectedmonth+1;
	} else {
		selectedyear =  ((selectedmonth-1) == 0) ? selectedyear-1 : selectedyear;
		selectedmonth = ((selectedmonth-1) == 0) ? 12 : selectedmonth-1;
	}
	document.getElementById('cal').innerHTML = buildCal(selectedmonth ,selectedyear, "main", "month", "daysofweek", "days", 1);
}
</script>
</body>
</html>

我希望每个月都减少不必要的日子

评论