Yii2控制器传递事件数据到FullCalendar无法显示如何解决

核心问题1：控制器返回JSON结构不符合FullCalendar要求 #

FullCalendar的events字段默认期望接口直接返回事件对象数组，但你的控制器返回数据多套了一层data字段，实际返回结构为：

{"data": [{"title":"Repeating Event", ...}]}

FullCalendar无法识别外层的data包裹，自然加载不到事件。

修复方法： #

修改控制器actionEvents的返回逻辑，直接返回事件数组即可：

public function actionEvents() {
    $data = [];

    $data[] = array(
        'title' => 'Repeating Event',
        'start' =>  '2021-10-07T16:00:00',
        'description' => 'Lorem ipsum dolor sit ncididunt ut labore',
        'end' => '2021-10-08T16:00:00',
        'className' => "fc-event-danger"
    );

    $response = Yii::$app->response;
    $response->format = \yii\web\Response::FORMAT_JSON;
    // 去掉外层data包裹，直接返回事件数组
    return $data;
}

核心问题2：事件接口地址拼接错误 #

你用window.location.href + '/events'拼接接口地址非常容易出错：如果当前页面URL带参数、末尾有斜杠、或是开启了Yii的pathinfo伪静态规则，都会生成无效的404地址。

修复方法： #

在视图文件中用Yii官方的URL生成器生成正确的接口地址，替换原有拼接逻辑：

// 假设你的事件方法在Site控制器下，根据实际情况修改控制器名
var calendarEvents = '<?= \yii\helpers\Url::to(["site/events"]) ?>';

其他可排查点 #

• 你写的测试事件时间为2021年10月，日历默认打开是当前日期，需要手动切换到2021年10月才能看到测试事件，建议先修改为最近一周的日期测试。
• JS代码中有笔误：element.find('.fc-list-item-title').lenght !== 0中的lenght拼写错误，应为length，该问题不影响事件加载，只会导致列表视图下的事件描述不显示。
• 打开浏览器开发者工具的「网络」面板，检查events接口是否正常响应，有没有404、跨域、权限拦截等异常。

内容的提问来源于stack exchange，提问作者top