Display image as background in fullcalendar

2019-07-24 22:58发布

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:

event with image background

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).

2条回答
叼着烟拽天下
2楼-- · 2019-07-24 23:42

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

查看更多
叼着烟拽天下
3楼-- · 2019-07-24 23:44

I'm from the future writing =)

I tried this answer:

 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");
  }
查看更多
登录 后发表回答