Trong sự kiện DayClick FullCalendar, tôi có thể nhận được các sự kiện đã tồn tại trong ngày được nhấp không?

Question

Trong sự kiện DayClick FullCalendar, tôi có thể nhận được các sự kiện đã tồn tại trong ngày được nhấp không?

http://arshaw.com/fullcalendar/docs/mouse/dayClick/

Hãy để tôi giải thích một chút về dự án của tôi Tôi đang viết một trang web php đơn giản mà cho phép người dùng thêm/chỉnh sửa sự kiện trên lịch.

• Chỉ một sự kiện duy nhất mới có thể thêm vào một ngày.
• Nếu người dùng nhấp vào ngày trống, Cửa sổ bật lên sự kiện mới sẽ hiển thị (Tôi sử dụng sự kiện dayclick).
• Nếu ngày nhấp của người dùng có sự kiện hiện tại, Chỉnh sửa bật lên sự kiện sẽ hiển thị (Tôi sử dụng sự kiện sự kiện nhấp chuột).

Vấn đề là khi người dùng nhấp vào bên ngoài khu vực sự kiện (khu vực trên hoặc dưới cùng) của một ngày có sự kiện hiện tại, nó tăng dayclick thay vì eventclick. Làm cách nào để kích hoạt sự kiện eventclick và bỏ qua sự kiện dayclick nếu có sự kiện hiện tại trong ngày?

Answer 1

Sự kiện của bạn có được lưu trữ ở phía máy khách hoặc ở phía máy chủ không? Nếu trên các mặt hàng, điều này sẽ làm việc đặc biệt nếu bạn muốn sự kiện trong thời gian đó nhấp:

$('#calendar').fullCalendar({ 
    dayClick: function(date, allDay, jsEvent, view) { 
      $('#calendar').fullCalendar('clientEvents', function(event) { 
       if(event.start <= date && event.end >= date) { 
        return true; 
       } 
       return false; 
      }); 
    } 
}); 

này sẽ cung cấp cho các sự kiện mà chồng lên nhau lần nhấp và được lưu trữ trên các mặt hàng. Đối với các khe cắm cả ngày, nó sẽ cung cấp cho tất cả các sự kiện chồng chéo ngày hôm đó.

Nếu bạn muốn tất cả các sự kiện trên chính ngày đó, bất kể vị trí thẻ allDay hay một khe thời gian đã được nhấp.

$('#calendar').fullCalendar({ 
    dayClick: function(date, allDay, jsEvent, view) { 
      if(!allDay) { 
       // strip time information 
       date = new Date(date.getFullYear(), date.getMonth(), date.getDay()); 
      } 
      $('#calendar').fullCalendar('clientEvents', function(event) { 
       if(event.start <= date && event.end >= date) { 
        return true; 
       } 
       return false; 
      }); 
    } 
}); 

Nếu sự kiện của bạn được lưu trữ trên máy chủ, bạn sẽ muốn thực hiện cuộc gọi đến máy chủ của mình để nhận thông tin ở bất kỳ định dạng nào bạn cần.

EDIT Nếu làm một chuyến đi vòng hoặc cố gắng để có được những thông tin cách khác

$('#calendar').fullCalendar({ 
    dayClick: function(date, allDay, jsEvent, view) { 
      var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDay(), 0, 0, 0).getTime(); 
      var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDay(), 23, 59, 59).getTime(); 
      var cache = new Date().getTime(); 
      $.getJSON("/json-events.php?start="+startDate+"&end="+endDate+"&_="+cache, 
       function(data) { 
        // do stuff with the JSOn data 
       } 
    } 
}); 

Và nếu bạn không muốn chuyến đi vòng, bạn cũng có thể có một cái nhìn vào những gì xảy ra trong, nói , refetchEvents trong fullCalendar.js. Nếu bạn không ngại phân tách khỏi thân cây fullCalendar, bạn có thể lưu các sự kiện đã tìm nạp ở đâu đó để bạn không thực hiện một loạt thao tác DOM (tùy thuộc vào số lượng sự kiện, khi chúng lớn lên sẽ khó sử dụng).

Answer 2

Bạn có thể sử dụng thư viện Moment.Ví dụ:

$('#endDate').val(moment(endDate).format('YYYY-MM-DD hh:mm:ss')); 

http://momentjs.com/docs/#/displaying/format/

Answer 3

câu trả lời Exested không làm việc cho tôi như vậy có là mã làm việc:

dayClick: function (date, jsEvent, view) { 
    var count = 0; 

    date = date.toDate(); 
    var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0); 
    var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59); 

    $('#calendar').fullCalendar('clientEvents', function (event) { 
      if (event.start.toDate() >= startDate && event.start.toDate() <= endDate 
       || event.end.toDate() >= startDate && event.end.toDate() <= endDate) { 
         count++; 
        } 
       }); 
    //count - number of events on this day 
} 

Answer 4

Đây là là bạn cần tất cả sự kiện của bạn cho ngày hiện tại trong một chức năng:

  var date = $('.js-calendar').fullCalendar('getDate'); 
      date = date.toDate(); 
      var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0); 
      var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59); 
      var todaysEvents = $('.js-calendar').fullCalendar('clientEvents', function(event) { 
       if (event.start.toDate() >= startDate && event.start.toDate() <= endDate 
        || event.end.toDate() >= startDate && event.end.toDate() <= endDate) { 
        return true 
       } 
      }); 

Answer 5

Tôi vừa tự mình gặp vấn đề này trong khi tìm giải pháp f hoặc nhập ngày lễ vào lịch. Tôi thấy đây là giải pháp tốt cho các sự kiện cả ngày. Tôi hy vọng điều này có thể giúp một người khác tiếp tục xuống dòng.

$('#calendar').fullCalendar({     
    eventClick: function (event) { 
     ShowEditScreen(event.id); 
    }, 
    dayClick: function (date) { 
     var events = $('#calendar').fullCalendar('clientEvents'); 
     for (var i = 0; i < events.length; i++) { 
      if (moment(date).isSame(moment(events[i].start))) { 
       ShowEditScreen(events[i].id); 
       break; 
      } 
      else if (i == events.length - 1) { 
       ShowCreateNew(date); 
      } 
     } 
    } 
});