FullCalendar v3 - изменить источник событий при изменении вида - PullRequest
Новая
       19

FullCalendar v3 - изменить источник событий при изменении вида

2 голосов
/ 14 мая 2019

Я использую FullCalendar v3 (последний) с бэкэндом PHP.

Я возвращаю массив JSON из бэкэнда, разбитого на 2 массива.Первый содержит сведения о событии (список заказов на день, с номером заказа в качестве заголовка), а второй содержит ежедневную сводку (с суммой заказов и рабочих часов в качестве заголовка).Массив выглядит так: 

{"events":[{"id":709989,"item_no":"ABC123","title":709989,"color":"red","start":"2019-05-14","end":"2019-05-14","allDay":true,"total_hours":3,"remaining_hours":1.5},{"id":709990,"title":709990,"item_no":"ABC345","color":"red","start":"2019-05-15","end":"2019-05-15","allDay":true,"total_hours":5.7,"remaining_hours":3.2}],"summary":[{"id":338823,"title":"Orders: 14\rHours:28.33\rRemaining Hours:13.33","start":"2019-05-14","end":"2019-05-14","allDay":true},{"id":338824,"title":"Orders: 3\rHours:14.2\rRemaining Hours: 12.2","start":"2019-05-15","end":"2019-05-15","allDay":true}]}

Существуют и другие свойства, но это основы.

Я пытаюсь изменить массив, используемый в качестве источника события, в зависимости откакой вид выбран.Я пробовал настраиваемый рендеринг событий, пользовательский рендеринг представлений, несколько источников событий (хотя это и дорого с точки зрения данных, количество записей не так много, что сильно влияет на производительность).

Имя пользовательского представления - customMonth.Когда выбрано это представление, я просто хочу отобразить сводные данные (из сводного массива).Если выбраны какие-либо другие представления (я использую basicWeek, month и listWeek), отобразим массив событий. 

let vname;
$("#calendar").fullCalendar({
    defaultDate: new Date(),
    defaultView: 'month',
    eventRender: function(eventObj, $el, view) {
        let n = view.name;
        if(n=='customMonth')
        {
            vname = 'customMonth';
            $el.popover({
                title: eventObj.title,
                content: eventObj.total_hours,
                html: true,
                trigger: 'hover',
                placement: 'auto',
                container: 'body'
            });
        } else {
            vname = n;
            $el.popover({
                title: "Work Order " + eventObj.title,
                content: '<strong>Item#</strong>: ' + eventObj.item_no + '<br />' + '<strong>Total Hours</strong>: ' + eventObj.total_hours + '<br />' + '<strong>Remaining Hours</strong>: ' + eventObj.remaining_hours,
                html: true,
                trigger: 'hover',
                placement: 'auto',
                container: 'body'
            });
        }
    }, 
    events: function(start, end, timezone, callback){
        $.ajax({
            url: '/myendpoint',
            type: 'POST',
            dataType: 'json',
            data: {
                action: 'get-calendar-summary',
                cell: selected_cell
            },
            success: function(data) {
                let events = [];
                if(vname=='customMonth') {
                    obj = data.summary;
                    $(obj).each(function() {
                        events.push({
                            id: $(this).attr('id'),
                            title: $(this).attr('title'),
                            start: $(this).attr('dept_due_dt'),
                            end: $(this).attr('dept_due_dt'),
                            total_hours: $(this).attr('total_hours'),
                            remaining_hours: $(this).attr('remaining_hours'),
                            order_count: $(this).attr('day_order_count'),
                            has_late_order: $(this).attr('has_late_order'),
                            allDay: true,
                            earliest_date: $(this).attr('earliest_date')
                        });
                    });
                } else {
                    obj = data.event_results;
                    $(obj).each(function() {
                        events.push({
                            id: $(this).attr('id'),
                            color: $(this).attr('color'),
                            title: $(this).attr('title'),
                            start: $(this).attr('start'),
                            end: $(this).attr('end'),
                            earliest_date: $(this).attr('earliest_date'),
                            item_no: $(this).attr('item_no'),
                            total_hours: $(this).attr('total_hours'),
                            remaining_hours: $(this).attr('remaining_hours')
                        });
                    });
                }
                callback(events);
            },
            error: function(err) {
                console.log(err);
            }
        });
    },
    views: {
        customMonth: {
            type: 'month',
            buttonText: 'overview'
        }
    },
    viewRender: function(view, el) {
        let lastview;
        if(view.name=='customMonth') {
            if(lastview == 'customMonth') {
                return false;
            } else {
                view.unrenderDates();
                view.renderDates();
                $("#calendar").fullCalendar('rerenderEvents');
            }
            lastview = 'customMonth';
        } else {
            if(lastview=='customMonth') {
                view.unrenderDates();
                view.renderDates();
                $("#calendar").fullCalendar('rerenderEvents');
            }
            lastview = view.name;
        }
    },
    header: {
        left: 'prev,next',
        center: 'title',
        right: 'basicWeek,month,listWeek,customMonth'
    },
    themeSystem: 'bootstrap3',
    timeZone: false,
    weekends: false,
    //tried with and without lazyFetching
    lazyFetching: true
});

Буду признателен за любые рекомендации.Я искал StackOverflow ( это похоже на ближайший , но я следовал точно, и это не сработало (отключив viewDisplay для viewRender)), Github и все другие источники, о которых я могу подумать.

1 Ответ

3 голосов
/ 14 мая 2019

Вот упрощенный пример того, чего вы пытаетесь достичь (надеюсь, я хорошо понимаю вашу проблему):

HTML: 

 <div id='calendar'></div>

Javascript: 

$(document).ready(function() {
    var ev1 = {"events":[{"id":709989,"item_no":"ABC123","title":'Event from source 1',"color":"red","start":"2019-05-14","end":"2019-05-14","allDay":true,"total_hours":3,"remaining_hours":1.5}]};
    var ev2 = {"events":[{"id":709989,"item_no":"ABC123","title":'Event from source 2',"color":"blue","start":"2019-05-14","end":"2019-05-14","allDay":true,"total_hours":3,"remaining_hours":1.5}]};
    $('#calendar').fullCalendar({
        defaultDate: new Date(),
        defaultView: 'month',
        viewRender: function(view) {
          if(view.type === 'basicWeek') {
             $('#calendar').fullCalendar( 'removeEventSource', ev1 );
             $('#calendar').fullCalendar( 'addEventSource', ev2 );
             return; 
           }  
        },
        header: {
           left: 'prev,next',
           center: 'title',
           right: 'basicWeek,month,listWeek,customMonth'
        },

    });
    $('#calendar').fullCalendar( 'addEventSource', ev1 );  
});

И codepen , чтобы попробовать.

Используется функция обратного вызова viewRender() для обнаружения изменения вида и addEventSource() / removeEventSource() для изменения данных. Поэтому, если вы измените представление с month на week, это изменит исходные события.

...