Inserting an image onto a script

JavaScript
21

I did this for the first event:


$('#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,
					
					},
          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));
                           }
                       }  
                },
});

but I’m getting a syntax error in the following line:


imageUrl: $("<img src = 'http://cudamine.com/images/web1.png' style='width:24px;height:24px'/>"));
22

Sure things, have a look at the example code at this documentation page.

You’ll see that it’s placed outside of the event array. In the demo it’s placed below the event array, but it can just as easily be placed above the event array.

23

That eventRender method does not belong inside the events list. You would do well to take care of that first.

24

Ok.

But I really don’t know what I’m doing, I’m very limited in this topic, could you possibly explain this?

25

sorry for bumping this, i (we) need this for a uni project badly though :(, anyone has a clue?

26

That will be the comma at the end of the line. Properties like that should be comma separated instead.

27

that’s the html of the calendar, i was under the impression img tags would not work, as thats html and not javascript…

28

Could you show some HTML of the calendar especially the title area?

Would be helpful to see some markup.

29

Currently the eventRender function check if the time exists. If it does exist it places the image before the time. If the time doesn’t exist then it places the image before the title.

You should be able to easily modify it so that the if condition doesn’t occur at all. Then you will have just two statements. One that places an image before the time, and one that places an image before the title.

You should be able to change before to after, and use different images for each.

Give it a go yourself.

30

unfortunately, that doesn’t work.

31

A very ugly approach but how about this:


$(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: '<img src="some-flag-1.png" /> All Day Event <img src="some-flag2.png" />',
					start: new Date(y, m, 1)
				},
32

Ok, i have a found a page where someone has the same issue:
http://code.google.com/p/fullcalendar/issues/detail?id=78

this is exactly what i need, but i don’t understand much of brismi68 explanation:

I just started using the plug-in yesterday (what a fantastic tool!) after spending
days/weeks trying to get Telerik to work with all the rad wrapping, what a challenge
that was. I consider myself a very casual coder, but what I did was simply pass in an
extra field in the json result called imageurl. Then in the eventRender appended it
like so:

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

I should also check for the title and if not there insert a default or perhaps modify
the js to do so properly - but I am not at that point yet.

I am currently passing in the full image tag, however, I may just pass in the image
name and have the img src foundation in the js depending on other actions I might
want to add like tips etc.
$(“<img src = ‘http://localhost:3067/Images/default_thumbnail.jpg’
style=‘width:24px;height:24px’/>”));

May not be the right way, but seemed logical and straightforward. I can not wait to
see what else I can do. Perhaps add an event on the date number in the month view to
take me to the day view.

If someone could take a look at the script and give some indications on what to do, that would be grand…

33

so it should be:

imageUrl: $(“<img src = ‘http://cudamine.com/images/web1.png’ style=‘width:24px;height:24px’/>”)),

I still get a syntax error in that line :(.

EDIT:
There we go, it was the extra “)”

I now have an error in line:

eventRender: function(event, eventElement){

I’m guessing i need to do something to the eventElement, but could you guys give me an example, I’m pretty clueless here…

34

thanks i missed that one :slight_smile:

35

the ] is on the end of all the events, this is how the script looks:


<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,
					
					},
          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));
                           }
                       }  
                },
})
					{
					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
				},
			]
		});
		
	});
 
</script>