Reset date dateChange

[tf-julienParticipant]

Hi,

I have a small problem with the jQxScheduler.
When i select a date on the calendar, the widget don’t use it and reset the date at today.

This is my code :

$(document).ready(function() {
            var theme = 'light';
            var appointments = new Array();
            var from;
            var to;
                      
            // prepare the data
            var source =
            {
                dataType: "array",
                dataFields: [
                    { name: 'id', type: 'integer' },
                    { name: 'description', type: 'string' },
                    { name: 'location', type: 'string' },
                    { name: 'subject', type: 'string' },
                    { name: 'formateur', type: 'string' },
                    { name: 'date_start', type: 'date', format: "yyyy-MM-dd HH:mm" },
                    { name: 'date_end', type: 'date', format: "yyyy-MM-dd HH:mm" },
                    { name: 'status', type: 'string' },
                    { name: 'tooltip', type: 'string' },
                    { name: 'stage_id', type: 'integer' },
                    { name: 'motifAbsence', type: 'string' },
                    { name: 'calendarColor', type: 'string' }
                ],
                id: 'id',
                localData: appointments
            };
            
            $("#jqxScheduler").jqxScheduler({
                width: "100%",
                height: 800,
                theme: theme,
                showLegend: true,
                editDialog: false,
                ready: function () {
                    var currentDate = $("#jqxScheduler").jqxScheduler('date');
                    //var currentView = $("#jqxScheduler").jqxScheduler('view');
                    
                    var fromYear = parseInt(currentDate.toString("yyyy"));
                    var fromMonth = parseInt(currentDate.toString("MM"))-1;
                    var toYear = parseInt(currentDate.toString("yyyy"));
                    var toMonth = parseInt(currentDate.toString("MM"))+1;
                    
                    //if(currentView == 'monthView') {
                        if(currentDate.toString("MM") == 01) {
                            fromYear = fromYear-1;
                            fromMonth = 12;
                        }
                        else if(currentDate.toString("MM") == 12) {
                            toYear = toYear+1;
                            toMonth = 1;
                        }
                        
                        // Calculating max date range for month view
                        from = new $.jqx.date(fromYear, fromMonth, 23);
                        to = new $.jqx.date(toYear, toMonth, 14);
                    //}
                    
                    $.ajax({
                        url: "url",
                        type: 'GET',
                        data: { from: from.toString(), to: to.toString(), filter: $('form[name="formatio_reelbundle_parcoursplanningfiltertype"]').serialize() },
                        success : function(data) {
                            source.localData = data;
                            $("#jqxScheduler").jqxScheduler({
                                showLegend: true,
                                source: new $.jqx.dataAdapter(source),
                                resources:
                                    {
                                        source: new $.jqx.dataAdapter(source)
                                    }
                            });
                            for(var i = 0; i < data.length; i++)
                                $("#jqxScheduler").jqxScheduler('setAppointmentProperty', data[i].id, 'draggable', false);
                        }
                    });
                },
                resources:
                {
                    source: new $.jqx.dataAdapter(source)
                },
                appointmentDataFields:
                {
                    id: "id",
                    from: "date_start",
                    to: "date_end",
                    location: "location",
                    subject: "subject",
                    status: "status",
                    resourceId: "subject",
                    stage_id: "stage_id",
                    tooltip: "tooltip",
                    motifAbsence: "motifAbsence",
                    calendarColor: "calendarColor"
                },
                statuses: {
                    10: "#B12D04",
                    20: "#FF6000",
                    30: "#0D9900",
                    40: "#2D88AA",
                    50: "#D7D1D1"
                },
                renderAppointment: function(data) {
                    if(data.appointment.stage_id) {
                        if(data.appointment.status == 10)
                            data.background = "#B12D04";
                        else if(data.appointment.status == 20)
                            data.background = "#FF6000";
                        else if(data.appointment.status == 30)
                            data.background = "#0D9900";
                        else if(data.appointment.status == 40)
                            data.background = "#2D88AA";
                        else if(data.appointment.status == 50)
                            data.background = "#D7D1D1";
                        else {
                            data.background = "#FFF";
                            data.textColor = "#000";
                        }
                    }
                    else {
                        if(data.appointment.calendarColor)
                            data.background = data.appointment.calendarColor;
                        else
                            data.background = "#000000";
                        if(data.appointment.motifAbsence)
                            data.html = data.appointment.motifAbsence;
                        else
                            data.html = "Indisponible";
                    }
                    
                    return data;
                },
                view: 'monthView',
                views:
                [
                    { type: 'dayView', text: "Jour", timeRuler: { formatString: "HH:mm" } },
                    { type: 'weekView', text: "Semaine", timeRuler: { formatString: "HH:mm" } },
                    { type: 'monthView', text: "Mois" },
                ]
            });
            
            $('#jqxScheduler').on('dateChange', function (event) {
                var args = event.args;
                var date = args.date;
                from = args.from;
                to = args.to;
                
                $.ajax({
                    url: "/url",
                    type: 'GET',
                    data: { from: from.toString(), to: to.toString(), filter: $('form[name="formatio_reelbundle_parcoursplanningfiltertype"]').serialize() },
                    success : function(data) {
                        source.localData = data;
                        $("#jqxScheduler").jqxScheduler({
                            showLegend: true,
                            source: new $.jqx.dataAdapter(source),
                            resources:
                                {
                                    source: new $.jqx.dataAdapter(source)
                                }
                        });
                        for(var i = 0; i < data.length; i++)
                            $("#jqxScheduler").jqxScheduler('setAppointmentProperty', data[i].id, 'draggable', false);
                    }
                });
            });
            
            // Custom modal to manage documents
            $('#jqxScheduler').on('appointmentDoubleClick', function (event) {
                var args = event.args;
                var appointment = args.appointment;
                var day_id = appointment.id;
                var stage_id = appointment.stage_id;
                
                if(stage_id) {
                    // Rendering form in modal
                    $.get(Routing.generate('formateur_front_documents_day', {id: day_id}), function(data) {
                        $("#modals").html(data);

                        // Displaying the modal
                        $('#modals .modal').modal('show');
                    });
                }

                return false;
            });
        });

Thank for your futur helping

[StanislavParticipant]

Hello tf-julien,

Can you please clarify a bit?
I tested your example, and it seemed to work fine.

Try changing: var currentDate = $("#jqxScheduler").jqxScheduler('date');
to: $("#jqxScheduler").jqxScheduler({ date: new $.jqx.date('todayDate') });

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts