Display image as background in fullcalendar

问题

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

回答1:

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

回答2:

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

来源：https://stackoverflow.com/questions/39653635/display-image-as-background-in-fullcalendar

标签

jquery

css

image

background

fullcalendar