Question

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

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

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

首先：我必须禁用选择第二：我必须显示一个警报＆＃34;当天预订＆＃34;

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

要阻止用户在已存在事件的日历上选择日期，您可以处理＆＃34; selectAllow＆＃34;回调，它提供了一种控制用户可以选择的方法。在此范围内，您可以通过＆＃34; clientEvents＆＃34;获取当天发生的当前事件。方法，然后将开始日期和结束日期与选择的日期进行比较：

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/，有关clientEvents方法的信息，请参阅https://fullcalendar.io/docs/event_data/clientEvents/

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

1 个答案: