JS Animated. Как работать с плагином FullCalendar

Более детальную информацию об общих настройках изображения Вы можете узнать на http://arshaw.com/fullcalendar/docs/display/

Далее идет объект источника событий. "Источник событий" — это то, что предоставляет FullCalendar данные о событиях. Начиная с версии 1.5, у объектов событий могут быть «Настройки», связанные с ними:

events: [
				{
					title: 'Praent vestibulum',
					start: new Date(y, m, 1, 9, 00),
					end: new Date(y, m, 1, 10, 00),
					allDay: false
				},
				{
					title: 'Vestibulum iaculis lacinia',
					start: new Date(y, m, 2, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 4, 16, 00),
					allDay: false
				},
				{
					title: 'Aliquam erat volpat. Duis ac turpis',
					start: new Date(y, m, 9, 16, 00),
					allDay: false
				},
				{
					title: 'Donec in velit vel ipsum',
					start: new Date(y, m, 10, 16, 00),
					allDay: false
				},
				{
					title: 'Praent vestibulum',
					start: new Date(y, m, 13, 9, 00),
					allDay: false
				},
				{
					title: 'Vestibulum iaculis lacinia',
					start: new Date(y, m, 15, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 17, 16, 00),
					allDay: false
				},
				{
					title: 'nteger rutrum ante eu lacusi',
					start: new Date(y, m, 18, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 19, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 23, 16, 00),
					allDay: false
				},
				{
					title: 'nteger rutrum ante eu lacus',
					start: new Date(y, m, 24, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 27, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 28, 16, 00),
					allDay: false
				},
				{
					title: 'Vestibulum iaculis lacinia',
					start: new Date(y, m, 29, 16, 00),
					allDay: false
				},
				{
					title: 'Praent vestibulum',
					start: new Date(y, m, 30, 9, 00),
					allDay: false
				}
			]
		});
		
	});
    </script>

Чтобы отображались новые события нужно отредактировать существующие JavaScript объекты, которые использует FullCalendar для хранения информации о событиях календаря. Можно их скопировать, чтобы добавить больше событий. Ниже приведен пример куска кода, который нужно отредактировать или скопировать:

				{
					title: 'Praent vestibulum',
					start: new Date(y, m, 1, 9, 00),
					end: new Date(y, m, 1, 10, 00),
					allDay: false
				},
                

Давайте внимательнее рассмотрим свойства:

1. title (String. обязательно) — Текст на событии. Например, можно изменить на ‘A new event’,
2. start (Date. обязательно) – Дата или время начала события. Например, если вы собираетесь добавить новое мероприятие, которое пройдет 05.23 (текущего года) и начнется после обеда в 4.30, то строку нужно изменить так: start: new Date(y, m, 23, 16, 30);
3. allDay (true или false. необязательно) — Если событие происходит в определенное время суток. Это свойство определяет, показывать ли время мероприятия. Если указывая Event Objects (объекты события) для событий или eventSources (источники событий) Вы не задали значения для этого свойства, то они будут взяты из allDayDefault, которое обычно стоит на true.
4. end (Date. необязательно) – Дата или время окончания события.

• Если мероприятие проходит целый день (all-day)… дата окончания включительна. Это означает, что событие, которое началось 10 ноября и закончилось 12 ноября, в календаре будет охватывать 3 дня. .
• Если событие проходит НЕ длится целый день (NOT all-day) … дата окончания единична. Это означает, что ваше мероприятие заканчивается в полночь, и не будет отображаться на следующий день.

Для других событий, которые можно использовать смотрите http://arshaw.com/fullcalendar/docs/event_data/Event_Object/

Этот код использует индентификатор "calendar" в теле страницы. Календарь (calendar) помещают в тег div:

Благодаря этому появляется календарь на месяц с некоторыми случайными событиями на нем.

Опции

Большинство документация FullCalendar описывает опции, которые \ влияют на внешний вид или поведение календаря. Опции обычно устанавливают, когда календарь инициализирован. Как, например:

$('#calendar').fullCalendar({
weekends: false // will hide Saturdays and Sundays
});

Функции Callback

Callbacks являются вроде как опциями, но это функции, которые звонят, когда происходит что-то особенное. В следующем примере, окно предупреждения появляется, когда пользователь нажимает на день:

$('#calendar').fullCalendar({

    dayClick: function() { 

        alert('a day has been clicked!');

    }

});

Для более детальной информации о плагине FullCalendar посетите http://arshaw.com/fullcalendar/. Здесь можно скачать самые последние версии плагина и также получить поддержку от разработчиков.

Пожалуйста, ознакомьтесь с детальным, обучающим видео ниже: