개체에 사용 가능한 속성 만 표시하려면 어떻게해야합니까?

Question

fullcalendar의 eventRender 방법에서 렌더링 된 텍스트에서 사용할 수있는 인 event 개체의 속성 만 표시하고 싶습니다.

는 아래에서 볼 수 있듯이,이 속성이있는 경우 event 객체의 모든 속성을 표시하려고 undefined이 undefined 렌더링 수 있습니다 :

eventRender: function(event, element) { 

    $(element).qtip({ 

     style: { 
      classes: 'myStyle', 
      height: 150, 
      width: 300, 
      textAlign: 'center', 
     }, 

     content: { 
      title: event.room_id, 

      text: "description: " + event.description + "<br/>" + 
        "number: " + event.capacity + "<br/>" + 
        "Name: " + event.name + "<br/>" + 
        "Role: " + event.role + "<br/>" + 
        "Rank: " + event.sub_role + "<br/>" + 
        "Hours: " + event.hours + "<br/>", 
     } 
    }) 
} 

Answer 1

당신은 이벤트 속성을 통해 이동하고 구축 할 수 있습니다 툴팁 텍스트

https://jsfiddle.net/j9x06z7s/

$('#calendar').fullCalendar({ 
    events: [{ 
    start: moment(), // required, should not show in tip 
    title: "Required title event 1", // required, should not show in tip 
    room_id: "Room 1", 
    description: "Description for event 1", 
    capacity: 10, 
    name: "Name 1", 
    role: "Role event 1", 
    sub_role: "Rank event 1", 
    hours: 1, 
    }, { 
    start: moment().add(1, 'day'), // required, should not show in tip 
    title: "Required title event 2", // required, should not show in tip 
    room_id: "Room 2", 
    description: "Description for event 2", 
    //capacity: 20, // should not show in tip 
    name: "Name 2", 
    //role: "Role event 2", // should not show in tip 
    sub_role: "Rank event 2", 
    hours: 2, 
    }, { 
    start: moment().add(2, 'day'), // required, should not show in tip 
    title: "Required title event 3", // required, should not show in tip 
    room_id: "Room 3", 
    description: "Description for event 3", 
    capacity: 30, 
    name: "", // should not show in tip 
    role: undefined, // should not show in tip 
    sub_role: [], // should not show in tip 
    hours: 3, 
    }], 
    eventRender: function(event, element) { 
    $(element).qtip({ 
     style: { 
     classes: 'myStyle', 
     height: 150, 
     width: 300, 
     textAlign: 'center', 
     }, 
     content: { 
     title: event.room_id, 
     text: build_text(event) 
     } 
    }); 
    } 
}); 

function build_text(event) { 
    var text = ""; 
    // go through event properties 
    $.each(event, function(key, value) { 
    // is it a key we care about for tooltip? 
    if (["description", "capacity", "name", "role", "sub_role", "hours"].includes(key) 
     // does it have a value? 
     && (value != null && value != "")) { 
     text += key + ": " + value + "<br/>"; 
    } 
    }); 
    return text; 
}