web-dev-qa-db-fra.com

Comment recharger FullCalendar Contact lorsque la valeur d'un menu change avec jQuery?

J'utilise le plugin FullCalendar de mon site pour afficher un événement de calendrier. Ce que j'essaie d'ajouter maintenant est un menu déroulant avec le nom et si le menu déroulant change de valeur, rechargez les événements en fonction de la valeur du menu.

Si un autre mot, par défaut je charge les événements que je possède. Le menu déroulant aura tous les utilisateurs dans un menu. À partir de ce menu, je peux modifier le nom d'utilisateur pour afficher d'autres événements d'utilisateurs sur la même page.

J'ai essayé d'ajouter un événement .change () dans le menu déroulant et refetchEvents sur le calendrier complet, mais cela ne fonctionne pas.

Quelqu'un peut-il m'aider à recharger ces événements en transmettant la valeur de $ ('# users_menu').

Ce qui suit est mon code actuel

$(document).ready(function() {

    $('#calendar').fullCalendar({

        header: {
          right: 'prev,next today',
          center: 'title',
          left: 'month,agendaWeek,agendaDay'
        },      

        events: {
            url: "ajax/getMyEvents.php",
            type: 'POST',
            data: {
                user_id: $('#users_menu').val()
            }
        },
        timeFormat: 'h:mm TT{ - h:mm} TT',
        defaultView: 'agendaDay',


        eventDrop: function(event, delta, minuteDelta, allDay, revertFunc) {

            if (!confirm("Are you sure about this change?")) {
                revertFunc();
            }
            updateEvent(event, delta, minuteDelta, allDay, 'Drop', revertFunc); 
        },

        eventResize: function(event, delta, minuteDelta, revertFunc) {

            if (!confirm("Are you sure about this change?")) {
                revertFunc();
            }
            updateEvent(event, delta, minuteDelta, false, 'endResize', revertFunc); 
        }


    });


    $('#users_menu').change( function(){

        $('#calendar').fullCalendar( 'refetchEvents' );
    });

});

Notez que je passe ma valeur user_id dans ma méthode de données.

Ce code fonctionne sur la charge, mais lorsque je modifie le nom d'utilisateur dans le menu déroulant, il ne recharge pas les nouveaux événements.

Comment puis-je le faire fonctionner?

jqueryfullcalendar
10
Jaylen

Je l'ai finalement résolu. 

Je devais removeEventSource puis √ puis refetchEvents pour que cela fonctionne, ce qui n’est pas cool :)

Voici mon code de solution pour cela 

$('#users_menu').change(function() {

    var events = {
        url: "ajax/getMyEvents.php",
        type: 'POST',
        data: {
            user_id: $(this).val()
        }
    }

    $('#calendar').fullCalendar('removeEventSource', events);
    $('#calendar').fullCalendar('addEventSource', events);
    $('#calendar').fullCalendar('refetchEvents');
}).change();
25
Jaylen

Essayez ceci ..... cette fonction déclenchera à nouveau l'événement ajax ..... 

$('#conrollerId').on('change', loadEvents);

function loadEvents() {
    $('#calendar').fullCalendar('removeEvents');
    $('#calendar').fullCalendar('refetchEvents');

}
3
Shanka SMS
function bindCal(id) {
    var ddlStudio1Value = $("#ddlStudio1 option:selected").val();
    $('#calendar').fullCalendar('addEventSource', function (start, end, timezone, callback) {
        $.ajax({
            url: '@Url.Action("GetEvents", "FacultySchedule")',
            data: "{'status':'','StudioId':'" + ddlStudio1Value + "','FacultyId':0,'start':'" + start + "', 'end':'" + end + "'}",
            dataType: "json",
            type: "POST",
            async: false,
            contentType: "application/json; charset=utf-8",
            success: function (doc) {
                var events = [];
                var EventIds = "0";
                $(doc).each(function () {
                    $('#calendar').fullCalendar('removeEvents', $(this).attr('id'));
                    events.Push({
                        id: $(this).attr('id'),
                        title: $(this).attr('title'),
                        start: $(this).attr('start'),
                        end: $(this).attr('end'),
                        color: $(this).attr('color'),
                        textColor: $(this).attr('textColor'),
                        someKey: $(this).attr('someKey'),
                        allDay: $(this).attr('allDay'),
                        CreatedBy: $(this).attr('CreatedBy'),
                        StatusRemark: $(this).attr('StatusRemark'),
                        DurationMnt: $(this).attr('DurationMnt'),
                        Studio: $(this).attr('Studio')
                    });
                });
                callback(events);
            },
            error: function (response) {
                alert(response.responseText);
            }
        });
    });
}
0
DARSHAN SHINDE