Как включить выбранную дату в url-адрес события в fullcalendar - PullRequest
Новая
       21

Как включить выбранную дату в url-адрес события в fullcalendar

1 голос
/ 27 мая 2020

Я пытаюсь добавить выбранную дату к URL-адресу события в представлении fullcalendar 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-адрес события был: url: 'example.com/test?date='2020-05-01', и если я выберу 2020-05-30, URL-адрес изменится на url: 'example.com/test?date='2020-05-30'.

Я пробовал url: 'example.com/test?date='+ date.toISOString(), но это давая мне текущую дату во все выбранные мной дни. Пробовал тоже url: 'example.com/test?date='+ moment(date).format(). И все то же самое.

Итак, когда выбран 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>

Поэтому я хочу, чтобы любая выбранная дата была включена в URL-адрес события . Например, если в календаре выбран 2020-05-01, URL-адрес будет url: 'example.com/test?date=2020-05-01', а когда выбран 2020-05-30, URL-адрес будет url: 'example.com/test?date=2020-05-30'

Ответы [ 2 ]

0 голосов
/ 28 мая 2020
• 1000 c дата в строке запроса URL.

К сожалению, fullCalendar не поддерживает это. Когда вы щелкаете событие, fullCalendar сообщит вам, какое событие было выбрано, но не сообщит, в какой его части - например, в многодневном режиме вы не можете определить, произошел ли ваш щелчок в течение одного или другого дня.

В зависимости от причины, по которой вы это делаете, может быть другой способ решения вашей общей проблемы, но для этого потребуется дополнительная информация о контексте вашего требования.

0 голосов
/ 28 мая 2020

Попробуйте это 

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}`)
...