Change appointment recurrence programmatically

[OussamaParticipant]

Hello, I use jqxScheduler with angular to simulate an educational planning…
Some appointments should be shown weekly, other aren’t (according to appointment’s type).
Example :
If it is an examination meeting, the appointment will not be recurrent.
If it is a course meeting, the appointment will have weekly recurrence on the same day that I have chosen.
So how to change programmatically the recurrent field?

[HristoParticipant]

Hello Oussama,

Could you clarify it?
If you need to decide where the recurrent date should stop you could use simple algorithm before adding them to the Scheduler.
Also, you could use beforeLoadComplete callback function of the DataAdapter to achieve this.
I would suggest you look at this demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxscheduler/scheduler-recurring-appointment.htm?light

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[OussamaParticipant]

Hello Hristo,
in my appointment I have a field which name is “type”, it has tow possible values “type1” and “type2”.
I hide the repeatContainer to change it programmatically.
So when the user click on dialog saveButton, I will check if it is “type1” I make this appointment simple (no recurence),
if it is “type2” I make this appointment weekly.
The probleme is how to change recurrence options according to “type” ?

[HristoParticipant]

Hello Oussama,

Please, take a look at this example:
https://www.jseditor.io/?key=scheduler-with-type
(try to open “Interview with James” appointment, it is from ‘type2’)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[dalswordParticipant]

Hi Hristo;
Can you make the link publicly available?
Thanks

[HristoParticipant]

Hello dalsword,

You could find this example below is the same:

$(document).ready(function () {
    var appointments = new Array();

    var appointment1 = {
        id: "id4",
        description: "",
        style: "#AA4643",
        location: "",
        subject: "New Projects Planning",
        calendar: "Room 2",
        type: 'type1',
        from: new Date(2016, 10, 22, 8, 0, 0),
        to: new Date(2016, 10, 22, 13, 0, 0)
    }

    var appointment2 = {
        id: "id5",
        description: "",
        style: "#89A54E",
        location: "",
        subject: "Interview with James",
        calendar: "Room 1",
        type: 'type2',
        from: new Date(2016, 10, 25, 13, 0, 0),
        to: new Date(2016, 10, 25, 15, 0, 0)
    }

    var appointment3 = {
        id: "id6",
        description: "",
        style: "#71588F",
        location: "",
        subject: "Interview with Nancy",
        calendar: "Room 2",
        type: 'type1',
        from: new Date(2016, 10, 26, 14, 0, 0),
        to: new Date(2016, 10, 26, 16, 0, 0)
    }

    var appointment4 = {
        id: "id7",
        description: "",
        style: "#307DD7",
        location: "",
        subject: "Daily Meeting",
        calendar: "Room 1",
        type: 'type2',
        recurrenceRule: "FREQ=WEEKLY;BYDAY=MO,WE",
        from: new Date(2016, 10, 23, 10, 0, 0),
        to: new Date(2016, 10, 23, 11, 0, 0)
    }

    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    appointments.push(appointment4);

    // prepare the data
    var source =
        {
            dataType: "array",
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'description', type: 'string' },
                { name: 'location', type: 'string' },
                { name: 'subject', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'type', type: 'string' },
                { name: 'recurrenceRule', type: 'string' },
                { name: 'recurrenceException', type: 'string' },
                { name: 'style', type: 'string' },
                { name: 'from', type: 'date' },
                { name: 'to', type: 'date' }
            ],
            id: 'id',
            localData: appointments
        };

    var adapter = new $.jqx.dataAdapter(source, { autoBind: true });
    var records = adapter.records;

    checkType = (id) => {
        for (var i = 0; i < records.length; i += 1) {
            if (records[i].id == id && records[i].type == 'type2') {
                return true;
            }
        }

        return false;
    };
    
    $("#scheduler").jqxScheduler({
        date: new $.jqx.date(2016, 11, 27),
        width: 850,
        height: 600,
        source: adapter,
        ready: function () {
            $("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id5');
        },
        editDialogCreate: function (dialog, fields, editAppointment) {
            // hide repeat option
            //fields.repeatContainer.hide();
            // hide status option
            fields.statusContainer.hide();
            // hide timeZone option
            fields.timeZoneContainer.hide();
            // hide color option
            fields.colorContainer.hide();
            fields.subjectLabel.html("Title");
            fields.locationLabel.html("Where");
            fields.fromLabel.html("Start");
            fields.toLabel.html("End");
            fields.resourceLabel.html("Calendar");
            // add custom print button.

            if (editAppointment != undefined) {
                var isReccurrentType = checkType(editAppointment.id);
                if (isReccurrentType) {
                    setTimeout(() => {
                        $(fields.repeat[0]).jqxDropDownList('selectIndex', 2);
                    }, 0);
                }
            }

        },
        editDialogOpen: function (dialog, fields, editAppointment) {
            if (editAppointment != undefined) {
                var isReccurrentType = checkType(editAppointment.id);
                if (isReccurrentType) {
                    setTimeout(() => {
                        $(fields.repeat[0]).jqxDropDownList('selectIndex', 2);
                    }, 0);
                }
            }
        },
        appointmentDataFields:
        {
            from: "from",
            to: "to",
            id: "id",
            description: "description",
            location: "place",
            style: "style",
            type: "type",
            subject: "subject",
            resourceId: "calendar",
            recurrencePattern: "recurrenceRule",
            recurrenceException: "recurrenceException"
        },
        view: "weekView",
        views:
        [
            'dayView',
            'weekView',
            'monthView'
        ]
    });

    setTimeout(() => {
        $("#scheduler").jqxScheduler('beginAppointmentsUpdate');
        $("#scheduler").jqxScheduler('setAppointmentProperty', 'id7', 'borderColor', 'red');
        $("#scheduler").jqxScheduler('setAppointmentProperty', 'id7', 'subject', 'Change border-color to red!');
        $("#scheduler").jqxScheduler('endAppointmentsUpdate');
    }, 2000);
});

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts