2016-07-29 16 views
0

私はFullCalendarを使用して、保護者が両親のために休暇を予約できるシステムを構築したいと考えています。だから、休暇をイベントとして追加して、予約できるときにユーザーを明確にする必要があります。私の問題は:私は、ユーザーがクリックした正確な日が必要です。 8月1日から20日までのテスト休暇があり、ユーザーは8月15日を予約したいと考えています。私は8月15日を取得する必要があります。FullCalendarは複数日イベントでクリック日を取得します

この組み合わせのFullCalendarでは動作しないようです。

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

しかし、誰イベントがクリックされた日付に指定されていないときにのみ動作します:dayClickイベントは、私は必要なものを正確にです。しかし、私の場合、私はイベントがあります。だからeventClickdayClickの代わりに解雇されます。 eventClickは、私がイベント(例えば、私の例ではのテストホリデーから8月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年8月1日から2016-08-にイベントとして登録されたテスト・祝日をしました20。ユーザーが2016-08-02をクリックすると2016-08-02が得られるという解決策が必要です。 2016-08-05には2016-08-05などがあります。 eventClickイベントは、開始として2016-08-01を、終了として2016-08-20を与えました。

答えて

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

に追加する当社のソリューションとの問題は、それが唯一の(ホリデー)イベントバーにされていない、その日のボックスにクリックをキャッチすることです。 http://www.image-hoster.de/files/471f13497c7a957113f897e4b.png私は直感的なので、多くのユーザーが行うと思われる赤いボックスのクリックを意味します。赤いボックスをクリックすると何も起こりません。箱の外側のみ。 –

関連する問題