Getting the event id in fullcalendar object event

Question

I am using http://fullcalendar.io/ My user can create multiple events to indicate his disponibilities. Everytime he selects a slot, he is creating an event :

 $('#calendar').fullCalendar({
    defaultView:  'agendaWeek',
    lang:         "fr",
    header:       false,
    timezone:     'local',
    minTime:      "08:00:00",
    columnFormat: 'dddd',
    selectHelper: true,
    selectable:   true,
    select: function(start, end, id, allDay) {
      var eventData = {
        start: start,
        end: end,
        block:  true,
        editable: true,
        id: id,
        backgroundColor: "#469278"
      };

      // console.log(moment(eventData.start["_d"]).format("dddd"));
      // console.log(moment(eventData.end["_d"]).format("dddd"));


      $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true

      // console.log(eventData);
      // if (moment(eventData.start["_d"]).format("dddd") != moment(eventData.end["_d"]).format("dddd")) {
      //   $('#calendar').fullCalendar('unselect');
      // };
      var day         = moment(eventData.start["_d"]).format("dddd");
      var start_time  = moment(eventData.start["_d"]).format("HH:mm");
      var end_time    = moment(eventData.end["_d"]).format("HH:mm");
      var id          = moment(eventData.end["_id"]);

      var slot        = {
        day: day,
        start_time: start_time,
        end_time: end_time
      };
      array_dispo.push(slot);

      $("#dispo_array").val(JSON.stringify(array_dispo));
      $('#calendar').fullCalendar('unselect');
    },
    editable:     true,
    eventLimit:   true,
    eventClick: function(event, element) {
      if(confirm('Voulez-vous supprimer cette dispo?')) {
        $('#calendar').fullCalendar('removeEvents',event._id);
      }
    },

    selectOverlap: function(event) {
      return ! event.block;
    }
  });
});
          // console.log(moment(eventData.start["_d"]).format("dddd"));
          // console.log(moment(eventData.end["_d"]).format("dddd"));


          $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true

          // console.log(eventData);
          // if (moment(eventData.start["_d"]).format("dddd") != moment(eventData.end["_d"]).format("dddd")) {
          //   $('#calendar').fullCalendar('unselect');
          // };
          var day         = moment(eventData.start["_d"]).format("dddd");
          var start_time  = moment(eventData.start["_d"]).format("HH:mm");
          var end_time    = moment(eventData.end["_d"]).format("HH:mm");
          var id          = moment(eventData.end["_id"]);

          var slot        = {
            day: day,
            start_time: start_time,
            end_time: end_time
            id: id

          };
          array_dispo.push(slot);

          $("#dispo_array").val(JSON.stringify(array_dispo));
          $('#calendar').fullCalendar('unselect');
        },

Everytime a user selects a timeslot, it creates an Event Object http://fullcalendar.io/docs/event_data/Event_Object/ with the eventData I specified that is sent as a JSON in a hidden field. Problem is I didnt manage to get the id of this event object that I suppose is sent by fullcalendar. The object I get when I do console.log(eventData); is :

Object {start: Moment, end: Moment, id: jQuery.Event, block: true, editable: true…}

but this jQuery.event doesnt have a unique id, it looks like this :

id: jQuery.Event
altKey: false
bubbles: true
button: 0
buttons: 0
cancelable: true
clientX: 336
clientY: 290
ctrlKey: false

I need this id if I want to delete or modify an event object later on. How can I get this event id ?

score 0 · Answer 1 · edited May 23 '17 at 12:22

0

You specify your own id in the eventData object, it's 1 in the example you've given. Make sure to have these unique and then you can pass this id to .fullCalendar( 'removeEvents' [, idOrFilter ] ) for example.

Find examples of creating unique id's at: Create GUID / UUID in JavaScript?

edited May 23 '17 at 12:22

Community

1
1

answered Oct 07 '15 at 06:30

Gudbergur

2,684
2
16
5

Sorry I just had id: 1 in the code for debugging purpose – David Geismar Oct 07 '15 at 06:39
Where do you want to get the id exactly, in `eventClick`? – Gudbergur Oct 07 '15 at 06:42
I want it already in ```select:```, that is when the user creates the event – David Geismar Oct 07 '15 at 06:45
I just edited the post in the ```eventData id``` there is a ```JQuery.Event```but this object doesnt contain any actual id ! How would you do it to generate a unique id yourself ? – David Geismar Oct 07 '15 at 07:04
You have to create a unique id yourself for the event - an id is not created for you by fullCalendar. The select callback does not give you an id, so the argument should be called jsEvent instead of id. – Gudbergur Oct 07 '15 at 07:08
I added a link to a Stackoverflow post that gives you examples on how to create ids in javascript – Gudbergur Oct 07 '15 at 07:09

Getting the event id in fullcalendar object event

1 Answers1