Question

我正在尝试将所选日期添加到全日历listDay视图的事件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()。仍然是一样的。

因此，当2020年5月1日被选择，则代码将看起来像这样：

.......
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年5月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>

所以我希望任何选定的日期都包含在事件URL中。例如，当2020年5月1日时在日历上选择的，该URL将url: 'example.com/test?date=2020-05-01'，并当选择2020年5月30日，将URL 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会通知您已单击哪个事件，但不会通知该事件的哪个部分-例如在多天内，您无法确定您的点击是发生在一天还是另一天。

根据您执行此操作的原因，可能有另一种方法来解决您的总体问题，但这将需要有关需求背景的更多信息。

如何在全日历中将选定的日期添加到事件URL

2 个答案: