Full Calendar Event background change

Question

I am using full Calendar latest version and displayed events as hain data successfully. Now when I click on event I am displaying a pop-up containing the event information.

There is a button on pop-up using that I am changing value of that event in database and doing this through AJAX.

Calendar Image

POPUP Image

Now I want to change background color of that event on success of pop-up submit using AJAX.

How can I achieve that ?

This is code for full calendar

            /* Full Calendar */
        jQuery(document).ready(function() {
            var currenturl=window.location.search;
            if(currenturl=='?page=budget_calendar'){
                var ajax_url=calendar_ajax_url.cal_lib; 
            }

            jQuery('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay,listWeek'
                },


                buttonText: {today: 'Today', month: 'Month', agendaWeek: 'Week', agendaDay: 'Day',listWeek:'list'},
                lang: 'us',
                refetch: false,
                firstDay: 1,
                eventLimit: 2, // allow "more" link when too many events
                disableDragging: true,
                eventRender: function(event, element) {             
                        element.find('.fc-title').hide();
                        element.find('.fc-time').hide();
                        element.find('.fc-title').after(
                            jQuery("<div><i class='fa fa-money'></i>"+ event.type +" : <br>" + event.title + "</div>"+"<div></div>"+"<div>Amount :" + event.amount + "</div>")
                        );
                        element.css('border-color','#0040ff');
                        element.css('background-color',event.color);
                        element.click(function () {
                            var event_id=event.id;
                            var event_type=event.type;

                            jQuery.ajax({
                                type:'POST',
                                url:ajax_url+'/assets/lib/lib_calendar_ajax.php',
                                data:{event_type:event_type,event_id:event_id,action:'get_event_details'},
                                success:function(response){
                                    var eventdata=jQuery.parseJSON(response);
                                    if(event.type=='Expense'){
                                        jQuery('#expenseModal').modal('show');                              
                                    }
                                }

                            })
                        });

                },

                events:ajax_url+'/assets/lib/lib_upcoming_calendar.php',

            });
        });

        And on popup button click 
        `$(document).on('click','#button_click',function(){
            var orderid=$(this).data('eventid');
            $.ajax({
                  type:'POST',
                  url:'ajax_responce.php',
                  data: {'orderid':orderid,action:'change_status'},
                  success:function(response){
                   if(response=='done'){
                       /* here i want to change background color of event which i have clicked */
                    }
                  }
            });

        });

Get the event object using fullcalendar.io/docs/clientEvents, change the background colour and update it in the calendar using fullcalendar.io/docs/updateEvent — ADyson
Hi Adyson ,but I am using ajax update code outside of full Calendar.How can I get the event and which class or object I use to update that. — David
You get the event using its ID. If you didn't give the event an ID when you first sent it to fullCalendar, then you should. Then it's easy to retrieve it again. But from your code, it looks like you did give the events IDs, so you can easily use that to do the update. — ADyson

David David · Accepted Answer · 2018-03-18T13:26:03

I just resolved this issue.I just did by using :-

/* In calendar */
            /* In calendar */
            var temp='';
            eventClick: function(event, element) {    
                 var temp= $(this);
            }

            and 
            /* And jquery on button click */
             $(document).on('click','#save',function(){ 
                temp.css('background-color','red');
             });

Full Calendar Event background change

2 Answers