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

Event calendars & schedulers
1

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?

2

Hi @Elizabeth_Warren :wave:

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

3

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.

4

Thanks for the details @Elizabeth_Warren :+1:

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

5

IMG_1336
IMG_13361920×1225 97 KB

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.

6

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
7

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

8

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?

9

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

10

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?

1111
11111085×438 71.2 KB

11

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.

12

That last post really helped. Now all I’m missing is how to insert our data instead of the data in the sample. There are two parameters that appear to be important for this: data. I have 2 questions below. (in the first section of code below -

  1. FIRST Question: I cannot see a way to replace my data with the event data in the renderEvent: function (data) line of code below.
let inst = mobiscroll.eventcalendar("#demo-full-event-customization", {
  locale: mobiscroll.localeEn, // Specify language like: locale: mobiscroll.localePl or omit setting to use default
  theme: "ios", // Specify theme like: theme: 'ios' or omit setting to use default
  themeVariant: "light", // More info about themeVariant: https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-themeVariant
  view: {
    // More info about view: https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view
    agenda: { type: "month" },
  },

  **renderEvent: function (**data**)** {
    // More info about renderEvent: https://mobiscroll.com/docs/javascript/eventcalendar/api#renderer-renderEvent
    return (
      '<div class="md-full-event"><img class="md-full-event-img" src="https://img.mobiscroll.com/demos/' +
      data.original.img +
      '" />' +
      '<div class="md-full-event-details">' +
      '<div class="md-full-event-title">' +
      data.title +
      "</div>" +
      '<div class="md-full-event-location">' +
      '<div class="md-full-event-label">Location</div><div>' +
      data.original.location +
      "</div>" +
      '</div><div class="md-full-event-time">' +
      '<div class="md-full-event-label">Time</div><div>' +
      data.start +
      "</div>" +
      "</div></div></div>"
    );
  },
  1. SECOND Question: it is about the ‘events’ parameter in the function(events) code below. I can force my data into this parameter before the inst.setEvents(events) line. But how do I set the source of the data?
mobiscroll.getJson(
  "https://trial.mobiscroll.com/agenda-events/",
  function (events) {
    inst.setEvents(events);
  },
  "jsonp"
);

Thanks so much for the help - I hope others find it useful too.

C