Question

我想通过一个下拉列表在我的eventSources中过滤我的Google日历源。我已经遍历了所有资源并已经提出了问题，但是还没有找到解决方案。我的代码在下面，如果有人可以朝着正确的方向扔我，那真是太棒了！

<script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {

        plugins: [ 'interaction', 'dayGrid' , 'timeGrid', 'googleCalendar'],
        defaultView: 'dayGridMonth',
        defaultDate: '2019-06-07',
        header: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay' },
        googleCalendarApiKey: 'AIzaiiiiiiiiiiiiiii1_CE',
        eventSources: [
            {
              googleCalendarId: 'adns0blse8v7riiiiiiidfo@group.calendar.google.com',
              className: 'blink182',
              theval: '1',
            },
            {
              googleCalendarId: 'b5t9rt3iiiiiiqmbl2s@group.calendar.google.com',
              className: 'boxcarracer',
              theval: '2', 
            }
        ], 
        eventClick: function( arg ) {

            arg.jsEvent.preventDefault();
            document.getElementById("start1").innerHTML = arg.event.start;
            document.getElementById("end1").innerHTML = arg.event.end;
            document.getElementById("where1").innerHTML = arg.event.location;
            document.getElementById("name1").innerHTML = arg.event.title;
            document.getElementById("desc1").innerHTML = arg.event.extendedProps.description;


        }

    });

    calendar.render();
  });

</script>

另外，下面的链接是我最喜欢的过滤方式，但是无法正常工作，并且缺少产生的错误使我一无所知。 jquery fullcalendar event filtering

编辑：现在，我意识到我无法访问应用于导入的Google日历事件的自定义事件属性。我尝试在下面的代码段中重新创建上面的链接帖子。在我的eventclick中，我尝试将“ school”字段登录到控制台，但它以未定义的形式返回。如何访问“学校”字段？谢谢！

<head>
  <meta charset='utf-8' />


  <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

  <link href='https://unpkg.com/@fullcalendar/core/main.min.css' rel='stylesheet' />
  <link href='https://unpkg.com/@fullcalendar/daygrid/main.min.css' rel='stylesheet' />
  <link href='https://unpkg.com/@fullcalendar/timegrid/main.min.css' rel='stylesheet' />

  <script src='https://unpkg.com/@fullcalendar/core/main.min.js'></script>
  <script src='https://unpkg.com/@fullcalendar/daygrid/main.min.js'></script>
  <script src='https://unpkg.com/@fullcalendar/timegrid/main.min.js'></script>
  <script src='https://unpkg.com/@fullcalendar/google-calendar/main.min.js'></script>


  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var calendarEl = document.getElementById('calendar');

      var calendar = new FullCalendar.Calendar(calendarEl, {

        plugins: ['interaction', 'dayGrid', 'timeGrid', 'googleCalendar'],
        defaultView: 'dayGridMonth',
        defaultDate: '2019-06-07',
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        events: [{
            title: 'Event 1',
            start: '2019-06-01',
            school: '1'
          },
          {
            title: 'Event 2',
            start: '2019-06-02',
            school: '2'
          },
          {
            title: 'Event 3',
            start: '2019-06-03',
            school: '1'
          },
          {
            title: 'Event 4',
            start: '2019-06-04',
            school: '2'
          }
        ],
        eventRender: function eventRender(event) {
          return ['all', event.school].indexOf($('#school_selector').val()) >= 0
        },
        eventClick: function(arg) {

          console.log(arg.event.title, arg.event.school);
        }

      });
      calendar.render();
      $('#school_selector').on('change', function() {
        calendar.render();
      })


    });
  </script>

  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
      font-size: 14px;
    }
    
    #calendar {
      max-width: 900px;
      margin: 40px auto;
    }
  </style>


</head>



<!------------------------------------------------------------------>
<!------------------------------------------------------------------>
<!------------------------------------------------------------------>




<body>

  <select id="school_selector">
    <option value="all">All</option>
    <option value="1">School 1</option>
    <option value="2">School 2</option>
  </select>



  <div id='calendar'></div>


</body>

编辑2：因此，我现在似乎无法解决自己的问题，因为我无法为导入的Google日历事件设置自定义属性。例如，在本文的第一个脚本中，我无法像使用第二个代码片段中的硬编码事件那样，使用event.extendedProps.theval来获取“ theval”。我也不能覆盖默认的“ url：”，所以我认为这也与它有关。感谢您的帮助！

过滤eventSources中的源

0 个答案: