如何仅显示对象中的可用属性?

时间:2017-03-17 12:24:14

标签: php jquery fullcalendar qtip2

在来自eventRender的{​​{1}}方法中,在呈现的文本中,我只想显示fullcalendar对象中可用的属性,即event

如下所示,它会尝试显示undefined对象的每个属性,如果属性为event,则会显示undefined

undefined

1 个答案:

答案 0 :(得分:0)

您可以浏览事件属性并构建工具提示文本

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;
}