FullCalendar JS 获取选定的日期

Question

我是 fullcalendar 的新手，我一直在阅读文档，但它仍然有点令人困惑。到目前为止我已经成功做到了

        <link rel="stylesheet" href="~/lib/fullcalendar/core/main.css" />
        <link rel="stylesheet" href="~/lib/fullcalendar/daygrid/main.css" />

<div class="container">

        <div id="calendar"></div>

    </div>

        <script src="~/lib/fullcalendar/core/main.js"></script>
        <script src="~/lib/fullcalendar/daygrid/main.js"></script>
        <script src="~/lib/fullcalendar/interaction/main.js"></script>

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

            var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: ['dayGrid', 'interaction'],
                defaultView: 'dayGridMonth',
                dateClick: function (info) {
                    //alert('Clicked on: ' + info.dateStr);
                    //alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
                    //alert('Current view: ' + info.view.type);
                    // change the day's background color just for fun
                    info.dayEl.style.backgroundColor = 'red';
                },
                events: [{
                    title: 'Teste',
                    start: '2019-07-17',
                    end: '2019-07-18',
                    backgroundColor: '#red',
                    borderColor: '#red'
                }],
                weekNumbers: true,
                weekNumberCalculation: 'ISO',
                selectable: true
            });

            calendar.render();
        });
    </script>

我已经设置了点击日活动，如您所见select可用。

我想做的是当我点击一个按钮来获取日期 selected 这样我就可以保存在数据库中但是我没有在 select 文档中看到关于获取此数据

Answer 1

首先，我根据选择的日期添加一个class名称"selected"，然后在dom中搜索document.getElementsByClassName('selected')。同时添加一个按钮来显示在控制台输出。这是我的工作代码。

<link rel="stylesheet" href="~/lib/fullcalendar/core/main.css" />
<link rel="stylesheet" href="~/lib/fullcalendar/daygrid/main.css" />

<div class="container">
  <button type='button' id='days' onclick='allSelectedDays()'>GET Days</button>
  <div id="calendar"></div>

</div>

<script src="~/lib/fullcalendar/core/main.js"></script>
<script src="~/lib/fullcalendar/daygrid/main.js"></script>
<script src="~/lib/fullcalendar/interaction/main.js"></script>

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

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: ['dayGrid', 'interaction'],
      defaultView: 'dayGridMonth',
      dateClick: function(info) {
        //alert('Clicked on: ' + info.dateStr);
        //alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
        //alert('Current view: ' + info.view.type);
        // change the day's background color just for fun
        info.dayEl.style.backgroundColor = 'red';
        info.dayEl.className += ' selected';
      },
      events: [{
        title: 'Teste',
        start: '2019-07-17',
        end: '2019-07-18',
        backgroundColor: '#red',
        borderColor: '#red'
      }],
      weekNumbers: true,
      weekNumberCalculation: 'ISO',
      selectable: true
    });

    calendar.render();
  });
</script>
<script>
  function allSelectedDays() {
    //var days = $("#calendar table tbody td").css();
    var days = document.getElementsByClassName('selected');
    var selected = [];
    for (let i = 0; i < days.length; i++) {
      selected.push(days[i].getAttribute('data-date'));
    }
    console.log(selected);


  }
</script>

FullCalendar JS 获取选定的日期

FullCalendar JS Get selected days

javascript

fullcalendar