Due to large events, rendering is very slow

[arifhussain353]

I have more than 500 events to render on load. It takes too much time. I have added some custom HTML for the event layout. Am I missing something or doing wrong anything?

 <div class="planer_event_box_week" 
:data-id="item._id" v-for="(item) in getPlans.items" :id="'week_view_'+item._id">
       //rest html
</div>

<full-calendar ref="calendar" :config="config" :events="getPlans.items"
 @event-drop="reschedulePlan"  @view-render="refetchPlans"></full-calendar>

 config: {
        header: {
          left: 'today',
          center: 'prev,title,next',
          right: 'month,basicWeek'
        },
        dayNamesShort: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
        defaultView: 'month',
        editable: true,
        ignoreTimezone: false,
        timezone: 'utc',
        views: {
          month: {
            eventLimit: 3// adjust to 6 only for agendaWeek/agendaDay
          }
        },
        eventRender: function (event, element, view) {
          this.eventArray = $('#week_view_' + event._id).get(0).outerHTML
          return this.eventArray
        }
      }

[BrockReece]

Does it load ok just using vanilla fullcalendar (that this plugin wraps)?

[arifhussain353]

@BrockReece you mean if you use vanilla fullcalendar? . I don't think it could be any issue with it.