php - 如果事件已存在于完整日历中，则不应允许选择日期

Question

正如您在屏幕截图中看到的，我可以选择一个日期作为事件，如何发出警报或禁用现有事件的日期。

这里我使用 iam 附加 jquery 源，我使用 select 函数来选择事件，请帮助我。

我有一个要求，一次只能预订一个事件，如果该事件已经创建，则不应允许在同一天创建另一个事件。

首先:我必须禁用选择第二:我必须显示一条提醒“当天已预订”

/* initialize the calendar
         -----------------------------------------------------------------*/
        //Date for the calendar events (dummy data)
        var date = new Date()
        var d    = date.getDate(),
            m    = date.getMonth(),
            y    = date.getFullYear()
        $('#calendar').fullCalendar({
          header    : {
            left  : 'prev,next today',
            center: 'title',
            right : 'month,agendaWeek,agendaDay'
          },
          buttonText: {
            today: 'today',
            month: 'month',
            week : 'week',
            day  : 'day'
          },
          selectable: true,
            select: function(start, end, jsEvent, view) {
                if(start.isBefore(moment())) {
                    $('#calendar').fullCalendar('unselect');
                    return false;
                }
                 // start contains the date you have selected
                 // end contains the end date. 
                 // Caution: the end date is exclusive (new since v2).
                 $(".fc-state-highlight").removeClass("fc-state-highlight");
                 $("td[data-date="+start.format('YYYY-MM-DD')+"]").addClass("fc-state-highlight");
                 var allDay = !start.hasTime() && !end.hasTime();
                 //console.log(view);
                 alert(["Event Start date: " + moment(start).format(),
                        "Event End date: " + moment(end).format(),
                        "AllDay: " + allDay].join("\n"));
            },
          //Random default events
          events    : [
            {
              title          : 'All Day Event',
              start          : new Date(y, m, 1),
              backgroundColor: '#f56954', //red
              borderColor    : '#f56954' //red
            },
            {
              title          : 'Long Event',
              start          : new Date(y, m, d - 5),
              end            : new Date(y, m, d - 2),
              backgroundColor: '#f39c12', //yellow
              borderColor    : '#f39c12' //yellow
            },
            {
              title          : 'Meeting',
              start          : new Date(y, m, d, 10, 30),
              allDay         : true,
              backgroundColor: '#0073b7', //Blue
              borderColor    : '#0073b7' //Blue
            },
            {
              title          : 'Lunch',
              start          : new Date(y, m, d, 12, 0),
              end            : new Date(y, m, d, 14, 0),
              allDay         : false,
              backgroundColor: '#00c0ef', //Info (aqua)
              borderColor    : '#00c0ef' //Info (aqua)
            },
            {
              title          : 'Birthday Party',
              start          : new Date(y, m, d + 1, 19, 0),
              end            : new Date(y, m, d + 1, 22, 30),
              allDay         : false,
              backgroundColor: '#00a65a', //Success (green)
              borderColor    : '#00a65a' //Success (green)
            },
            {
              title          : 'Click for Google',
              start          : new Date(y, m, 28),
              end            : new Date(y, m, 29),
              url            : 'http://google.com/',
              backgroundColor: '#3c8dbc', //Primary (light-blue)
              borderColor    : '#3c8dbc' //Primary (light-blue)
            },
            {
            title: 'normal_event',
            start: "2018-02-05T12:00:00-00:00",
            end: "2018-02-05T13:00:00-00:00",
            id: 5,
            color: "#006633",
            editable: false,
            allDay: false
            }
          ],
          editable  : false,
          droppable : true, // this allows things to be dropped onto the calendar !!!
          drop      : function (date, allDay) { // this function is called when something is dropped

            // retrieve the dropped element's stored Event Object
            var originalEventObject = $(this).data('eventObject')

            // we need to copy it, so that multiple events don't have a reference to the same object
            var copiedEventObject = $.extend({}, originalEventObject)

            // assign it the date that was reported
            copiedEventObject.start           = date
            copiedEventObject.allDay          = allDay
            copiedEventObject.backgroundColor = $(this).css('background-color')
            copiedEventObject.borderColor     = $(this).css('border-color')

            // render the event on the calendar
            // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true)

            // is the "remove after drop" checkbox checked?
            if ($('#drop-remove').is(':checked')) {
              // if so, remove the element from the "Draggable Events" list
              $(this).remove()
            }

          },
          //Read Events
            header: {
                left: '',
                center: 'prev title next',
                right: ''
            },
            eventClick:  function(event, jsEvent, view) {
                //set the values and open the modal
                //console.log(event);
                //$("#eventInfo").html(event.description);
                //$("#eventLink").attr('href', event.url);
                //$("#eventContent").dialog({ modal: true, title: event.title });
            },
        })

        /* ADDING EVENTS */
        var currColor = '#3c8dbc' //Red by default
        //Color chooser button
        var colorChooser = $('#color-chooser-btn')
        $('#color-chooser > li > a').click(function (e) {
          e.preventDefault()
          //Save color
          currColor = $(this).css('color')
          //Add color effect to button
          $('#add-new-event').css({ 'background-color': currColor, 'border-color': currColor })
        })
        $('#add-new-event').click(function (e) {
          e.preventDefault()
          //Get value and make sure it is not null
          var val = $('#new-event').val()
          if (val.length == 0) {
            return
          }

          //Create events
          var event = $('<div />')
          event.css({
            'background-color': currColor,
            'border-color'    : currColor,
            'color'           : '#fff'
          }).addClass('external-event')
          event.html(val)
          $('#external-events').prepend(event)

          //Add draggable funtionality
          init_events(event)

          //Remove event from text input
          $('#new-event').val('')
        })
    });

Answer 1

要阻止用户选择日历上已存在事件的日期，您可以处理“selectAllow”回调，该回调提供了一种控制用户可以进行哪些选择的方法。其中，您可以通过“clientEvents”方法获取当天发生的当前事件，然后将开始和结束日期与选择的日期进行比较:

selectAllow: function(selectInfo) {
  //since we're only interested in whole days, set all times to the start/end of their respective day
  selectInfo.start.startOf("day");
  selectInfo.end.startOf("day");

  var evts = $("#calendar").fullCalendar("clientEvents", function(evt) {
    var st = evt.start.clone().startOf("day");
    if (evt.end) { var ed = evt.end.clone().startOf("day"); }
    else { ed = st; }

    //return true if the event overlaps with the selection
    return (selectInfo.start.isSameOrBefore(ed) && selectInfo.end.isSameOrAfter(st));
  });

  //return true if there are no events overlapping that day
  return evts.length == 0;
},

参见http://jsfiddle.net/sbxpv25p/181/一个工作演示

参见https://fullcalendar.io/docs/selection/selectAllow/有关此回调的更多信息，以及 https://fullcalendar.io/docs/event_data/clientEvents/了解 clientEvents 方法