我正在使用 jQuery Fullcalendar 插件,它在月视图中效果很好。 我现在正在玩周视图。 问题是,当我每周来回移动时,它似乎只在新月份的一周开始时重新获取事件。 因此,如果周视图是一个月的 1/2 和新月份的 1/2(例如,2012 年 7 月的最后一周,从 7 月 29 日开始,到 8 月 4 日结束),那么它就不会' t 请求重新获取事件。仅当我再次单击前进并且我在(8 月 5 日 - 8 月 11 日)这一周时,它才会重新获取事件。
问题是我只在服务器上加载 1 个特定月份的事件(因此我不会加载下个月的前几天)。请参阅下面的代码,我在其中传递月份和年份,以便我的服务器知道要查询哪些数据。
$.ajax({
url: '/EventCalendar/GetCalEvents/',
dataType: 'json',
data: {
month: $('#calendar').fullCalendar('getDate').getMonth() + 1,
year: $('#calendar').fullCalendar('getDate').getUTCFullYear(),
},
success: function (data) {
callback(data.Events);
}
});
这是设计使然,我真的应该返回下个月第一周的事件,还是这是一个错误?为什么完整日历没有触发事件请求?
那是因为您的默认视图设置为月。加载日历时,它会加载整个月的事件。现在,当您切换到“周视图”时,它不会加载事件,因为它已经具有整个月的事件。 FullCalendar 智能地获取事件。
如果您将默认视图设置为周或日,如下所示:
defaultView: 'agendaWeek',
您会看到它将分别加载每周的事件。 我希望这有帮助。谢谢
$('#calendar').fullCalendar('getView')
吗?
这将返回一个视图对象
,其中包含开始和结束时间。您可以传递这些值,并返回视图显示的时间范围内发生的所有事件,而不是传递单个月份和年份。 更好的是,您可以使用完整日历的功能直接从 json feed 中提取
。开始值和结束值会自动作为 url 参数传递,并且当视图发生变化时(例如从一周到一周、从一月到一月、从一天到一天或从任何主视图移动时),事件都会更新。编辑:重新阅读本文后,您可能还想尝试将 lazyFetching
设置为 false。不要定义自己的.fullCalendar('getDate')
),而是使用内置数据源。然后,您将拥有visible
日历范围作为 ajax 服务器端事件获取的输入。初始化时设置源
.fullCalendar(...)
。请参阅有关 设置 EventSource
$.ajax(...)
选项以获取 JSON 日历事件数据的文档。$('#calendar').fullCalendar({
// Put your other fullCalendar options here too
eventSources: [
{
url: '/EventCalendar/GetCalEvents/',
dataType: 'json',
error: function(jqXHR, textStatus, errorThrown) {
// Logging any error that occured fetching the events
if(console && console.error){ console.error(arguments); }
alert("Couldn't fetch events, check the javascript console error log.");
}
}
]
});
对 /EventCalendar/GetCalEvents/
的请求将包含两个 UNIX 时间戳
(自 1970 年以来的秒数):
start
end
_
ajax 缓存清除技术。忽略这个吧。 对服务器的请求示例
/EventCalendar/GetCalEvents/?start=1262332800&end=1265011200&_=1263178646
只需解析日期值,并返回与
start
-end
范围的任何部分重叠的任何日历事件。我认为数据传递到后端并没有错误。数据已传递,这就是我所做的...我是 Fullcalendar 的新手...这对我有用:
eventSources:
[
// your event source
{
url: '/ajax-load-holidays',// use the `url` property
type: 'POST',
datatype: "JSON",
data : function()
{ // a function that returns an object
var date = new Date($('#calendar').fullCalendar('getDate'));
month_integer = date.getMonth();
year_integer = date.getFullYear();
return {
month: month_integer,
year: year_integer
}
},
error: function() {
alert('there was an error while fetching eventsin hol!');
},
color: 'yellow', // a non-ajax option
textColor: 'blue' // a non-ajax option
},
],
eventRender: function(event, element, view) {
// lets test if the event has a property called holiday.
// If so and it matches '1', change the background of the correct day
if (event.holiday == '1') {
var dateString1 = event.start.format("YYYY-MM-DD");
$(view.el[0]).find('.fc-day[data-date=' + dateString1 + ']')
.css('background-color', '#FAA732','.fc-time','disable');
}
}
这是我的控制器;我在 Laravel(MVC 存储库)中这样做了:
public function LoadHoliday(Request $request)
{
$this->year = $request['year'];
$month = $request['month'];
$month++;
$this->month=$month;
$Rowdata1 = ($this->holidayFixed->getValueMonth("monthOfTheYear",$this-month));
$Rowdata2 = $this->holidayMovable->getValueMonth("monthID",$this->month);
$x = 0;
$data1[] = 0;
$data2[] = 0;
if($Rowdata1==null && $Rowdata2==null)
{
return 0;
}
else {
foreach($Rowdata1 as $value){
$mon = $value->monthOfTheYear;
$day = $value->dayOfTheMonth;
$dateD = $this->year. '-' . $mon . '-' . $day;
$data1[$x] = [
'title' => $value->description,
'start' => $dateD,
'holiday' => '1'
];
$x++;
}
foreach($Rowdata2 as $value){
$year = ($value->yearID);
$mon = $value->monthID;
$day = ($value->dateID);
$dateD = $year . '-' . $mon . '-' . $day;
$data2[$x] = [
'title' => $value->description,
'start' => $dateD,
'holiday' => '1'
];
$x++;
}
if($data1==['0'] && $data2==['0'])
{
return 0;
}
elseif($data1==['0'])
{
return $data2;
}
elseif($data2==['0'])
{
return $data1;
}
else
{
unset($data2['0']);
$data3 = array_merge($data1, $data2);
return $data3;
}
}
}