Arshaw 全日历在月视图的每个单元格中添加自定义 html

Arshaw fullcalender add custom html in each cell of month view

本文关键字：单元格 添加 html 自定义 日历 视图 Arshaw      更新时间：2023-09-26

我正在尝试在呈现月份视图的每个单元格中插入一个自定义 html 表。为此，我使用 ajax 调用服务。此服务返回一个我输入到单元格中的 html 表。

为此，我在全日历中输入了以下代码.js

bodyCells.each(function (i, _cell) {
                cell = $(_cell);
                date = indexDate(i);
                if (date.getMonth() == month) {
                    cell.removeClass('fc-other-month');
                } else {
                    cell.addClass('fc-other-month');
                }
                if (+date == +today) {
                    cell.addClass(tm + '-state-highlight fc-today');
                } else {
                    cell.removeClass(tm + '-state-highlight fc-today');
                }
                cell.find('div.fc-day-number').text(date.getDate());
                //Paras Change
                $(CallService(date)).appendTo(cell.find('div.fc-day-content').empty());
                if (dowDirty) {
                    setDayID(cell, date);
                }

            });

在函数"bodyCells.each"中，其中CallService是我对函数的调用，而函数又调用了服务。

我对服务的调用是在另一个javascript文件中 fullcalenderDataHelp.js代码如下。

function CallService(date) {
    var table = null;
    var newDate = (date.getMonth() + 1) + '/' + (date.getDate()) + '/'+date.getFullYear();
    $.ajax({
        type: "POST",
        url: "http://localhost:57747/ScheduleServer.svc/GetScheduleByDay",
        data: '{"day":"' + newDate + '"}',
        timeout: 7000,
        contentType: "application/json",
        success: function (response, textStatus, jqXHR) {
            table = $.parseJSON(response.d)
        }
    })
   //alert(table);   
   return table;
}

当 html 表被硬编码时它可以工作，但是当我进行实际的 ajax 调用并尝试显示 html 表时，它似乎不起作用。我认为 ajax 调用需要更多时间或其他东西。

我将不胜感激对此的任何帮助。

谢谢帕拉斯

我知道

这是一个旧帖子。自从我提出这个问题并在我的项目中使用它以来，日历插件本身已经走了很长一段路。这与版本 1.5.4 相关。不知道你是否仍然可以在当前版本中使用它。我有原始的全日历.js在下面提到的 plunk 中。

我最初的问题是关于如何在月视图的每个单元格中添加自定义 HTML。

在我发布

问题后的几天内，我找到了这个问题的答案，但当时我没有常识在这里发布它。我一直认为我可能会从一些可能回答这个问题的专家那里得到更好的方法。

那一天从未到来。我今天试图访问该网站，看看这是否是更高版本中包含的功能，但我找不到任何相关内容。

答案相当微不足道。在bodyCells.each的函数中，我添加了一行代码，如下所示。

$(CallService(date)).appendTo(cell.find('div.fc-day-content').empty());

CallService(date) 是返回一些 html 的函数，这些 html 附加到包含作为参数传递的日期的单元格。

这是一个工作弹道。

不过，有一件事要记住。在加载月视图上的每个单元格之前调用此函数。这意味着此函数调用将导致延迟。

希望可以帮助任何在基本全日历的月视图中需要自定义 HTML 的人。

相关文章：