В настоящее время пытаюсь найти способ манипулировать datepicker, чтобы он отображал все даты одного месяца в одной строке.
Во-первых, я хочу начать дату в одной строке (С 1 по 31 или 30 каждый месяц). А под номерами покажите даты (воскресенье, понедельник и т. Д. c ...)
Это мой код:
<!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>
Вот живая демонстрация: https://output.jsbin.com/oSegeLO/1/
Я хочу удалить ненужные дни в каждом месяце.