如何将图像添加到特定事件，jquery完整日历答案

【问题标题】：How to add image to specific events, jquery full calendar如何将图像添加到特定事件，jquery完整日历
【发布时间】：2012-08-14 22:23:24
【问题描述】：

我有 wp 自定义帖子类型，并且有自定义分类，其中有一个额外的字段是代表分类的图标。

所以我可以从 wpdb 查询并使用 json 将所有必要的东西传递给 jquery full calendar。

但由于目前它没有图像字段，因此无法通过提要显示图像 src。当前它有标题、url、start_date、end_date 和其他一些，但它缺少图像。

我的要求是：每个事件都属于特定的类别，并且每个类别都有自己的图像/图标，所以我不想在日历上显示事件标题，而只想显示其类别的图像

我想知道是不是像下面这样：

$jsonevents[] = array(
            'title' => $new_term,
            'image'=> $img_var,
            'start'  => $stime,
            'textColor' => '#757770',
            'backgroundColor' =>'#e8e8e8'
           );

我知道 jquery 完整日历中没有图像键，但我认为我们可能需要修改 fullcalendar.js 文件。

那么问题是有人已经修改了这个吗？

【问题讨论】：

标签： fullcalendar

【解决方案1】：

我不久前回答过类似的问题 - 我认为它也适用于这里：

full calendar - associate clickable icons with events?

看看，如果有帮助，请告诉我！

【讨论】：

但是您的代码确实将相同的图像应用于所有事件。但我想要的是为不同的事件分配不同的图像，所以基本上如果事件是 1 然后是紫色图标，如果事件是 2 然后是红色图标，如果事件是 3 然后是黄色图标。我不会在日历上显示任何标题或任何内容，只是想显示代表正在发生的特定事件的图标。
在我创建数组之前我在想什么，我可以使用 if then else 吗？所以基本上如果 $term_name=='xmas' 则不同的数组，如果 $term_name=="boxing day" 则不同的数组。
eventRender 回调使您可以在呈现之前完全控制事件元素。因此，您可以在渲染之前随意修改它。在这里您可以检查您的条件并根据需要分配适当的图像。

【解决方案2】：

不久前我也回答过类似的问题：

jquery-fullcalendar-plugin-with-check-box

在那个答案中，我给出了两种可能的选择。结帐选项 1，我展示了如何仅使用 css 和 fullcalendar 事件对象上已经可用的“className”字段将背景图像添加到 fullcalendar 事件。我在生产网站中成功地使用该方法为某些类型的事件添加小图标。

我的选项 2 与 ganeshk 提出的基本相同——使用 eventRender 回调。

【讨论】：

我已经修好了。这很简单:) 涉及 if else 条件！当然，在每个事件进入 json 和使用事件渲染之前为其分配类名。

【解决方案3】：

json 文件可以包含 imageurl 条目。

在fullcalendar.js（第 6268 和 5054 行）中，我添加了以下代码：

var imageurl = "";
if (event.imageurl) {
    imageurl = '<img src="'+event.imageurl+'" width="20"/>';
}

第 6295 行：

htmlEscape(event.title) + imageurl +

第 5059 行：

titleHtml =
            '<span class="fc-title">' +
                (htmlEscape(event.title || '') || '&nbsp;') + // we always want one line of height
                imageurl +
            '</span>';

【讨论】：