在fullcalendar中以背景显示图像 [英] Display image as background in fullcalendar

问题描述

我一直在寻找一些代码来使用图像作为fullcalendar中事件的背景（

更新：2016-09-23 8:15 pm EST：

我一直在尝试：

  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，contains）; 
} 
}）; 
  

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

更新：2016-09-24 2:00 pm EST

进度：

  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，contains）
}，
 eventRender：function（event，element）{
 $（element）.css（opacity ，0.75）; 
} 
}）; 
  

现在我只需找到一种方法来改变特定事件的背景和不透明度，因为事件会被存储在一个MySQL数据库中，正如我在注释中指定的那样（没有图片的事件不应该有背景或者不透明）。

p>您可以使用CSS作为@ madalin ivascu 提及

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：包含; //封面？ 
} 
 #calendar a.fc-event {
 opacity：0.75; 
} 
  

使用'month'以外的视图可能需要不同的CSS，但

I have been looking for some code to use an image as a background for the events in fullcalendar (fullcalendar jQuery), but all I was able to find was code to add icons to said events.

I am looking to do something like this:

UPDATE: 2016-09-23 8:15 p.m. EST:

I have been trying with:

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");
    }
});

With no success so far, I'll keep looking to find what I am missing.

UPDATE: 2016-09-24 2:00 p.m. EST

Progression:

    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");
    }
});

Now I just need to find a way to change the background and opacity on specific events as the event will be stored in a MySQL database as I specified already in a comment (event with no picture should not have a background nor opacity).

解决方案

You can do it with CSS as @madalin ivascu mentioned

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;
}

Using views other than 'month' may need different CSS though

这篇关于在fullcalendar中以背景显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！