Моя цель - использовать версию 3 и выше, так как она поддерживает допустимую функцию диапазона, а настраиваемое представление версии 3 вполне понятно. Итак, я должен был использовать версию 3 для просмотра года. Этот год просмотра ограничен только одним годом, который состоит из 12 месяцев. Объявите пользовательский вид в полной реализации календаря.
просмотров: {CustomView: {type: 'custom',}}
Объявить кнопку year в заголовке для пользовательского представления года. Затем в customButtons: определите, что происходит, когда пользователь нажимает эту кнопку.
customButtons: {year: {text: 'year', click: function () {$ ('# calendar'). fullCalendar ('changeView', 'CustomView'); }}}
Затем получите ссылку (FC) на пространство имен root fullcalendar и класс (View), от которого наследуются все представления.
var F C = $. FullCalendar; var View = F C .View;
Построить представление внутри render: function() нашего класса CustomView. Создайте таблицу, содержащую 12 полей (3 столбца и 4 строки) и добавьте к f c -view. Затем упорядочите каждое событие в объекте с необходимой информацией и добавьте к events_array. events_array, содержащему объекты событий. Получить начало следующих 12 месяцев, с которого период месяца начинается в массиве months. Затем l oop в массиве месяцев и создание экземпляра представления fullcalendar в каждом поле этой таблицы, созданной с использованием идентификатора. Идентификатор - значение от months (например: «январь_2019»). Установите продолжительность один месяц и передайте в массив событий. Итак, каждое поле показывает вид за один месяц вместе с событиями. 12 полей показывают представление в течение 12 месяцев.
CustomView = View.extend ({render: function () {}}
Зарегистрируйте наш класс в системе представления.
F C .views.custom = CustomView;
<?php
require_once('bdd.php');
// information from sql
// $event_2 is events array
// $event_3 are array of earliest event start and latest event end date, chosen period start and end date,
?>
<html>
<head>
<style>
#container
{
width: 100%;
position: relative;
}
#calendar
{
width: 900px; /*can be in percentage also.*/
height: auto;
margin: 0 auto;
padding: 10px;
position: relative;
}
td.fc-sun
{
background-color: #535450 !important;
}
</style>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src='js/moment.min.js'></script>
<script src='v_3/fullcalendar.min.js'></script>
<link rel="stylesheet" href="v_3/fullcalendar.min.css" />
<script>
$(document).ready(function()
{
var event ='<?php echo json_encode($events_2);?>';
event =JSON.parse(event);
limit ='<?php echo json_encode($events_3);?>';
limit =JSON.parse(limit);
events_array=[];
for(i=0;i<event.length;i++)
{
//parameter for event Array-https://fullcalendar.io/docs/event-object
start_array=event[i]['start'].split(" ");
end_array=event[i]['end'].split(" ");
if(start_array[1]==='00:00:00')
{
start =start_array[0];
}
else
{
start =event[i]['start'];
}
if(end_array[1]==='00:00:00')
{
end =end_array[0];
}
else
{
end =event[i]['end'];
}
console.log(start+'=>'+end);
object_data=
{
id :event[i]['id'],
title :event[i]['remark']+'-'+event[i]['title'],
start :start,
end :end,
color :event[i]['color'],
}
events_array.push(object_data);
}
$('#calendar').fullCalendar
({
defaultDate: limit[0]['earliest'],
validRange: {
start : limit[0]['earliest'],
end : limit[0]['final']
},
header :
{
left :'prev,next,today',
center :'title',
right :'year,agendaWeek,month'
},
events : events_array,
customButtons:
{
year:
{
text:'year',
click: function()
{
$('#calendar').fullCalendar('changeView', 'CustomView');
}
}
},
views:
{
CustomView:
{
type: 'custom',
}
}
})
var view = $('#calendar').fullCalendar('getView');
//custom view:
var FC = $.fullCalendar; //a reference to FullCalendar's root namespace
var View =FC.View; //the class that all views must inherit from
var CustomView; //our subclass
start_year =limit[0]['earliest'].split("-")[0];
end_year =limit[0]['final'].split("-")[0];
start_month =parseInt(limit[0]['fye_start'].split("-")[1]);
CustomView = View.extend(
{
render: function()
{
$('.fc-prev-button').addClass('fc-state-disabled');
$('.fc-next-button').addClass('fc-state-disabled');
//change the title
document.getElementsByClassName("fc-center")[0].getElementsByTagName('h2')[0].innerHTML = start_year;
//https://stackoverflow.com/questions/10832179/result-of-getting-next-12-months-in-javascript-is-messed-up
var months =getNext12MonthNamesWithYear(limit[0]['fye_start']);
var table ='<table align="center" style="width:100%">';
var m=0;
for(i=1;i<=4;i++)
{
table+='<tr>';
for(j=1;j<=3;j++)
{
table+='<td height="100"><div id="'+months[m]+'"></div></td>';
m++;
}
table+='</tr>';
}
table+='</table>';
$('.fc-view').append(table);
for(n=0;n<months.length;n++)
{
year =months[n].split("_")[1];
month=months[n].split("_")[0];
//https://stackoverflow.com/questions/13566552/easiest-way-to-convert-month-name-to-month-number-in-js-jan-01/27805696
month=getMonthFromString(month);//convert month string to month no
//month compulsory to have 2 digit
if(month>=10)
{
c=month;
}
else
{
c='0'+month;
}
$('#'+months[n]).fullCalendar
(
{
header:
{
left: '',
center: 'title',
right: ''
},
events : events_array,
defaultDate : year+'-'+(c)+'-01',
//set the year range limit - fullcalendar.min.js v3.3.1 & above support this
defaultView:'month',
duration:
{
months: 1
}
})
}
},
}
)
FC.views.custom = CustomView; // register our class with the view system*/
})
function getNext12MonthNamesWithYear(date)
{
var now = new Date(date);
var month = now.getMonth();
var year = now.getFullYear();
var names = ['January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'];
var res = [];
for (var i = 0; i < 12; ++i)
{
res.push(names[month] + '_' + year);
if (++month === 12)
{
month = 0;
++year;
}
}
return res;
}
function getMonthFromString(mon)
{
return new Date(Date.parse(mon +" 1, 2012")).getMonth()+1
}
</script>
</head>
<body>
<div id='calendar'></div>
</body>
В ожидании лучшего решения.