jQuery UI Widgets Forums Scheduler Reset date dateChange

This topic contains 1 reply, has 2 voices, and was last updated by  Stanislav 5 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Reset date dateChange #99149

    tf-julien
    Participant

    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

    Reset date dateChange #99164

    Stanislav
    Participant

    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/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.