CODEWITHSUNDEEP
jqueryjquery-uifullcalendarqtipqtip2
Justin
Justin

Reputation: 2530

fullCalendar updateEvent 'completed' re-render event not all events

I currently have my events being pulled into my calendar dynamically. Then when I mouse-over the event it pops-up with a qTip (jquery plugin) to show a pop-up dialog.

I currently have a 'link' that is to 'complete' an item on the calendar, and i'm using this javascript to pull in my information from the link. 

// Update event to be complete
        $('.updateEvent').live('click', function() {
            var goTo     = $(this).attr('href');
            var eventId1 = $(this).attr('rel');
            var eventId2 = eventId1.split("-");
            var eventId  = eventId2[1];

            $.ajax({
                  url: goTo,
                  dataType: 'html',
                  success: function (event, response) {
                        $("#"+eventId).fullCalendar('className', '.complete');
                        //$("#calendar").fullCalendar("refetchEvents");
                  },
                  error: function(response, data) {
                    alert("Oops... Looks like we're having some difficulties.");  
                  }
            });
            return false;
        });

Is there a way to go about doing and update to the event "className"->".complete" I know i'm supposed to pull in the actual 'event' but i'm un-sure how to do that with the jQuery qTip functionality.

I hope this makes sense, and if there is any direction, that would be greatly appreciated.

UPDATED CODE:

// Update event to be complete
        $('.updateEvent').live('click', function() {
            var goTo     = $(this).attr('href');
            var eventId1 = $(this).attr('rel');
            var eventId2 = eventId1.split("-");
            var eventId  = eventId2[1];

            $.ajax({
                  url: goTo,
                  dataType: 'html',
                  success: function (event, response) {

                      var eventNew = $("#calendar").fullCalendar("clientEvents", eventId);
                      console.log(eventNew);

                  },
                  error: function(response, data) {
                    alert("Oops... Looks like we're having some difficulties.");  
                  }
            });
            return false;
        });

When I write to the console.log(eventNew); it returns as NULL. and I know that the eventId is responding with an actual eventId, such as (17836).

Any other thoughts would be greatly appreciated!

My FULL JS Script on this page: http://jsfiddle.net/ah73B/

Upvotes: 1

Views: 1968

Answers (1)

ganeshk
ganeshk

Reputation: 5631

I think you need to fetch a handle to the event first, before changing the classname. Take a look at .fullCalendar( 'clientEvents' [, idOrFilter ] ) method. If you know the eventId, you can pass that as a filter to this method. Then change the className.

Hope this helps. You could post the HTML of the for the question to be more clear.

Upvotes: 1

Related Questions