Всем привет! Есть готовый календарь, на котором можно отмечать события. Ссылка на него: http://www.jqueryscript.net/time-clock/Creating-A-Pretty-Event-Calendar-with-jQuery.html. Он работает с json. Создал под него парсер, и тут в последний момент заметил, что скрипт неправильно работает с датой. К примеру, если дать ему 2 события с разными годами, но одинаковым месяцем и днем, то на календаре скрипт их отобразит на одном дне.
Кормлю скрипт json'ом
{
"events": [{
"month": "10",
"day": "9",
"year": "2015",
"title": "Lorem ipsum",
"description": "2"
},
{
"month": "10",
"day": "9",
"year": "2016",
"title": "Lorem ipsum",
"description": "1"
}
]
}
На деле получаю то, что показано на прикрепленном к теме изображении.
Ребята, прошу, помогите исправить скрипт. В javascript я совсем не разбираюсь.
Код javascript скрипта:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
var calendar = {
init: function(ajax) {
if (ajax) {
// ajax call to print json
$.ajax({
url: 'data/events.json',
type: 'GET',
})
.done(function(data) {
var events = data.events;
// loop json & append to dom
for (var i = 0; i < events.length; i++) {
$('.list').append('<div class="day-event" date-day="'+ events[i].day +'" date-month="' + events[i].month +'" date-year="'+ events[i].year +'" data-number="'+ i +'"><a href="#" class="close fontawesome-remove"></a><h2 class="title">'+ events[i].title +'</h2><p>'+ events[i].description +'</p><label class="check-btn"><input type="checkbox" class="save" id="save" name="" value=""/><span>Save to personal list!</span></label></div>');
}
// start calendar
calendar.startCalendar();
})
.fail(function(data) {
console.log(data);
});
} else {
// if not using ajax start calendar
calendar.startCalendar();
}
},
startCalendar: function() {
var mon = 'Mon';
var tue = 'Tue';
var wed = 'Wed';
var thur = 'Thur';
var fri = 'Fri';
var sat = 'Sat';
var sund = 'Sun';
/**
* Get current date
*/
var d = new Date();
var strDate = yearNumber + "/" + (d.getMonth() + 1) + "/" + d.getDate();
var yearNumber = (new Date).getFullYear();
/**
* Get current month and set as '.current-month' in title
*/
var monthNumber = d.getMonth() + 1;
function GetMonthName(monthNumber) {
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
return months[monthNumber - 1];
}
setMonth(monthNumber, mon, tue, wed, thur, fri, sat, sund);
function setMonth(monthNumber, mon, tue, wed, thur, fri, sat, sund) {
$('.month').text(GetMonthName(monthNumber) + ' ' + yearNumber);
$('.month').attr('data-month', monthNumber);
printDateNumber(monthNumber, mon, tue, wed, thur, fri, sat, sund);
}
$('.btn-next').on('click', function(e) {
var monthNumber = $('.month').attr('data-month');
if (monthNumber > 11) {
$('.month').attr('data-month', '0');
var monthNumber = $('.month').attr('data-month');
yearNumber = yearNumber + 1;
setMonth(parseInt(monthNumber) + 1, mon, tue, wed, thur, fri, sat, sund);
} else {
setMonth(parseInt(monthNumber) + 1, mon, tue, wed, thur, fri, sat, sund);
};
});
$('.btn-prev').on('click', function(e) {
var monthNumber = $('.month').attr('data-month');
if (monthNumber < 2) {
$('.month').attr('data-month', '13');
var monthNumber = $('.month').attr('data-month');
yearNumber = yearNumber - 1;
setMonth(parseInt(monthNumber) - 1, mon, tue, wed, thur, fri, sat, sund);
} else {
setMonth(parseInt(monthNumber) - 1, mon, tue, wed, thur, fri, sat, sund);
};
});
/**
* Get all dates for current month
*/
function printDateNumber(monthNumber, mon, tue, wed, thur, fri, sat, sund) {
$($('tbody.event-calendar tr')).each(function(index) {
$(this).empty();
});
$($('thead.event-days tr')).each(function(index) {
$(this).empty();
});
function getDaysInMonth(month, year) {
// Since no month has fewer than 28 days
var date = new Date(year, month, 1);
var days = [];
while (date.getMonth() === month) {
days.push(new Date(date));
date.setDate(date.getDate() + 1);
}
return days;
}
i = 0;
setDaysInOrder(mon, tue, wed, thur, fri, sat, sund);
function setDaysInOrder(mon, tue, wed, thur, fri, sat, sund) {
var monthDay = getDaysInMonth(monthNumber - 1, yearNumber)[0].toString().substring(0, 3);
if (monthDay === 'Mon') {
$('thead.event-days tr').append('<td>' + mon + '</td><td>' + tue + '</td><td>' + wed + '</td><td>' + thur + '</td><td>' + fri + '</td><td>' + sat + '</td><td>' + sund + '</td>');
} else if (monthDay === 'Tue') {
$('thead.event-days tr').append('<td>' + tue + '</td><td>' + wed + '</td><td>' + thur + '</td><td>' + fri + '</td><td>' + sat + '</td><td>' + sund + '</td><td>' + mon + '</td>');
} else if (monthDay === 'Wed') {
$('thead.event-days tr').append('<td>' + wed + '</td><td>' + thur + '</td><td>' + fri + '</td><td>' + sat + '</td><td>' + sund + '</td><td>' + mon + '</td><td>' + tue + '</td>');
} else if (monthDay === 'Thu') {
$('thead.event-days tr').append('<td>' + thur + '</td><td>' + fri + '</td><td>' + sat + '</td><td>' + sund + '</td><td>' + mon + '</td><td>' + tue + '</td><td>' + wed + '</td>');
} else if (monthDay === 'Fri') {
$('thead.event-days tr').append('<td>' + fri + '</td><td>' + sat + '</td><td>' + sund + '</td><td>' + mon + '</td><td>' + tue + '</td><td>' + wed + '</td><td>' + thur + '</td>');
} else if (monthDay === 'Sat') {
$('thead.event-days tr').append('<td>' + sat + '</td><td>' + sund + '</td><td>' + mon + '</td><td>' + tue + '</td><td>' + wed + '</td><td>' + thur + '</td><td>' + fri + '</td>');
} else if (monthDay === 'Sun') {
$('thead.event-days tr').append('<td>' + sund + '</td><td>' + mon + '</td><td>' + tue + '</td><td>' + wed + '</td><td>' + thur + '</td><td>' + fri + '</td><td>' + sat + '</td>');
}
};
$(getDaysInMonth(monthNumber - 1, yearNumber)).each(function(index) {
var index = index + 1;
if (index < 8) {
$('tbody.event-calendar tr.1').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '">' + index + '</td>');
} else if (index < 15) {
$('tbody.event-calendar tr.2').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '">' + index + '</td>');
} else if (index < 22) {
$('tbody.event-calendar tr.3').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '">' + index + '</td>');
} else if (index < 29) {
$('tbody.event-calendar tr.4').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '">' + index + '</td>');
} else if (index < 32) {
$('tbody.event-calendar tr.5').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '">' + index + '</td>');
}
i++;
});
var date = new Date();
var month = date.getMonth() + 1;
var thisyear = new Date().getFullYear();
setCurrentDay(month, thisyear);
setEvent();
displayEvent();
}
/**
* Get current day and set as '.current-day'
*/
function setCurrentDay(month, year) {
var viewMonth = $('.month').attr('data-month');
var eventYear = $('.event-days').attr('date-year');
if (parseInt(year) === yearNumber) {
if (parseInt(month) === parseInt(viewMonth)) {
$('tbody.event-calendar td[date-day="' + d.getDate() + '"]').addClass('current-day');
}
}
};
/**
* Add class '.active' on calendar date
*/
$('tbody td').on('click', function(e) {
if ($(this).hasClass('event')) {
$('tbody.event-calendar td').removeClass('active');
$(this).addClass('active');
} else {
$('tbody.event-calendar td').removeClass('active');
};
});
/**
* Add '.event' class to all days that has an event
*/
function setEvent() {
$('.day-event').each(function(i) {
var eventMonth = $(this).attr('date-month');
var eventDay = $(this).attr('date-day');
var eventYear = $(this).attr('date-year');
var eventClass = $(this).attr('event-class');
if (eventClass === undefined) eventClass = 'event';
else eventClass = 'event ' + eventClass;
if (parseInt(eventYear) === yearNumber) {
$('tbody.event-calendar tr td[date-month="' + eventMonth + '"][date-day="' + eventDay + '"]').addClass(eventClass);
}
});
};
/**
* Get current day on click in calendar
* and find day-event to display
*/
function displayEvent() {
$('tbody.event-calendar td').on('click', function(e) {
$('.day-event').slideUp('fast');
var monthEvent = $(this).attr('date-month');
var dayEvent = $(this).text();
$('.day-event[date-month="' + monthEvent + '"][date-day="' + dayEvent + '"]').slideDown('fast');
});
};
/**
* Close day-event
*/
$('.close').on('click', function(e) {
$(this).parent().slideUp('fast');
});
/**
* Save & Remove to/from personal list
*/
$('.save').click(function() {
if (this.checked) {
$(this).next().text('Remove from personal list');
var eventHtml = $(this).closest('.day-event').html();
var eventMonth = $(this).closest('.day-event').attr('date-month');
var eventDay = $(this).closest('.day-event').attr('date-day');
var eventNumber = $(this).closest('.day-event').attr('data-number');
$('.person-list').append('<div class="day" date-month="' + eventMonth + '" date-day="' + eventDay + '" data-number="' + eventNumber + '" style="display:none;">' + eventHtml + '</div>');
$('.day[date-month="' + eventMonth + '"][date-day="' + eventDay + '"]').slideDown('fast');
$('.day').find('.close').remove();
$('.day').find('.save').removeClass('save').addClass('remove');
$('.day').find('.remove').next().addClass('hidden-print');
remove();
sortlist();
} else {
$(this).next().text('Save to personal list');
var eventMonth = $(this).closest('.day-event').attr('date-month');
var eventDay = $(this).closest('.day-event').attr('date-day');
var eventNumber = $(this).closest('.day-event').attr('data-number');
$('.day[date-month="' + eventMonth + '"][date-day="' + eventDay + '"][data-number="' + eventNumber + '"]').slideUp('slow');
setTimeout(function() {
$('.day[date-month="' + eventMonth + '"][date-day="' + eventDay + '"][data-number="' + eventNumber + '"]').remove();
}, 1500);
}
});
function remove() {
$('.remove').click(function() {
if (this.checked) {
$(this).next().text('Remove from personal list');
var eventMonth = $(this).closest('.day').attr('date-month');
var eventDay = $(this).closest('.day').attr('date-day');
var eventNumber = $(this).closest('.day').attr('data-number');
$('.day[date-month="' + eventMonth + '"][date-day="' + eventDay + '"][data-number="' + eventNumber + '"]').slideUp('slow');
$('.day-event[date-month="' + eventMonth + '"][date-day="' + eventDay + '"][data-number="' + eventNumber + '"]').find('.save').attr('checked', false);
$('.day-event[date-month="' + eventMonth + '"][date-day="' + eventDay + '"][data-number="' + eventNumber + '"]').find('span').text('Save to personal list');
setTimeout(function() {
$('.day[date-month="' + eventMonth + '"][date-day="' + eventDay + '"][data-number="' + eventNumber + '"]').remove();
}, 1500);
}
});
}
/**
* Sort personal list
*/
function sortlist() {
var personList = $('.person-list');
personList.find('.day').sort(function(a, b) {
return +a.getAttribute('date-day') - +b.getAttribute('date-day');
}).appendTo(personList);
}
/**
* Print button
*/
$('.print-btn').click(function() {
window.print();
});
},
};
$(document).ready(function() {
calendar.init('ajax');
});
|
