如何在数据到达时重新呈现完整日历

问题描述 投票:0回答:0

我在下面有这个脚本,我希望能够在 initdataEvents 填充 $de 时重新呈现完整日历

$(() => {
    initdataEvents();
})

var $de = [];
var initdataEvents = () => {
    axios.get('@Url.Page("/Tours/Index")?handler=Data').then(function (response) {
       response.data.rows.forEach(function (row) {
            var obj = {
                    id: row.Id,
                    title: row.Title,
                    start: row.Start,
                    end: row.End,
                    description: row.Description,
                    className: "bg-primary text-white border-primary text-white"
            }
            $de.push(obj)
        })
    }).catch(function (error) {
        toastr.error("Could not retrieve data from server");
  });
}
var todayDate = moment().startOf('day');
    var YM = todayDate.format('YYYY-MM');
    var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
            var TODAY = todayDate.format('YYYY-MM-DD');
            var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
        document.addEventListener('DOMContentLoaded', function () {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: ['dayGrid', 'list', 'timeGrid', 'interaction', 'bootstrap'],
                themeSystem: 'bootstrap',
                timeZone: 'UTC',
                //dateAlignment: "month", //week, month
                buttonText: {
                  today:    'today',
                  month:    'month',
                  week:     'week',
                  day:      'day',
                  list:     'list'
                },
                eventTimeFormat: {
                    hour: 'numeric',
                    minute: '2-digit',
                    meridiem: 'short'
                },
                navLinks: true,         
                header: {
                    left: 'prev,next today addEventButton',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                },
                footer: {
                    left:   '',
                    center: '',
                    right:  ''
                },
                customButtons: {
                  addEventButton: {
                    text: '+',
                    click: function popupmodal(tour) {
                        $('#tour_modal').modal('toggle');
                        $('#tour_modal .modal-title').html('@_localizer["Add Tour"]');
                        $('#tour_form').clearForm();
                        $('#tour_form')[0].reset();
                        if (tour) {
                            $('#tour_modal .modal-title').html('@_localizer["Edit Tour"]');
                            $('#tour_form').jsonToForm(tour, {
                                TourType: function (value) {
                                    if (value == 'BUS') {
                                        $('#tour_form [name*="TourType"]').val(0);
                                    } else {
                                        $('#tour_form [name*="TourType"]').val(1);
                                    }
                                }
                            })
                        } else {
                            $('#tour_form #Input_Id').val(0)
                        }
                    }}
                },
                editable: true,
                eventLimit: false,
                views: {
                  sevenDays: {
                    type: 'agenda',
                    buttonText: '7 Days',
                    visibleRange: function(currentDate) {
                      return {
                        start: currentDate.clone().subtract(2, 'days'),
                        end: currentDate.clone().add(5, 'days'),
                      };
                    },
                    duration: {days: 7},
                    dateIncrement: { days: 1 },
                  },
                },
        events: $de
    });
    calendar.render();
});

javascript jquery fullcalendar
© www.soinside.com 2019 - 2024. All rights reserved.