Can you add pictures/images to the different days of the week for the calendar?

I am trying to add and save images to the different days of the weeks instead of text and was wondering if that is possible with Mobiscroll?

Hi @Elizabeth_Warren :wave:

Can you share more context about the use case/ requirement?

I am attempting to construct an app for my class that saves images on different days of the week so the user can go back to that image on whatever day they saved it to. In this case it is whatever outfit they wore for that day they could save it and in the future look back at it if needed.

Thanks for the details @Elizabeth_Warren :+1:

Can you also share a screenshot or mockup of how you imagine this calendar with the images?


Here is an idea of what I was thinking, with the outfit being one picture and then saving it on the specific day of the week. so the user can go back and look at it.

Thanks for sharing @Elizabeth_Warren :+1:

Yes, that is achievable if you are using the renderLabel option. Inside that, you will be able to add images to the events that don’t necessarily have any title/ time part, etc. So, basically the idea would be to show the image as an event on the day cell of the calendar.

1 Like

How would you implement this in code? I am a novice not knowing where to start

I also have this question and can’t figure out from the documentation of the renderLabel (and LabelContent) how to do this. Are there any worked example(s) to study?

Hello @Cindy_Corritore @Elizabeth_Warren :wave:

You can find an example on the demo page of using the renderLabel option: JQuery Event calendar Custom event labels Example | Mobiscroll

Thanks Zsombor - that answers several questions. But it is still unclear how to add an image - I know it would go in the red box code shown below - but can you give me an example of how?

Here you can find another example where we are adding images to the event: JQuery Agenda Full event customization Example | Mobiscroll - this should help you understand how you can achieve your requirement. Note: in the shared example we are using the renderEvent option since it’s an Agenda-specific thing but, the idea is to see how we are adding images, the same is achievable with the renderLabel, which you need to use in case of the Event Calendar.