Как загрузить различные источники событий (json) для каждого представления?

Привет у меня есть календарь, который должен загружать разные JSON-источники событий для каждого представления. т. е. краткий источник для "месяца" (только максимум 3 элемента в ячейке дня), затем более подробные источники данных как для "дня", так и для "Недели".

Я думал, что я мог бы захватить, когда представление загрузилось и на основе которого представления, вызовите removeEventSource(), чтобы удалить предыдущий источник событий, а затем addEventSource(), чтобы добавить связанные данные текущего представления и обновить. Это единственный способ сделать что-то подобное? Если это так... как мне это сделать обнаружите, что представление завершило загрузку, чтобы я мог вызвать getView(), чтобы включить загрузку соответствующего источника событий?

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

Спасибо за любую помощь

EDIT: единственный другой способ, который я могу придумать, это удалить кнопки DAY/WEEK/MONTH fullcalendar и заменить их своими собственными, которые перезагружают экран php с добавленной переменной скажем, &calLoad=month or &calLoad=day я могу загрузить другой канал json, но это, очевидно, менее оптимальный способ выполнения задач.

3 2
fullcalendar

3 ответа:

Как ни странно, я только чтоопубликовал ответ на совершенно другой вопрос , который, оказывается, является решением этой проблемы. Я использовал методы addEventSource() и removeEventSource(), как рассматривал ОП.

<script>
var fcSources = {
    courses: {
                url: base+'accessfm/calendar/courses',
                type: 'GET',
                cache: true,
                error: function() { alert('something broke with courses...'); },
                color: 'purple',
                textColor: 'white',
                className: 'course'
            },
    requests: {
                url: base+'accessfm/calendar/requests',
                type: 'GET',
                cache: true,
                error: function() { alert('something broke with requests...'); },
                textColor: 'white',
                className: 'requests'
            },
    loads:  {
                url: base+'accessfm/calendar/loads',
                type: 'GET',
                cache: true,
                error: function() { alert('something broke with loads...'); },
                color: 'blue',
                textColor: 'white',
                className: 'loads'
            }
};
$('#fullcalendar').fullCalendar({
    header: {
                left: 'title',
                center: 'agendaDay,agendaWeek,month',
                right: 'today prev,next'
            },
    defaultView: 'agendaWeek',
    firstDay: 1,
    theme: true,
    eventSources: [ fcSources.courses, fcSources.requests, fcSources.loads ],
    viewDisplay: function(view) {
        if (lastView != view.name){ // view has been changed, tweak settings
            if (view.name == 'month'){
                $('#fullcalendar').fullCalendar( 'removeEventSource', fcSources.loads )
                                  .fullCalendar( 'refetchEvents' );;
            }
            if (view.name != 'month' && lastView == 'month'){
                $('#fullcalendar').fullCalendar( 'addEventSource', fcSources.loads );
            }
        }
        lastView = view.name;
    }
});
</script>
5

ViewDisplay запускается при изменении вида http://arshaw.com/fullcalendar/docs/display/viewDisplay/

Тогда вы можете проверить view.name атрибут

0

Спасибо за этот пример:)

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

Вот моя логика:

Мой основной источник событий-это (это источник событий из примеров fullcalendar по умолчанию): 

events: function(start, end, callback) {
            $.ajax({
                type: 'POST',
                url: 'myurl',
                dataType:'xml',
                crossDomain: true,
                data: {
                    // our hypothetical feed requires UNIX timestamps
                    start: Math.round(start.getTime() / 1000),
                    end: Math.round(end.getTime() / 1000),                  
                    'acc':'2',                      
                },
                success: function(doc) {                            
                    var events = [];
                    var allday = null; //Workaround
                    var Editable = null; //Workaround  
                    $(doc).find('event').each(function() 
                    {                       
                        if($(this).attr('allDay') == "false") //Workaround 
                                allday = false; //Workaround 
                        if($(this).attr('allDay') == "true") //Workaround 
                                allday = true; //Workaround
                        if($(this).attr('editable') == "false") //Workaround 
                                Editable = false; //Workaround 
                        if($(this).attr('editable') == "true") //Workaround 
                                Editable = true; //Workaround                       

                        events.push({
                            id: $(this).attr('id'),
                            title: $(this).attr('title'),
                            start: $(this).attr('start'),
                            end: $(this).attr('end'),                       
                            allDay: allday,
                            editable: Editable
                        });                             
                    }); 


                    //calendar.fullCalendar( 'addEventSource', othersources.folgas );
                    //calendar.fullCalendar( 'addEventSource', othersources.ferias );       
                    //calendar.fullCalendar('refetchEvents');               
                    callback(events);
                }
            });     
        }

Теперь мне нужно было добавить больше источников и сделать это вне календаря (рядом с переменными даты из fullcalendar примеры) я сделал переменную, похожую на код выше, но с вызовами ajax, похожими на мой основной:) 

var othersources = {

   anothersource: {               
            events: function(start, end, callback) {
            $.ajax({
                type: 'POST',
                url: 'myurl',               
                data: {
                    // our hypothetical feed requires UNIX timestamps
                    start: Math.round(start.getTime() / 1000),
                    end: Math.round(end.getTime() / 1000),                  
                    'acc':'7',                      
                },          
                success: function(doc) {    

                    var events = [];
                    var allday = null; //Workaround
                    var Editable = null; //Workaround  
                    $(doc).find('event').each(function() 
                    {                       
                        if($(this).attr('allDay') == "false") //Workaround 
                                allday = false; //Workaround 
                        if($(this).attr('allDay') == "true") //Workaround 
                                allday = true; //Workaround
                        if($(this).attr('editable') == "false") //Workaround 
                                Editable = false; //Workaround 
                        if($(this).attr('editable') == "true") //Workaround 
                                Editable = true; //Workaround                       

                        events.push({
                            id: $(this).attr('id'),
                            title: $(this).attr('title'),
                            start: $(this).attr('start'),
                            end: $(this).attr('end'),                       
                            allDay: allday,
                            editable: Editable
                        });                             
                    });                         

                    callback(events); //notice this
                }
            });     

        },                
            cache: true,
            //error: function() { alert('something broke with courses...'); },
            color: 'green', //events color and stuff
            textColor: 'white',
            //className: 'course'
       }     
 }

Следующий код аналогичен приведенному выше и является частью calendar proprietys (внутренняя календарная переменная): 

            eventSources: [ othersources.anothersource ],           

viewDisplay: function(view) {    
        if (view.name == 'month'){
       // alert(view.name);
            //calendar.fullCalendar( 'addEventSource', othersources.folgas );
            calendar.fullCalendar( 'addEventSource', othersources.anothersource );
            //calendar.fullCalendar('refetchEvents'); //Notice i'm not doing the refetch events. And its working for me. but i'm calling thi elsewhere, every time i make an action. So you must figure it out ;)           
        }
0