完整日历选择选项值以在日历下方显示列表

Question

我想添加一些功能，其中当您选择一个事件选项事件时，它将在日历下方显示一个列表，日历中我已经有一个有效的eventclick图标，每次您在日历中单击事件日期时，该列表将出现在日历下方。我想添加一些过滤器功能，例如选择选项，当您对其进行更改时，所有事件的列表将出现在同一类“ order-details-table”中。我已将events_selector引用存储为事件中的“标签”。

<select id="event_selector"> 
  <option value="all">All</option>
  <option value="whiskey">Whiskey</option>

</select>
<div id="#eventdetails" class="order-details-table">&nbsp;</div>

    events:[

     title: 'Event Name',
     tags:'whiskey',
     products:
        [
          {
          name:'Event Place',
          url:'',
          time:'Sept. 15 | 12:00 PM',
          location:'TBA'

          }

        ]

  },

  ]


  $('event_selector').change(onSelectOpenList);
  function onSelectOpenList(){
    return['all', event.tags].indexOf($('#event_selector').val());

    function insert(title, product, url, time, location , tags){
        $(".order-details-table").append('<tr><td class="o-box-name"><a name="detailsevent">'+ product +'</a></td><td class="o-box-name">'+title+'<br><small>'+time+'</small><small>&nbsp'+location+'</small></td><td><a href="'+ url +'" class="cancel-del-text" target=_"blank">Register!</a></td></tr>'+tags);
      };

      $("html, body").animate({ scrollTop: $(".calendar").offset().top }, 1500);

      $(".order-details-table").empty(); // Clear list of products
      for (var i = 0; i < calEvent.products.length; i++) {
        insert(calEvent.title, calEvent.products[i].name, calEvent.products[i].url,  calEvent.products[i].time,  calEvent.products[i].location, calEvent.tags);
      }

};