SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 35
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:
    http://cudamine.com/icame/sitemundial/calendar.html

    anyway, the way to insert details into each day of the month is through running a script:
    Code 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: [
    				{
    					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.

  2. #2
    SitePoint Member
    Join Date
    Sep 2009
    Location
    Czech Republic | Portugal
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A very ugly approach but how about this:

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

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    unfortunately, that doesn't work.

  4. #4
    SitePoint Member
    Join Date
    Sep 2009
    Location
    Czech Republic | Portugal
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you show some HTML of the calendar especially the title area?

    Would be helpful to see some markup.

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://cudamine.com/icame/sitemundial/calendar.html

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

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, i have a found a page where someone has the same issue:
    http://code.google.com/p/fullcalenda...s/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...

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry for bumping this, i (we) need this for a uni project badly though , anyone has a clue?

  8. #8
    SitePoint Member
    Join Date
    Sep 2009
    Location
    Czech Republic | Portugal
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What brismi68 was trying to to say in code is something like this:

    Code JavaScript:
     
    $('#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?

  9. #9
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did this for the first event:

    Code JavaScript:
    $('#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:
    Code JavaScript:
    imageUrl: $("<img src = 'http://cudamine.com/images/web1.png' style='width:24px;height:24px'/>"));

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    That will be the comma at the end of the line. Properties like that should be comma separated instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Member
    Join Date
    Sep 2009
    Location
    Czech Republic | Portugal
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    That will be the comma at the end of the line. Properties like that should be comma separated instead.

    thanks i missed that one

  12. #12
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    The square bracket from events: [ needs to be closed off at some stage, and the final }, should not have the comma there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the ] is on the end of all the events, this is how the script looks:
    Code JavaScript:
    <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>

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    That eventRender method does not belong inside the events list. You would do well to take care of that first.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok.

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

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Cudamine View Post
    But I really don't know what I'm doing, I'm very limited in this topic, could you possibly explain this?
    Sure things, have a look at the example code at this documentation page.
    http://arshaw.com/fullcalendar/docs/...g/eventRender/

    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

    Code JavaScript:
    <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>

  19. #19
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Cudamine View Post
    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
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  20. #20
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    http://cudamine.com/icame/sitemundial/calendar.html

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

  21. #21
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Cudamine View Post
    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?
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  22. #22
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    alright, managed to create a new event to be after time, but now the first one is not appearing.

    http://cudamine.com/icame/sitemundial/calendar.html

    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.

  23. #23
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    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
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  24. #24
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    gahhh, could you maybe write something up for me quickly?

    i don't even know how to call 2 different images onto one eventRender...

  25. #25
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Cudamine View Post
    gahhh, could you maybe write something up for me quickly?
    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:

    Code javascript:
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •