在全日历中将图像显示为背景答案

【问题标题】：Display image as background in fullcalendar在全日历中将图像显示为背景
【发布时间】：2017-01-31 21:25:46
【问题描述】：

我一直在寻找一些代码来使用图像作为 fullcalendar (fullcalendar jQuery) 中事件的背景，但我能找到的只是将图标添加到所述事件的代码。

我想做这样的事情：

更新：2016 年 9 月 23 日晚上 8 点 15 分美国东部标准时间：

我一直在尝试：

eventRender: function(event, element) {
$(element).find(".fc-day").css("background","url(https://www.mozilla.org/media/img/firefox/firefox-256.e2c1fc556816.jpg) no-repeat");
$(element).find(".fc-day").css("background-size","contain");
    }
});

到目前为止没有成功，我会继续寻找我缺少的东西。

更新：2016 年 9 月 24 日下午 2:00美国东部标准时间

进度：

    dayRender: function (date, cell) {
        cell.css("background","url(https://www.mozilla.org/media/img/firefox/firefox-256.e2c1fc556816.jpg) no-repeat center");
        cell.css("background-size","contain")
    },
    eventRender: function(event, element) {
        $(element).css("opacity", "0.75");
    }
});

现在我只需要找到一种方法来更改特定事件的背景和不透明度，因为该事件将存储在 MySQL 数据库中，正如我已经在评论中指定的那样（没有图片的事件不应该有背景或不透明度） .

【问题讨论】：

你了解css吗？
我愿意，不过我不是专家，我认为事件的后台“加载”是在 javascript/AJAX 代码中完成的。我来看看 CSS 部分。
Re: 更新 @ 815EST 与 eventRender 元素不是日容器，而是锚标记。您也许可以与 dayRender fullcalendar.io/docs/display/dayRender 挂钩以按日期完成？
你是对的，dayRender 是要走的路。

标签： jquery css image background fullcalendar

【解决方案1】：

你可以像@madalin ivascu 提到的那样使用 CSS 来做到这一点

https://jsfiddle.net/j49qtcge/

#calendar td.fc-day {
    background: url('https://www.mozilla.org/media/img/firefox/firefox-256.e2c1fc556816.jpg') no-repeat;
    background-size: contain; // cover?
}
#calendar a.fc-event {
    opacity: 0.75;
}

使用“月”以外的视图可能需要不同的 CSS

【讨论】：

非常感谢您的回答，这肯定会对我有很大帮助。我将做进一步的测试，因为我将在一个链接到 MySQL 日历的数据库中获取图片。我发现了以下内容：fullcalendar.io/docs/event_rendering/eventRender 这将有助于根据事件渲染图片。我会向大家发布代码

【解决方案2】：

我来自未来写作=)

我试过这个答案：

 eventRender: function(event, element) { 
    element.find('.fc-event-inner').css("background","url(https://assets.pokemon.com/assets//cms2-es-es/img/play-games/mini-games/alolan-volcanic-panic/alolan-volcanic-panic-169.jpg) no-repeat right");
    element.find('.fc-event-inner').css("background-size","contain");
    element.find('.fc-event-inner').css("opacity","0.75");
  }

【讨论】：