FullCalendar — события на одну неделю, события по дням недели

3 Июл
2012

Привет всем, сразу хотел попросить не судить строго, если что-то не так, это первый пост который я пишу на блоге. Хочу рассказать тем, кто может быть, когда то столкнётся с такой маленькой проблемкой при использовании FullCalendar, как события относительно дней недели, а не дат. Стояла задача сделать расписание занятий с понедельника по пятницу, причем следующая неделя должна быть с таким же расписанием, как и предыдущая. Решение такой задачи очень простое, но может быть новичкам будет полезно. Я надеюсь на это!
Собственно само решение:
Для этого, создадим маленькую функцию, которая будет возвращать нам дату понедельника текущей недели.

   function getMondayDate(date) {
	var m = date.getMonth();
	var y = date.getFullYear();
	var k = date.getDay() || 7;
	return new Date(y,m,date.getDate() - (k-1));
}

В функцию передаем текущую дату new Date(), она нам возвращает понедельник текущей недели.
Не забываем, что в javascript индексы дней начинаются с нуля. getDay(0) – Воскресенье, getDay(1) – Понедельник и так далее…
Ниже приведу пример использования данной функции:
	$(document).ready(function() {
		var date = getMondayDate(new Date());
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();

		$('#calendar1').fullCalendar({
                        defaultView: 'agendaWeek',
			events: [
 
				{
					title: 'Событие Понедельника',
					start: new Date(y, m, d, 9, 0),
                                        end: new Date(y, m, d, 10, 0),
					allDay: false,
                                        color: '#aedb97',
                                        textColor: '#3d641b'
				},
                                {
					title: 'Событие Вторника',
					start: new Date(y, m, d+1, 10, 0),
                                        end: new Date(y, m, d+1, 10, 45),
					allDay: false
				}
                                
			]
		});

	});

Вот в принципе и все, так же можно отключить виды календаря месяц и день, и оставить только неделя. Это можно сделать следующим образом:
header: {
left: '',
right: 'agendaWeek '
}
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх