如何将选定的日期包含到事件的网址中，在fullcalendar中。

Question

我试图在fullcalendar listDay视图中添加选定的日期到事件url中。我想让每个选定的日期都包含在事件的url中。

这就是我所需要的。

.......
events: [
        {
          title: 'event 1',
          url: 'example.com/test?date='{selected date here}',
          start: '2020-05-01',
          end: '2020-05-31'
        },
        {
          title: 'event 2',
          url: 'example.com/test?date='{selected date here}',
          start: '2020-05-01',
          end: '2020-05-31'
        }
        .....

所以我想实现的是：1.如果我选择2020-05-01，我希望事件的网址是：。url: 'example.com/test?date='2020-05-01'如果我选择2020-05-30，网址将改为url: 'example.com/test?date='2020-05-30'.

我试过 url: 'example.com/test?date='+ date.toISOString() 但它给我的是我选择的所有日子的当前日期。我也试过 url: 'example.com/test?date='+ moment(date).format(). 而且还是一样的。

2. 因此，当选择2020-05-01时，代码会是这样的。

.......
events: [
        {
          title: 'event 1',
          url: 'example.com/test?date='2020-05-01',
          start: '2020-05-01',
          end: '2020-05-31'
        },
        {
          title: 'event 2',
          url: 'example.com/test?date='2020-05-01',
          start: '2020-05-01',
          end: '2020-05-31'
        }
        .....

当选择2020 -05 -30时，代码会是这样的。

.......
events: [
        {
          title: 'event 1',
          url: 'example.com/test?date='2020-05-30',
          start: '2020-05-01',
          end: '2020-05-31'
        },
        {
          title: 'event 2',
          url: 'example.com/test?date='2020-05-30',
          start: '2020-05-01',
          end: '2020-05-31'
        }
        .....

先谢谢你了

这是我使用的完整代码。

<script>

      $(document).ready(function() {
       var date = new Date(),
       d = date.getDate(),
       m = date.getMonth(),
       y = date.getFullYear();
       var curdate = new Date('Y-m-d');
       $('#calendar').fullCalendar({
       header: {
            left: 'prev,next',
            center: 'title',
            right: ''
          },
          views: {
        listDay: { buttonText: 'list day' },
        listWeek: { buttonText: 'list week' }
      },
          defaultView: 'listDay',
          defaultDate: console.log(curdate),
          navLinks: true, // can click day/week names to navigate views
          editable: true,
          eventLimit: true, // allow "more" link when too many events
          events: [
        {
          title: 'Event 1',
          url: 'example.com/test?date=selected date',
          start: '2020-05-01',
          end: '2020-05-31'
        },
        {
          title: 'Event 2',
          url: 'example.com/test2?date=selected date',
          start: '2020-05-01',
          end: '2020-05-31'
        },
        {
          title: 'Event 3',
          url: 'example.com/test3?date=selected date',
          start: '2020-05-01',
          end: '2020-05-31'
        },
        {
          title: 'Event 4',
          url: 'example.com/test4?date=selected date',
          start: '2020-05-01',
          end: '2020-05-30'
        },
        {
          title: 'Event 5',
          url: 'example.com/test5?date=selected date',
          start: '2020-05-01',
          end: '2020-06-01'
        }
      ]
    });

       $(".btn").append(
       '<div class="input-group datetimepicker"><input type="text" class="form-control datepicker" placeholder="YYYY-MM-DD" style="padding: 0;width: 0;border: none;margin: 0;"></div>');

        $('.datepicker').datepicker({
        dateFormat: 'yy-mm-dd',
        showOn: "button",
        buttonText: '<span class="input-group-addon"><i class="fa fa-calendar"></i></span>',
        inline: true,
        onSelect: function(dateText, inst) {
            var d = new Date(dateText);
            $('#calendar').fullCalendar('gotoDate', d);
          }
        });
      });
    </script>
    <style>
      body {
        margin: 40px 10px;
        padding: 0;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
      }
      #calendar {
        max-width: 100%;
        /*max-width: 900px;*/
        margin: 0 auto;
      }
      .hoverEffect {
        font-size: 29px;
        position: absolute;
        margin: 30px 55px;
        cursor: pointer;
    }
      .ui-datepicker-trigger{border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
      background: transparent;
        border: none;
        margin: 0!important;
        padding: 0!important;
        height: 30px!important;}
      .ui-datepicker-trigger .input-group-addon:last-child {
        border-left: 1px solid #ccc;
      border-left: 1px solid #ccc;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    .fc-basicDay-button{border-radius:0;}
    </style>
    </head>
    <body>
<span style="float:right" class="btn"></span>
<div id='calendar'></div>
    </body>

所以我想让任何选定的日期都包含在事件的网址中。例如，当2020-05-01在日历上被选中时，网址将是这样的。url: 'example.com/test?date=2020-05-01' 而当选择2020-05-30时，网址将是 url: 'example.com/test?date=2020-05-30'

Answer 1

试试这个

const d = new Date('2020-05-28')
const year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d)
const month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(d)
const day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(d)

console.log(`${year}-${month}-${day}`)

Answer 2

仔细观察你的事件数据，似乎你有多天的事件，你想设置动态的URL链接，当用户点击事件中某一天的部分，并在URL的查询字符串中传递特定的日期。

不幸的是，fullCalendar不支持这个功能。当你点击一个事件时，fullCalendar会通知你哪个事件被点击了，但不会通知你事件的哪个部分--例如，在一个多天的事件中，你无法知道你的点击是发生在一天还是不同的一天。

根据你这样做的原因，可能有另一种方法来解决你的整体问题，但它需要更多关于你的需求的信息。