为什么 jQuery FullCalendar 在跨越一个月时不要求重新获取周视图中的事件?

问题描述 投票:0回答:4

我正在使用 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);
  }
});

这是设计使然,我真的应该返回下个月第一周的事件,还是这是一个错误?为什么完整日历没有触发事件请求?

jquery ajax fullcalendar
4个回答
1
投票

那是因为您的默认视图设置为。加载日历时,它会加载整个月的事件。现在,当您切换到“周视图”时,它不会加载事件,因为它已经具有整个月的事件。 FullCalendar 智能地获取事件。 如果您将默认视图设置为周或日,如下所示: defaultView: 'agendaWeek',

您会看到它将分别加载每周的事件。
我希望这有帮助。谢谢


1
投票
$('#calendar').fullCalendar('getView')

吗?


这将返回一个

视图对象

,其中包含开始和结束时间。您可以传递这些值,并返回视图显示的时间范围内发生的所有事件,而不是传递单个月份和年份。 更好的是,您可以使用完整日历的功能直接从 json feed 中提取

。开始值和结束值会自动作为 url 参数传递,并且当视图发生变化时(例如从一周到一周、从一月到一月、从一天到一天或从任何主视图移动时),事件都会更新。

编辑:重新阅读本文后,您可能还想尝试将 lazyFetching

设置为 false。

不要定义自己的

1
投票
功能并设置自己的范围(通过解析

.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 年以来的秒数):

/EventCalendar/GetCalEvents/?start=1262332800&end=1265011200&_=1263178646

只需解析日期值,并返回与
start
-

end

 范围的任何部分重叠的任何日历事件。

我认为数据传递到后端并没有错误。数据已传递,这就是我所做的...我是 Fullcalendar 的新手...这对我有用:

0
投票
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;
        }
    }
}


© www.soinside.com 2019 - 2024. All rights reserved.