apply eventRender in fullcalendar

Question

apply eventRender in fullcalendar

Navigation

#1 by (1 votes)

1

Good, I'm starting to use fullcalendar in my project so I do not know enough yet. my problem is this: I am bringing several data in JSON format to my fullcalendar, but only one of them, I need to apply the editable property: true, and also the eventRender property, however this applies to all data that I bring the fullcalendar, there some way to do what I need?

<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_alerta',
            },
            {
                url: '<?= base_url() ?>calendar/get_ventas', 
            },
            {
                url: '<?= base_url() ?>calendar/get_compras',
            }
          ],
          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='cerrar'><span class='glyphicon glyphicon-trash'></span></div>");
                
              element.find('.cerrar').click(function(){
                  if(!confirm("Desea eliminar el evento?")){
                      return false;
                  }else{
                      var id = event.id;
                      $.post('<?= base_url() ?>calendar/delete_alerta',
                      {
                          id:id
                      },
                      function(data){
                          if(data == 1)
                              alert('se elimino el evento');
                          else
                              alert('error al eliminar');
                      });
                    $("#fullcalendar").fullCalendar('removeEvents', event.id);
                  }         
              });
            }           
          }   
        });   
    });
    </script>

in this case I only want it to be editable and also apply the eventRender property, only to the url data: 'calendar / get_alerta'.

javascript jquery fullcalendar

asked by FeRcHo 15.02.2017 в 01:06

source

1 answer

Spinner in Fragment Modify session variable in onclick

score 1 · Accepted Answer

How to make only events from one source editable

When you do the eventSources and specify the URLs from which the data will be read, you can also specify some properties that will apply only to the events of that source. For this particular case, what you are interested in is the editable option (you can see the full list of options in the official documentation of FullCalendar , in English).

So a quick solution would be to put editable to false for the calendar, and for the specific source you want ( get_alerta ) specify a value of true . Something like this:

    ...
    editable: false,
    firstDay: 1,
    selectable: true,
    defaultView: 'month',
    eventSources: [
        {
            url: '<?= base_url() ?>calendar/get_alerta',
            editable: true
        },
        {
            url: '<?= base_url() ?>calendar/get_ventas'
        },
        {
            url: '<?= base_url() ?>calendar/get_compras'
        }
    ],
    ...

How to make eventReader apply only to events in a source / url

eventReader will be called for all events. What you are interested in is putting a conditional so that it only applies to the events you want and not all.

It seems that you already have something in your code for this. I mean the if (event.customRender == true) of the beginning of the method. If I'm not wrong customRender is not a native property of FullCalendar ( you can see the properties in this link ), that means that when events are generated only those with customRender:true will end up executing the function.

Then you should make sure that the events of get_alert have it; while events from other sources, no. Example of how the get_alert events would be:
[
  {
    "id": "1",
    "title": "Evento 1",
    "start": "2017-02-13 09:00:00",
    "end": "2017-02-13 10:30:00",
    "customRender": true
  },
  {
    "id": "2",
    "title": "Evento 2",
    "start": "2017-02-14 10:00:00",
    "end": "2017-02-14 11:30:00",
    "customRender": true
  }
]

But if you can not / want to modify the source, or if the customRender property could also be present in any of the other sources whose events you do not want to go through eventRender , there is another option:

Within eventRender you can check from which source the event comes by checking its property source and url ( event.source.url ). Then you could do something like this:

    ....
    eventRender: function(event, element, view){
        if (event.source.url == "<?= base_url() ?>calendar/get_alerta") {
            ....
        }
    }
    ....

That will cause the body of the function to only run for events that come from get_alerta .