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倍。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

如何检查fullCalendar中已存在一天的值

2 个答案: