How to check value already exist for a day in fullCalendar

Question

I'm making a calednar where people can click and book the diffrent days.

The event data that are added to the calendar looks like this:

var myEvent = {
    user_id: 2345,
    title: 'this is a title',
    allDay: true,
    start:  date.format(),
    end: date.format()
};

When its added i want to check if the user_id exist so user dont add event again.

I'm using the dayClick event and the code looks like this:

dayClick: function(date, jsEvent, view) {

    var myEvent = {
        user_id: userid,
        title: title,
        allDay: true,
        start:  date.format(),
        end: date.format()
    };

    var allEvents = allEvents = $('.calendar').fullCalendar('clientEvents');

    $.each( allEvents, function( index, value ){

        //add event if not exist
        if(value.user_id != userid){
            $('.calendar').fullCalendar( 'renderEvent', myEvent );
        }
    });

}

It seams that the event are added even tho the value is added. Is there a better/easyer way to do this?

hlobit · Accepted Answer · 2017-11-13T16:51:03.213

Your logic is wrong. You will create a new event for each event that does not match the user id. If you have 10 events in your calendar, you will create 10 times the same event.

var userid = 1;
var title = "Test Event";

$(document).ready(function() {
  // page is now ready, initialize the calendar...

  $(".calendar").fullCalendar({
    dayClick: function(date, jsEvent, view) {
      var myEvent = {
        user_id: userid,
        title: title,
        allDay: true,
        start: date.format(),
        end: date.format() /* vs HH:MM:SS */,
        stick: true
      };

      var allEvents = $(".calendar").fullCalendar("clientEvents");

      var exists = false;
      $.each(allEvents, function(index, value) {
        if (value.user_id === userid && new Date(value.start).toDateString() === new Date(date).toDateString()) {
          exists = true;
        }
      });

      if (!exists) {
        $(".calendar").fullCalendar("renderEvent", myEvent);
      }
    },
    defaultView: "month", //Possible Values: month, basicWeek, basicDay, agendaWeek, agendaDay
    header: {
      left: "title",
      center: "",
      right: "today prevYear,prev,next,nextYear" //Possible Values: month, basicWeek, basicDay, agendaWeek, agendaDay, today prevYear,prev,next,nextYear
    },
    buttonIcons: {
      prev: "left-single-arrow",
      next: "right-single-arrow",
      prevYear: "left-double-arrow",
      nextYear: "right-double-arrow"
    }
  });
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.js"></script>

<div class="container">
  <div class="row">
    <div class="calendar"></div>
  </div>
</div>

I want the user to be able to select as many days as he want, but limited to 1/day, since the system have more than one user, it must also be able to register different user_ids on the same day. — sdfgg45, Nov 10 '17 at 19:12
OK in this case, just take `if (value.user_id === userid)` and change the condition to `if (value.user_id === userid && value.start === date.format())`. That would do the trick. — hlobit, Nov 13 '17 at 12:41
[Here](https://stackoverflow.com/questions/4428327/checking-if-two-dates-have-the-same-date-info). I modified the answer accordingly to your particular problem. — hlobit, Nov 13 '17 at 16:52

ADyson · Answer 2 · 2017-11-10T10:50:05.960

Not only is your event being added, but if you have, for example, 20 other events where the user ID does not equal your new event's user ID, then you're adding the event 20 times.

You need to use the loop simply to set a flag indicating whether you found the user ID in (at least) one of the other events, and then, once you've finished searching them all, make a decision whether to add the event or not based on the status of that flag.

dayClick: function(date, jsEvent, view) {

  var myEvent = {
    user_id: userid,
    title: title,
    allDay: true,
    start: date.format(),
    end: date.format()
  };

  var allEvents = allEvents = $('.calendar').fullCalendar('clientEvents');
  var foundUser = false; //flag is false until we find a matching user ID

  $.each(allEvents, function(index, value) {

    if (value.user_id == userid) {
      foundUser = true; //set the flag true
      return false; //job done, so break out of the .each loop
    }
  });

  //now we've searched through everything, we can make a final decision
  if (foundUser == false) {
    $('.calendar').fullCalendar('renderEvent', myEvent);
  }
}

N.B. It's perhaps worth understanding that none of this is really specific to fullCalendar, other than the fact that you use "clientEvents" to retrieve the events. The rest is just applying the correct logic to looking for a value in a list, which could be applied to all sorts of situations.

How to check value already exist for a day in fullCalendar

2 Answers2