繁体   English   中英

完整的日历活动背景更改

[英]Full Calendar Event background change

我正在使用完整的日历最新版本,并将事件成功显示为hain数据。 现在,当我单击事件时,我将显示一个包含事件信息的弹出窗口。

弹出窗口上有一个按钮,使用它可以更改数据库中该事件的值并通过AJAX进行操作。

日历图片

弹出式图片

现在,我想在成功使用AJAX提交弹出窗口时更改该事件的背景颜色。

我该如何实现?

这是完整日历的代码

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

        });

我刚刚解决了这个问题。我只是使用:-

/* 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');
             });

最好在这样的代码成功时使用refetch事件

       var calendar=$('#calendar').fullCalendar();    
       calendar.fullCalendar('refetchEvents');

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM