Inserting an image onto a script

Hello,

as a project I have to design a website with several functionalities, including a calendar which is working just fine.

this can be seen here:
http://cudamine.com/icame/sitemundial/index.html

(you will have to click “CALENDARIO” at the top to see it)

or if you want to see the calendar outside the iframe:

anyway, the way to insert details into each day of the month is through running a script:


$(document).ready(function() {
	
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		
		$('#calendar').fullCalendar({
			editable: true,
			events: [
				{
					title: 'All Day Event',
					start: new Date(y, m, 1)
				},

“title:” being the text that is displayed.

I would like to know if there is a way for me to insert an image onto the title, the idea is to put up something like “Team A VS Team B” with both team flags there as well.

Being extremely newby to javascript, I hope i was clear enough, thanks in advance.

Hello again, I’m one more time having issues with the calendar, and this time I really need some quick help, as I need to present this in a few days.

Anyway:
i want to implement the following:

This is what I tried:


<script type='text/javascript'> 
 
	$(document).ready(function() {
	
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		
		$('#calendar').fullCalendar('gotoDate', 2010, 7);
		$('#calendar').fullCalendar({
			editable: true,
			events: [
		 			{
					imageAfterTime: $("<img src = 'images/flags/za.png' style='width:19px;height:13px'/>"),
					imageAfterTitle: $("<img src = 'images/flags/mx.png' style='width:19px;height:13px'/>"),
					title:' RSA-MEX ',
					start:   '2010-06-11T14:30:00',
					allDay: false,
					},

The URL of my calendar is:

(should you need to see more code)

This of course, isn’t working.

Can anyone help me call this ‘gotoDate’ thing? I’m terrible at this…

The line of code that you use for gotoDate needs to be moved so that it occurs after the code that creates the calendar.

Heh, I did figure it out yesterday :stuck_out_tongue:

If you check my last link, you will see that the flags are now properly being displayed.

Thanks for the help!

i’ve been trying since my last message… no dice, losing my mind over here, tried so manu sequences, looked at it logically…

this is what makes sense to me:

timeFormat: ‘H(:mm)’ // uppercase H for 24-hour clock
});
eventRender: function(event, eventElement){
if (event.imageAfterTime)
{
eventElement.find(‘span.fc-event-time’).after($(event.imageAfterTime));
}
if (event.imageAfterTitle)
{
eventElement.find(‘span.fc-event-title’).after($(event.imageAfterTitle));
}
}
});
});

Check out the syntax diagrams for JavaScript.

This is the syntax that you’re dealing with:

I think that you do have what it takes to figure this out.

Check the braces and parenthesis, for it is there you will find the issue.

Many thanks pmw57,

eventRender: function(event, eventElement){
if (event.imageAfterTime)
{
eventElement.find(‘span.fc-event-time’).after($(event.imageAfterTime));
}
if (event.imageAfterTitle)
{
eventElement.find(‘span.fc-event-title’).after($(event.imageAfterTitle));
}
}
});

did the trick.

I must say your method to get us thinking is rather good as well! :stuck_out_tongue:

Ok, new issue, I’m trying to convert my time to 24h format.

And this is how my code looks:


$(document).ready(function() {
	
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		
		
		$('#calendar').fullCalendar({
			editable: true,
			events: [
		 			{
					imageAfterTime: $("<img src = 'images/flags/ad.png' style='width:19px;height:13px'/>"),
					imageAfterTitle: $("<img src = 'images/flags/ad.png' style='width:19px;height:13px'/>"),
					title:' RSA-MEX ',
					start:   '2010-06-11T14:30:00',
					allDay: false,
					},
					{
					imageAfterTime: $("<img src = 'images/flags/ad.png' style='width:19px;height:13px'/>"),
					imageAfterTitle: $("<img src = 'images/flags/ad.png' style='width:19px;height:13px'/>"),
					title:' URU-FRA ',
					start:   '2010-06-11T19:30:00',
					allDay: false
				},
					{
					imageAfterTime: $("<img src = 'images/flags/ad.png' style='width:19px;height:13px'/>"),
					imageAfterTitle: $("<img src = 'images/flags/ad.png' style='width:19px;height:13px'/>"),
					title:'KOR-GRE',
					start:   '2010-06-12T12:30:00',
					allDay: false
				},
					{
					imageAfterTime: $("<img src = 'images/flags/ad.png' style='width:19px;height:13px'/>"),
					imageAfterTitle: $("<img src = 'images/flags/ad.png' style='width:19px;height:13px'/>"),
					title:' ARG-NGA ',
					start: new Date(y, m, 12, 15, 00),
					allDay: false
				},
					{
					imageAfterTime: $("<img src = 'images/flags/ad.png' style='width:19px;height:13px'/>"),
					imageAfterTitle: $("<img src = 'images/flags/ad.png' style='width:19px;height:13px'/>"),
					title:' ENG-USA ',
					start: new Date(y, m, 12, 19, 30),
					allDay: false
				},
					{
					imageAfterTime: $("<img src = 'images/flags/ad.png' style='width:19px;height:13px'/>"),
					imageAfterTitle: $("<img src = 'images/flags/ad.png' style='width:19px;height:13px'/>"),
					title:'ALG-SVN',
					start: new Date(y, m, 13, 12, 30),
					allDay: false
				},
					{
					imageAfterTime: $("<img src = 'images/flags/ad.png' style='width:19px;height:13px'/>"),
					imageAfterTitle: $("<img src = 'images/flags/ad.png' style='width:19px;height:13px'/>"),
					title:' SRB-GHA ',
					start: new Date(y, m, 13, 15, 00),
					allDay: false
				},
					{
					imageAfterTime: $("<img src = 'images/flags/ad.png' style='width:19px;height:13px'/>"),
					imageAfterTitle: $("<img src = 'images/flags/ad.png' style='width:19px;height:13px'/>"),
					title:' GER-AUS ',
					start: new Date(y, m, 13, 19, 30),
					allDay: false
				},
					{
					imageAfterTime: $("<img src = 'images/flags/ad.png' style='width:19px;height:13px'/>"),
					imageAfterTitle: $("<img src = 'images/flags/ad.png' style='width:19px;height:13px'/>"),
					title:'NED-DEN',
					start: new Date(y, m, 14, 12, 30),
					allDay: false
				},
					{
					title:' JPN vs CMR',
					start: new Date(y, m, 14, 15, 00),
					allDay: false
				},
					{
					title:' ITA vs PAR',
					start: new Date(y, m, 14, 19, 30),
					allDay: false
				},
					{
					title:' NZL vs SVK',
					start: new Date(y, m, 15, 12, 30),
					allDay: false
				},
				    {
					className:'pt',
					title:' CIV vs POR',
					start: new Date(y, m, 15, 15, 00),
					allDay: false
				},
				    {
					title:' BRA vs PRK',
					start: new Date(y, m, 15, 19, 30),
					allDay: false
				},
				    {
					title:' HON vs CHI',
					start: new Date(y, m, 16, 12, 30),
					allDay: false
				},
				    {
					title:' ESP vs SUI',
					start: new Date(y, m, 16, 15, 90),
					allDay: false
				},
				    {
					title:' RSA vs URU',
					start: new Date(y, m, 16, 19, 30),
					allDay: false
				},
						 {
					title:' ARG vs KOR',
					start: new Date(y, m, 17, 12, 30),
					allDay: false
				},
					 {
					title:' GRE vs NGA',
					start: new Date(y, m, 17, 15, 00),
					allDay: false
				},
				 {
					title:' FRA vs MEX',
					start: new Date(y, m, 17, 19, 30),
					allDay: false
				},
				 {
					title:' GER vs SRB',
					start: new Date(y, m, 18, 12, 30),
					allDay: false
				},
				 {
					title:' SVN vs USA',
					start: new Date(y, m, 18, 15, 00),
					allDay: false
				},
					 {
					title:' ENG vs ALG',
					start: new Date(y, m, 18, 19, 30),
					allDay: false
				},
				{
					title:' NED vs JPN',
					start: new Date(y, m, 19, 12, 30),
					allDay: false
				},
					{
					title:' GHA vs AUS',
					start: new Date(y, m, 19, 15, 00),
					allDay: false
				},
					{
					title:' CMR vs DEN',
					start: new Date(y, m, 19, 19, 30),
					allDay: false
				},
					{
					title:' SVK vs PAR',
					start: new Date(y, m, 20, 12, 30),
					allDay: false
				},
					{
					title:' ITA vs NZL',
					start: new Date(y, m, 20, 15, 00),
					allDay: false
				},
					{
					title:' BRA vs CIV',
					start: new Date(y, m, 20, 19, 30),
					allDay: false
				},
					{
					className:'pt',
					title:' POR vs PRK',
					start: new Date(y, m, 21, 12, 30),
					allDay: false
				},
					{
					title:' CHI vs SUI',
					start: new Date(y, m, 21, 15, 00),
					allDay: false
				},
					{
					title:' ESP vs HON',
					start: new Date(y, m, 21, 19, 30),
					allDay: false
				},
					{
					title:' MEX vs URU',
					start: new Date(y, m, 22, 15, 00),
					allDay: false
				},
					{
					title:' FRA vs RSA',
					start: new Date(y, m, 22, 15, 00),
					allDay: false
				},
					{
					title:' GRE vs ARG',
					start: new Date(y, m, 22, 19, 30),
					allDay: false
				},
				{
					title: ' NGA vs KOR',
					start: new Date(y, m, 22, 19, 30),
					allDay: false
				},
				{
					title: ' SVN vs ENG',
					start: new Date(y, m, 23, 15, 00),
					allDay: false
				},
				{
					title: ' USA vs ALG',
					start: new Date(y, m, 23, 15, 00),
					allDay: false
				},
				{
					title: ' AUS vs SRB',
					start: new Date(y, m, 23, 19, 30),
					allDay: false
				},
				{
					title: ' GHA vs GER',
					start: new Date(y, m, 23, 19, 30),
					allDay: false
				},
				{
					title: ' PAR vs NZL',
					start: new Date(y, m, 24, 15, 00),
					allDay: false
				},
				{
					title: ' SVK vs ITA',
					start: new Date(y, m, 24, 15, 00),
					allDay: false
				},
				{
					title: ' DEN vs JAP',
					start: new Date(y, m, 24, 19, 30),
					allDay: false
				},
				{
					title: ' CMR vs NED',
					start: new Date(y, m, 24, 19, 30),
					allDay: false
				},
				{
					className:'pt',
					title: ' POR vs BRA',
					start: new Date(y, m, 25, 15, 00),
					allDay: false
				},
				{
					title: ' PRK vs CIV',
					start: new Date(y, m, 25, 15, 00),
					allDay: false
				},
				{
					title: ' SUI vs HON',
					start: new Date(y, m, 25, 19, 30),
					allDay: false
				},
				{
					title: ' CHI vs ESP',
					start: new Date(y, m, 25, 19, 30),
					allDay: false
				}
			],
    		timeFormat: 'H(:mm)' // uppercase H for 24-hour clock
});
			eventRender: function(event, eventElement){
                   if (event.imageAfterTime) 
					{
    					eventElement.find('span.fc-event-time').after($(event.imageAfterTime));
					}   
					 if (event.imageAfterTitle) 
					{
    					eventElement.find('span.fc-event-title').after($(event.imageAfterTitle));
					}   
                }
				
		});

As you can see in the end, I have put up that timeFormat setting, and used the syntax in the first event:

start:   '2010-06-11T14:30:00',

But i end up with no calendar at all.

One of them is spelled as imageUrl while the other is spelled as imageurl

Other than that, you can run the code through the javascript’s online lint, which will point out any remaining issues, such as trailing commas.

Very nice, fixed all my issues ant now it’s working! Many thanks!

Just a question, would it be possible to render the picture after the event time? And would it be possible to render another one in the end of the title?

here is what I have now:

My idea was to have each country flag next to its name.

There is little to be learned in having code written for you.

I suggest that you rename imageurl to imageBeforeTime, so that you can use this type of code:


if (event.imageBeforeTime) {
    eventElement.find('span.fc-event-time').before($(event.imageBeforeTime));
}

Then you can use a similar technique to place things after instead of before, or on the title instead of the time.

alright my man, no more errors.

i’ve placed the event render in the end, and i called the imageUrl thing in the first event, but still, nothing shows up, is there something else that needs to be done?, maybe in the title or something?


<script type='text/javascript'> 
 
	$(document).ready(function() {
	
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		
		
		$('#calendar').fullCalendar({
			editable: true,
			events: [
		 			{
					imageUrl: $("<img src = 'http://cudamine.com/images/web1.png' style='width:24px;height:24px'/>"),
					title:' RSA vs MEX',
					start: new Date(y, m, 11, 15, 00),
					allDay: false,
					
					},
					{
					title:' URU vs FRA',
					start: new Date(y, m, 11, 19, 30),
					allDay: false
				},
					{
					title:' KOR vs GRE',
					start: new Date(y, m, 12, 12, 30),
					allDay: false
				},
					{
					title:' ARG vs NGA',
					start: new Date(y, m, 12, 15, 00),
					allDay: false
				},
					{
					title:' ENG vs USA',
					start: new Date(y, m, 12, 19, 30),
					allDay: false
				},
					{
					title:' ALG vs SVN',
					start: new Date(y, m, 13, 12, 30),
					allDay: false
				},
					{
					title:' SRB vs GHA',
					start: new Date(y, m, 13, 15, 00),
					allDay: false
				},
					{
					title:' GER vs AUS',
					start: new Date(y, m, 13, 19, 30),
					allDay: false
				},
					{
					title:' NED vs DEN',
					start: new Date(y, m, 14, 12, 30),
					allDay: false
				},
					{
					title:' JPN vs CMR',
					start: new Date(y, m, 14, 15, 00),
					allDay: false
				},
					{
					title:' ITA vs PAR',
					start: new Date(y, m, 14, 19, 30),
					allDay: false
				},
					{
					title:' NZL vs SVK',
					start: new Date(y, m, 15, 12, 30),
					allDay: false
				},
				    {
					className:'pt',
					title:' CIV vs POR',
					start: new Date(y, m, 15, 15, 00),
					allDay: false
				},
				    {
					title:' BRA vs PRK',
					start: new Date(y, m, 15, 19, 30),
					allDay: false
				},
				    {
					title:' HON vs CHI',
					start: new Date(y, m, 16, 12, 30),
					allDay: false
				},
				    {
					title:' ESP vs SUI',
					start: new Date(y, m, 16, 15, 90),
					allDay: false
				},
				    {
					title:' RSA vs URU',
					start: new Date(y, m, 16, 19, 30),
					allDay: false
				},
						 {
					title:' ARG vs KOR',
					start: new Date(y, m, 17, 12, 30),
					allDay: false
				},
					 {
					title:' GRE vs NGA',
					start: new Date(y, m, 17, 15, 00),
					allDay: false
				},
				 {
					title:' FRA vs MEX',
					start: new Date(y, m, 17, 19, 30),
					allDay: false
				},
				 {
					title:' GER vs SRB',
					start: new Date(y, m, 18, 12, 30),
					allDay: false
				},
				 {
					title:' SVN vs USA',
					start: new Date(y, m, 18, 15, 00),
					allDay: false
				},
					 {
					title:' ENG vs ALG',
					start: new Date(y, m, 18, 19, 30),
					allDay: false
				},
				{
					title:' NED vs JPN',
					start: new Date(y, m, 19, 12, 30),
					allDay: false
				},
					{
					title:' GHA vs AUS',
					start: new Date(y, m, 19, 15, 00),
					allDay: false
				},
					{
					title:' CMR vs DEN',
					start: new Date(y, m, 19, 19, 30),
					allDay: false
				},
					{
					title:' SVK vs PAR',
					start: new Date(y, m, 20, 12, 30),
					allDay: false
				},
					{
					title:' ITA vs NZL',
					start: new Date(y, m, 20, 15, 00),
					allDay: false
				},
					{
					title:' BRA vs CIV',
					start: new Date(y, m, 20, 19, 30),
					allDay: false
				},
					{
					className:'pt',
					title:' POR vs PRK',
					start: new Date(y, m, 21, 12, 30),
					allDay: false
				},
					{
					title:' CHI vs SUI',
					start: new Date(y, m, 21, 15, 00),
					allDay: false
				},
					{
					title:' ESP vs HON',
					start: new Date(y, m, 21, 19, 30),
					allDay: false
				},
					{
					title:' MEX vs URU',
					start: new Date(y, m, 22, 15, 00),
					allDay: false
				},
					{
					title:' FRA vs RSA',
					start: new Date(y, m, 22, 15, 00),
					allDay: false
				},
					{
					title:' GRE vs ARG',
					start: new Date(y, m, 22, 19, 30),
					allDay: false
				},
				{
					title: ' NGA vs KOR',
					start: new Date(y, m, 22, 19, 30),
					allDay: false
				},
				{
					title: ' SVN vs ENG',
					start: new Date(y, m, 23, 15, 00),
					allDay: false
				},
				{
					title: ' USA vs ALG',
					start: new Date(y, m, 23, 15, 00),
					allDay: false
				},
				{
					title: ' AUS vs SRB',
					start: new Date(y, m, 23, 19, 30),
					allDay: false
				},
				{
					title: ' GHA vs GER',
					start: new Date(y, m, 23, 19, 30),
					allDay: false
				},
				{
					title: ' PAR vs NZL',
					start: new Date(y, m, 24, 15, 00),
					allDay: false
				},
				{
					title: ' SVK vs ITA',
					start: new Date(y, m, 24, 15, 00),
					allDay: false
				},
				{
					title: ' DEN vs JAP',
					start: new Date(y, m, 24, 19, 30),
					allDay: false
				},
				{
					title: ' CMR vs NED',
					start: new Date(y, m, 24, 19, 30),
					allDay: false
				},
				{
					className:'pt',
					title: ' POR vs BRA',
					start: new Date(y, m, 25, 15, 00),
					allDay: false
				},
				{
					title: ' PRK vs CIV',
					start: new Date(y, m, 25, 15, 00),
					allDay: false
				},
				{
					title: ' SUI vs HON',
					start: new Date(y, m, 25, 19, 30),
					allDay: false
				},
				{
					title: ' CHI vs ESP',
					start: new Date(y, m, 25, 19, 30),
					allDay: false
				},
			],
			eventRender: function(event, eventElement){
                       if (event.imageurl) 
                       {
                           if (eventElement.find('span.fc-event-time').length){
                               eventElement.find('span.fc-event-time').before($(event.imageurl));
                           } else {
                               eventElement.find('span.fc-event-title').before($(event.imageurl));
                           }
                       }  
                },
		});
		
	});
 
</script> 

gahhh, could you maybe write something up for me quickly?

i don’t even know how to call 2 different images onto one eventRender…

There is only the one event rendered. You can add the image after the time, and before the title, using two different statements within the one eventRender function

alright, managed to create a new event to be after time, but now the first one is not appearing.

if you check the end of the script, i now have 2 eventRenders, my logic would be, one for each flag, right?

the first flag is done, i now must create a second one to be on the end of the tittle.

i was thinking something like:

eventRender: function(event, eventElement){eventElement.find(‘span.fc-event-title’).after($(event.imageurl));},

but that doesn’t seem to work.

I did try removing all the events but one, but it seems it might be my placing of the timeFormat setting.

Where is a test page the demonstrates the problem?

In the mean time, simplify. Reduce the events to a single event and get things working first with only that. Then add other pieces on until you come across what is causing the issue.

The square bracket from events: [ needs to be closed off at some stage, and the final }, should not have the comma there.

What brismi68 was trying to to say in code is something like this:



$('#calendar').fullCalendar({
			editable: true,
			events: {
                   imageUrl: $("<img src = 'http://localhost:3067/Images/default_thumbnail.jpg'
style='width:24px;height:24px'/>"));
					title:' RSA vs MEX',
					start: new Date(y, m, 11, 15, 00),
					allDay: false,

				 },
          eventRender: function(event, eventElement){
                       if (event.imageurl) 
                       {
                           if (eventElement.find('span.fc-event-time').length){
                               eventElement.find('span.fc-event-time').before($(event.imageurl));
                           } else {
                               eventElement.find('span.fc-event-title').before($(event.imageurl));
                           }
                       }  
                },
});

What happens is that you attach an imageUrl to your properties list for each event and then at the end you call the eventRender hook and attach the images to the eventElement.

Did it help?