Повторяющееся событие Fullcalendar с rrule не работает - PullRequest
Новая
       40

Повторяющееся событие Fullcalendar с rrule не работает

0 голосов
/ 04 марта 2020

Я использую fullcalendar 4.4.0, и все работает нормально, кроме rrule. Если я пытаюсь с простым повторением, это работает, но повторение rrule не работает. позвольте мне поделиться своим кодом 

    <script src="https://unpkg.com/@fullcalendar/rrule@4.4.0/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/core@4.4.0/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/interaction@4.4.0/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/timegrid@4.4.0/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/resource-common@4.4.0/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/resource-daygrid@4.4.0/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/resource-timegrid@4.4.0/main.min.js"></script>
    <scritpt src="https://unpkg.com/@fullcalendar/moment@4.4.0/main.min.js"></scritpt>
    <script src="https://unpkg.com/@fullcalendar/interaction@4.4.0/main.min.js"></script>
    <script src="{{asset('public/plugins/datepicker-master/dist/datepicker.js')}}"></script>

Код для генерации события выглядит следующим образом. 

             function makeEventFromBook(book) {
                var event={};
                var start_time_object=new Date(book.start_date+" "+book.book_time);
                var end_time_object=new Date(start_time_object.getTime() + 
                parseInt(book.duration)*60*1000);
                var start_time=start_time_object.toISOString();
                var end_time=end_time_object.toISOString();
                if(book.name==='null' || book.name==null)
                    book.name='';
                event={
                        id:book.id,
                        resourceId: book.provider_id,
                        // start: start_time,
                        // end:end_time,
                        title:book.name,
                        overlap:false,
                        backgroundColor:`${book.service_item_id==0 ? '#ff0000' :  '#1f1dd0'} `,
                        textColor:'#fff',
                        borderColor:'transparent',

                        rrule: {
                            count: 13,
                            freq: 'weekly',
                            interval: 1,
                            byweekday: [ 'mo', 'fr' ],
                            dtstart: '2020-03-01',
                            duration:"01:30"
                        },
                        groupId:book.id,

                        extendedProps:{
                            user_id:book.user_id,
                            user_name:book.user_name,
                            user_email:book.user_email,
                            user_phone_number:book.user_phone_number,
                            duration:book.duration,
                            book_date:book.book_time,
                            from_admin:book.from_admin,
                            service_type:book.service_type,
                            service_item_id:book.service_item_id,
                            provider_id:book.provider_id,
                            comment:book.comment,


                        }
                }
                return event;
            }

В чем здесь проблема? Если у кого-то есть опыт, пожалуйста, помогите мне.

Я делюсь своим календарем, как его показывают enter image description here

Здесь нет повторяющихся событий.

Пример данных события: 

events=[ { id: 117, resourceId: 3, title: "Personal", backgroundColor: "#ff0000 ", rrule: { count: 13, freq: "weekly", interval: 1, byweekday: [ "mo", "fr" ], dtstart: "2020-03-01", duration: "01:30" }, groupId: 117 }, ]

1 Ответ

1 голос
/ 05 марта 2020

Необходимо убедиться, что вы включили библиотечный файл rrule Javascript и файл плагина fullCalendar rrule и включили плагин в конфигурацию своего календаря.

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

На момент написания вы можете получить файл правила из https://cdn.jsdelivr.net/npm/rrule@2.6.2 / dist / es5 / rrule. мин. js

Вот рабочая демонстрация: https://codepen.io/ADyson82/pen/poJWLzB

Демонстрационный код, для справки: 

document.addEventListener("DOMContentLoaded", function() {
  var calendarEl = document.getElementById("calendar");
  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ["interaction", "dayGrid", "timeGrid", "resourceTimeline", "rrule"],
    header: {
      left: "prev,next today",
      center: "title",
      right: "dayGridMonth,timeGridWeek,timeGridDay"
    },
    events: [ { id: 117, resourceId: 3, title: "Personal", backgroundColor: "#ff0000 ", rrule: { count: 13, freq: "weekly", interval: 1, byweekday: [ "mo", "fr" ], dtstart: "2020-03-01" }, groupId: 117 } ]
  });

  calendar.render();
});
...