如何检查完整日历中一天的值是否已存在

Question

我正在制作一个calednar，人们可以点击并预订不同的日子。

添加到日历的事件数据如下所示：

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

添加后，我想检查user_id是否存在，以便用户不再添加事件。

我正在使用 dayClick 事件，代码如下所示：

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

即使添加了值，也会添加事件。有没有更好/更简单的方法可以做到这一点？

Answer 1

你的逻辑是错误的。您将为每个与用户 ID 不匹配的事件创建一个新事件。如果您的日历中有 10 个事件，您将创建 10 次相同的事件。

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>

Answer 2

不仅

要添加您的事件，而且例如，如果您有 20 个其他事件的用户 ID 不等于新事件的用户 ID，那么您将添加该事件 20 次。

您只需使用循环来设置一个标志，指示您是否在(至少(其他事件中找到了用户 ID，然后在搜索完所有事件后，根据该标志的状态决定是否添加事件。

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

注

：注：也许值得理解的是，除了您使用"clientEvents"来检索事件之外，这些都不是特定于fullCalendar的。其余的只是应用正确的逻辑来查找列表中的值，该值可以应用于各种情况。