Fullcalendar上的EventRender

时间:2017-02-12 16:19:56

标签: javascript jquery fullcalendar

我开始使用fullcalendar,我遇到以下问题。我正在使用带有codeigniter的php将我的数据带入JSON,使用具有fullcalendar的“eventSources”函数将多个数据转换为JSON格式。现在我的问题是我需要应用属性“eventRender”,但只对我得到的一个数据,在这种情况下我只是想要它应用于'Calendar / get_alert',但是我适用于所有,有些改变这种方式的方法?我留下了我的代码。

<script type="text/javascript">
	 $(document).ready(function(){
		 $('#fullcalendar').fullCalendar({
		    header: {
	              left: 'title',
		      center: 'agendaDay,agendaWeek,month',
		      right: 'prev,next today'
		    },
			  editable: true,
			  firstDay: 1,
			  selectable: true,
			  defaultView: 'month',
			
			  eventSources: [
                           '<?= base_url() ?>calendar/get_alert',
                           '<?= base_url() ?>calendar/get_Sales',
                           '<?= base_url() ?>calendar/get_purchases'
                          ],
        
   
                          eventRender: function(event, element, view){
                            var el = element.html();
                            element.html("<div style='width:90%;float:left;'>" +  el + "</div><div style='text-align:right;' class='close'><span class='glyphicon glyphicon-trash'></span></div>");
                
                            element.find('.close').click(function(){
                             if(!confirm("Delete event?")){
                               return false;
                             }else{
                             var id = event.id;
                             $.post('<?= base_url() ?>calendar/delete_alert',
                             {
                                id:id
                             },
                             function(data){
                              if(data == 1)
                                alert('Successfully deleted');
                              else
                                alert('Error deleted');  
                             });
                              $("#fullcalendar").fullCalendar('removeEvents', event.id);
                  }         
              });             
          }   
		    });		
	    });
    </script>

新代码,每个网址vien的数据格式为JSON

<script type="text/javascript">
	 $(document).ready(function(){
		 $('#fullcalendar').fullCalendar({
		    header: {
	              left: 'title',
		      center: 'agendaDay,agendaWeek,month',
		      right: 'prev,next today'
		    },
			  editable: true,
			  firstDay: 1,
			  selectable: true,
			  defaultView: 'month',
			
			  eventSources: [
                            {
                             url: '<?= base_url() ?>calendar/get_alert',
                             customRender: true
                            },
                            {
                             url: '<?= base_url() ?>calendar/get_Sales',
                             customRender: false

                            },
                            {
                             url: '<?= base_url() ?>calendar/get_purchases',
                             customRender: false,
                            }
                            ],
        
   
                          eventRender: function(event, element, view){
                           if (event.customRender == true)
                            {
                            var el = element.html();
                            element.html("<div style='width:90%;float:left;'>" +  el + "</div><div style='text-align:right;' class='close'><span class='glyphicon glyphicon-trash'></span></div>");
                
                            element.find('.close').click(function(){
                             if(!confirm("Delete event?")){
                               return false;
                             }else{
                             var id = event.id;
                             $.post('<?= base_url() ?>calendar/delete_alert',
                             {
                                id:id
                             },
                             function(data){
                              if(data == 1)
                                alert('Successfully deleted');
                              else
                                alert('Error deleted');  
                             });
                              $("#fullcalendar").fullCalendar('removeEvents', event.id);
                  }         
              });  
            }           
          }   
		    });		
	    });
    </script>

1 个答案:

答案 0 :(得分:3)

一种简单的方法就是这样:

假设您为所有事件提供了额外的自定义布尔属性。例如,我们可以将其称为“customRender”,设置为true或false。您可以将来自“get_alert”源的所有事件设置为IEnumerable<T>,将所有其他事件设置为false。

e.g。事件看起来像这样:

render : true

然后在eventRender方法中,只需将所有自定义逻辑包装在if语句中,这样只有在事件“customRender”设置为true时才会运行它:

{
  start: "2017-01-01",
  end: "2017-01-03",
  //...other properties here...
  customRender: true
}