Cách hiển thị chi tiết sự kiện vào ngày trong toàn bộ lịch

Question

Xin chào mọi người tôi có mảng sự kiện, vào ngày tôi muốn hiển thị chi tiết sự kiện trong bảng khác. Tôi có mảng với mảng trong định dạng mảng, tôi không nhận được làm thế nào để làm cho điều này để có được tất cả các chi tiết của sự kiện bao gồm cả chi tiết mảng phụ vào ngày được nhấp vào đó. Xin vui lòng xem nếu bạn có thể giúp tôi với điều này hoặc có thể đề xuất một cái gì đó trong đó. Đây là mã của tôi dưới đây.

$(window).load(function() { 
    $('#calendar').fullCalendar({ 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 
     editable: true, 
     eventRender: function(event, element, view) { 
      for (var i = 0; i <= event.products.length - 1; i++) { 
       element.append('<span>' + event.products[i].name + '<span>'); 
      }; 
     }, 
     events: [{ 
      title: 'EventName', 
      start: '2016-05-02', 
      products: [{ 
       name: 'ProductName' 
      }] 
     }, { 
      title: 'Event', 
      start: '2016-05-03', 
      products: [{ 
       name: 'ProductName1' 
      }, { 
       name: 'ProductName2' 
      }, { 
       name: 'ProductName3' 
      },] 
     }, { 
      title: 'EventName', 
      start: '2016-05-13', 
      products: [{ 
       name: 'ProductName1' 
      }, { 
       name: 'ProductName2' 
      }] 
     }, { 
      title: 'Event', 
      start: '2016-05-15', 
      products: [{ 
       name: 'ProductName' 
      }] 
     }, { 
      title: 'EventNAme', 
      start: '2016-05-21', 
      products: [{ 
       name: 'ProductName1' 
      }, { 
       name: 'ProductName2' 
      }] 
     }, { 
      title: 'Event', 
      start: '2016-05-23', 
      products: [{ 
       name: 'ProductName1' 
      }, { 
       name: 'ProductName2' 
      }] 
     }, { 
      title: 'Eventname', 
      start: '2016-05-25', 
      products: [{ 
       name: 'ProductName' 
      }] 
     }, { 
      title: 'Event', 
      start: '2016-05-29', 
      products: [{ 
       name: 'ProductName' 
      }] 
     }], 
     dayClick: function(date, allDay, jsEvent, view) { 
      console.log('date' + date.format('DD/MMM/YYYY') + "allDay" + allDay.title + "jsEvent" + jsEvent + "view" + view) 
     } 
    }); 
}) 

Nếu bạn thấy tôi có mảng sự kiện và mỗi sự kiện có mảng sản phẩm, vì vậy bất cứ khi nào tôi nhấp vào ngày, tôi muốn hiển thị tiêu đề, cũng như chi tiết sản phẩm giống như tên sản phẩm. Đây là những gì tôi đã thử cho đến nay với lịch.

Vì vậy, khi tôi nhấp vào bất kỳ ngày nào có sự kiện tôi muốn hiển thị Tôi không muốn hiển thị khi nhấp vào sự kiện

tiêu đề sự kiện PRODUCT_NAME

Mã này là quá dài vì vậy tôi đã tạo mã bút xin vui lòng xem bạn có thể chỉnh sửa này, cảm ơn bạn trước DEMOTRIAL

Answer 1

Ahaa! Cuối cùng tôi đã tìm ra giải pháp để hiển thị các sự kiện trên dayClick. Có một cái gì đó gọi là đối tượng clientEvents cho phép chúng tôi tìm nạp các sự kiện bên trong bất kỳ hành động lịch nào đầy đủ (ví dụ dayClick, eventClick, v.v.) Tôi đã sử dụng fucntion đó để hiển thị sự kiện của mình, đây là số của tôi demo ...

và mã ngày tôi đã háo hức tìm kiếm dưới

dayClick: function(date, allDay, jsEvent, view) { 
    $('#calendar').fullCalendar('clientEvents', function(event) { 
    // match the event date with clicked date if true render clicked date events 
    if (moment(date).format('YYYY-MM-DD') == moment(event._start).format('YYYY-MM-DD')) { 
     // do your stuff here 
     console.log(event.title); 

     // if you have subarray i mean array within array then 
     console.log(event.subarray[0].yoursubarrayKey); 
    } 
    } 
} 

Answer 2

Các event click là những gì bạn đang tìm kiếm.

eventClick: function(calEvent, jsEvent, view) { 

     console.log('Event: ' + calEvent.title); 
     console.log('Event: ' + calEvent.products[0].name); 
} 

Xem updated codepen

Đây là cách để lặp tất cả các tên sản phẩm:

 for (var i = 0;i < calEvent.products.length;i++){ 
     console.log('Event: ' + calEvent.products[i].name); 
     } 

Và để chèn các thuộc tính bên trong bảng điều khiển bạn làm điều gì đó như thế này:

eventClick: function(calEvent, jsEvent, view) { 

     // this is a little function to manipulate the dom 
     function insert(title, product){ 
     var dom = $("#insert_here") 
     var template = '<tr><td class="o-box-name">'+product+'</td><td><a href="" class="postpone-del-text">'+title+'</a></td><td><a href="" class="cancel-del-text">Cancel</a></td></tr>' 
     dom.append(template); 
     }; 


     // this is the loop 
     for (var i = 0;i < calEvent.products.length;i++){ 
     //console.log('Event: ' + calEvent.products[i].name); 
     insert(calEvent.title, calEvent.products[i].name); 
     } 
} 

Another updated codepen Nhấp vào có thể, 23th

Answer 3

$(document).ready(function(){ 
    $('.fc-button-group').click(function() { 
     //write code here 
    }); 
});