Insert picture on the days events

[Alejandro888]

Please advice how to put picture on the days events like this:

Thank you

[deviprsd]

There are two ways in which you can achieve this, one is adding the image link in the url property or the note property of the events. url property is processed by Calendario to determine if the content should be wrapped with <a></a> or <span></span>. So, if you use url your events will appear as links in demo1 and demo3. But note here is a very dynamic property, which is untouched by Calendario. You can store arrays, objects even nested one in them. Ex,

{
     "05-01-2017": [{
	    "content": "Some event",
	    "allDay": true,
            "note": {
                 "img": "link to image"
             }
     }]
}

https://github.com/deviprsd21/Calendario/blob/master/index2.html#L94, this is the custom function that shows the events and is not a part of calendario. Give it a read and look at the documentation in the readme, also look how click event is used in file mentioned above after doing all these if you still face any trouble then ask for more help.

[Alejandro888]

Hi thank you, I use demo 2
So I put this:
'02-07-2017' : [{
"content": "Some event",
"allDay": true,
"note": {
"img": "BCF.jpg"
}
}]
}

no error, but on calendar on the note it not showing the picture, it give me this: [object Object]

[deviprsd]

Are you new to JavaScript and coding? Because if so, I'll give the whole answer but if you read and understand this https://github.com/deviprsd21/Calendario/blob/master/index2.html#L94 you will have more understanding of using Calendario to the full extent

[Alejandro888]

ye I am a noob :) I was hopeing that you will give me the cod line. :(

[deviprsd]

https://github.com/deviprsd21/Calendario/blob/master/index2.html#L75

$('#calendar').on('shown.calendar.calendario', function(){
    $('div.fc-row > div').on('onDayClick.calendario', function(e, dateprop) {
        if(dateprop.data) {
            showEvents(dateprop.data, dateprop); //this has been changed a little
        }
    });
});

https://github.com/deviprsd21/Calendario/blob/master/index2.html#L94

function showEvents( contentEl, dateprop ) {
     //Code till line 98 stays same
     var imageEvents = []
     for(var i = 0; i < contentEl.note; i++) {
         imageEvents.push($('<img>', {src: contentEl.note[i].img}).html());
     }
     $events.append( imageEvents.join('') , $close ).insertAfter( $wrapper );
     //setTimeout also remains unchaged
 }

Try this

[Alejandro888]

well I put the two pices of script in calendario.js I use the
'02-07-2017' : [{
"content": "Some event",
"allDay": true,
"note": {
"img": "BCF.jpg"
}
}]
}

and now when I click the date the window of event that slide bottom to top will not open.

[deviprsd]

Please paste your edited code, I'm giving a lot of time but github isn't the place you ask for help.

[Alejandro888]

I appreciate your time and effort.
So I use the Calendario-master demo2
and if you please modifiy the script for this

And please tell me what to paste where to put it js or css

[deviprsd]

I don't have much time to help you with all of it, do one thing. Ask your question on stackoverflow and in your question add this issue link #23 so they can read through it and help you out. As a developer, the best way to learn is by not spoon feeding. You will learn to use js and css soon, but I have a lot of deadlines to catch up.

[Alejandro888]

thank you for your time, I will try on stack.