FullCalendar нажимаем дату на многодневном мероприятии

Question

Я хочу использовать FullCalendar, чтобы создать систему, в которой родители могут забронировать отпуск для своих родителей. Поэтому мне нужно добавить праздники как события, чтобы сделать пользователя понятным, когда они могут забронировать. Моя проблема: мне нужен точный день, когда пользователь нажал. Допустим, у нас есть тестовые каникулы с 1 по 20 августа, и пользователь хочет забронировать 15 августа, мне нужно получить 15 августа.

Это, похоже, не работает с FullCalendar в этой комбинации. dayClick Событие это именно то, что мне нужно:

dayClick: function(date, jsEvent, view, resourceObj) { 
    alert('You clicked on ' + moment(date).format('L')); 
} 

НО это работает только тогда, когда ни одно событие не было указано на щелкнули дату. Но в моем случае у меня есть событие. Таким образом, eventClick получает увольнение вместо dayClick. eventClick имеет тот недостаток, что я получаю всего событие (например, тестовые праздники с 1 по 20 августа в моем примере), но НЕ тот день, когда пользователь нажал.

eventClick: function(calEvent, jsEvent, view) { 
    // No 'date' parameter avaliable here, only calEvent.start and calEvent.end for the WHOLE event 
    // But not the date where the user clicked on 
    alert("Event started: " + moment(calEvent.start).format('L')); 
} 

Чтобы сделать его более ясным, полная демо-случай в этом сценарии:

$('#test-div').fullcalendar({ 
    events: [{ 
     title: 'Test holidays', 
     start: '2016-08-01', 
     end: '2016-08-20' 
    }] 
}); 

Теперь мы тестовые праздники зарегистрированы как событие от 2016-08-01 до 2016-08- 20. Мне нужно решение, которое, когда пользователь нажимает на 2016-08-02, я получаю 2016-08-02. В 2016-08-05 я получаю 2016-08-05 и так далее. Событие eventClick предоставило мне только 2016-08-01 как начало и 2016-08-20 как конец.

Answer 1

<input type="text id="plannedTaskDateTime"> 

добавить к выше входного типа

<script> 

$('#calendar').fullCalendar({ 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,basicWeek,basicDay' 
      }, 
      events: [{ 
    title: 'Test holidays', 
    start: '2016-08-01', 
    end: '2016-08-20' 
}], 
      editable: true, 
      defaultView: defaultViewtype, 
      firstDay: weekStartDay,//Start day of Calender 
      hiddenDays: weekEndArr, // Hide Days Non Working Days 
      eventLimit: true, // allow "more" link when too many events 
      eventRender: function(event, element) { 
       if(event.icon){   
        element.find(".fc-title").prepend("<i class='fa fa-"+event.icon+"'></i>"); 
       } 
      }, 

      dayClick: function(date, jsEvent, view,start, end, allDay) { 
       var cellYear = date.year(); 
       var cellMonth = date.month() + 1; 
       var cellDay = date.date(); 
       $('#plannedTaskDateTime').val(cellYear+"-"+cellMonth+"-"+cellDay+" 00:00:00"); 

       var check = generateDateTOYYMMDD(date._d) 
       var today = generateDateTOYYMMDD(new Date()) 
       if(check < today) 
       { 
         alert('You can not plan for past'); 
       } 
       else 
       { 
        //DO as You wish 
       } 



      } 

     }); 

function generateDateTOYYMMDD(DateObj){ 
    var DateDay = DateObj.getDate(); 
    DateDay = (DateDay<10) ? "0"+DateDay : DateDay; 
    var DateMonth = DateObj.getMonth() + 1; 
    DateMonth = (DateMonth<10) ? "0"+DateMonth : DateMonth; 
    var DateYear = DateObj.getFullYear(); 
    var DateStr = DateYear + "-" + DateMonth+ "-" + DateDay; 
    return DateStr; 
} 
</script>