How to lockdown the calendar when the edit dialog is open

[gellingboeParticipant]

I am trying to lock down the calendar when the edit dialog is created. I am setting the dialog jqxwindow isModal to true which my understanding is how I would trigger that to treat it as a modal. I created an example setting the isModal value and in the console log you can see that isModal is switching from the default of false to true when the editDialogCreate function is called. I am not sure what else is needed to lock down the screen so that a user can’t click on the calendar, or in my case change screens in angular and the edit dialog stays open.

URL: https://www.jseditor.io/?key=87e9db8415a211e8a2dc00224d6bfcd5

Thanks
Greg Ellingboe

[gellingboeParticipant]

Ok, I noticed that the first time I right click and select Edit or new the screen stays clickable, as well if I double click then the screen. From that point on the screen locks down behind the modal popup.

[HristoParticipant]

Hello Greg Ellingboe,

Thank you for the interest.
Unfortunately, there is no such option.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[gellingboeParticipant]

I thought that was what the isModal set to true was supposed to do. And it does do it, just not the first time you load the edit dialog box.

[HristoParticipant]

Hello Greg Ellingboe,

I would like to suggest you look at this workaround:

var isFirstLoad = true;
            $("#scheduler").jqxScheduler({
                date: new $.jqx.date(2017, 11, 23),
                height: 600,
                source: adapter,
                showLegend: true,
                // called when the dialog is craeted.
                editDialogCreate: function (dialog, fields, editAppointment)
                {
                    if (isFirstLoad) {
                        isFirstLoad = false;
                        $('#scheduler').jqxScheduler('closeDialog');
                        dialog.jqxWindow({ isModal: true });
                        setTimeout(function ()
                        {
                            dialog.jqxWindow({ height: 380 });
                            $('#scheduler').jqxScheduler('openDialog', 50, 100);
                        }, 100);
                    }
...

(it is based on this “Edit Dialog” demo)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[gellingboeParticipant]

Thanks Hristo,

I am actually coding this in Angular and attempting to do this the angular way shown in the Angular demos. When I call the code below in the ngAfterViewInit, I am seeing the following errors.

Code:
ngAfterViewInit() {
this.getScheduledEvents();
this.scheduler.contextMenu(false);
this.scheduler.editDialog(false);
// this.scheduler.editDialogDateFormatstring(‘MM-dd-yyyy’); // commented out because this isn’t working and is reported on another ticket
// this.scheduler.editDialogDateTimeFormatString(‘MM-dd-yyyy HH:mm’); // commented out because this isn’t working and is reported on another ticket
if (this.isFirstLoad) {
this.isFirstLoad = false;
this.scheduler.closeDialog();
setTimeout(function ()
{
this.scheduler.openDialog(50, 100);
}, 100);
}
}

error when trying to use this.scheduler.closeDialog();
jqxscheduler.api.js:7 Uncaught TypeError: Cannot read property ‘jqxWindow’ of undefined
at b.(anonymous function).closeDialog (webpack-internal:///../../../../jqwidgets-scripts/jqwidgets/jqxscheduler.api.js:7:79673)
at Object.a.jqx.invoke (webpack-internal:///../../../../jqwidgets-scripts/jqwidgets/jqxcore.js:15:1509)
at Object.a.jqx.jqxWidgetProxy (webpack-internal:///../../../../jqwidgets-scripts/jqwidgets/jqxcore.js:15:6571)
at HTMLDivElement.eval (webpack-internal:///../../../../jqwidgets-scripts/jqwidgets/jqxcore.js:15:12488)

when i comment out the closeDialog Line I get this error when trying to use this.scheduler.openDialog(50, 100);
ERROR TypeError: this.scheduler.openDialog is not a function
at eval (schedule.ts:116)

Version:
/*
jQWidgets v5.5.0 (2017-Dec)
Copyright (c) 2011-2017 jQWidgets.
License: https://jqwidgets.com/license/
*/

[HristoParticipant]

Hello Greg Ellingboe,

The suggested workaround is relevant to the editDialogCreate callback not for “ngAfterViewInit”
You could try this approach:

isFirstLoad: boolean = true;
// called when the dialog is craeted.
editDialogCreate = (dialog, fields, editAppointment) => {
		
	if (this.isFirstLoad) {
		this.isFirstLoad = false;
		this.myScheduler.closeDialog();
		dialog.jqxWindow({ isModal: true });
		setTimeout(_ => {
			dialog.jqxWindow({ height: 380 });
			this.myScheduler.openDialog(50, 100);
		}, 100);
	}

        ...
}

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[gellingboeParticipant]

The reason I put it in ngAfterViewInit and not edtiDialogCreate, the latter doesn’t have access to the local variables outside of the function. So this.isFirstLoad and this.myScheduler are both undefined when the function is called.

Thanks
Greg

[HristoParticipant]

Hello Greg Ellingboe,

I created the whole case and it seems to work fine.
Please, take a look at this example:

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { jqxSchedulerComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxscheduler';
import { jqxButtonComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxbuttons';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})

export class AppComponent {	
	@ViewChild('scheduler') myScheduler: jqxSchedulerComponent;

    ngAfterViewInit() {
        this.myScheduler.ensureAppointmentVisible('id1');
    }

    generateAppointments() {
        let appointments = new Array();
        let appointment1 = {
            id: 'id1',
            description: 'George brings projector for presentations.',
            location: '',
            subject: 'Fashion Expo',
            calendar: 'East Coast Events',
            start: new Date(2016, 10, 15, 9, 0, 0),
            end: new Date(2016, 10, 18, 16, 0, 0)
        };
        let appointment2 = {
            id: 'id2',
            description: '',
            location: '',
            subject: 'Cloud Data Expo',
            calendar: 'Middle West Events',
            start: new Date(2016, 10, 20, 10, 0, 0),
            end: new Date(2016, 10, 22, 15, 0, 0)
        };
        let appointment3 = {
            id: 'id3',
            description: '',
            location: '',
            subject: 'Digital Media Conference',
            calendar: 'West Coast Events',
            start: new Date(2016, 10, 23, 11, 0, 0),
            end: new Date(2016, 10, 28, 13, 0, 0)
        };
        let appointment4 = {
            id: 'id4',
            description: '',
            location: '',
            subject: 'Modern Software Development Conference',
            calendar: 'West Coast Events',
            start: new Date(2016, 10, 10, 16, 0, 0),
            end: new Date(2016, 10, 12, 18, 0, 0)
        };
        let appointment5 = {
            id: 'id5',
            description: '',
            location: '',
            subject: 'Marketing Future Expo',
            calendar: 'Middle West Events',
            start: new Date(2016, 10, 5, 15, 0, 0),
            end: new Date(2016, 10, 6, 17, 0, 0)
        };
        let appointment6 = {
            id: 'id6',
            description: '',
            location: '',
            subject: 'Future Computing',
            calendar: 'East Coast Events',
            start: new Date(2016, 10, 13, 14, 0, 0),
            end: new Date(2016, 10, 20, 16, 0, 0)
        };
        appointments.push(appointment1);
        appointments.push(appointment2);
        appointments.push(appointment3);
        appointments.push(appointment4);
        appointments.push(appointment5);
        appointments.push(appointment6);

        return appointments;
    };

    date: any = new jqx.date(2016, 11, 23);

    source: any =
    {
        dataType: 'array',
        dataFields: [
            { name: 'id', type: 'string' },
            { name: 'description', type: 'string' },
            { name: 'location', type: 'string' },
            { name: 'subject', type: 'string' },
            { name: 'calendar', type: 'string' },
            { name: 'start', type: 'date' },
            { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: this.generateAppointments()
    };

    dataAdapter: any = new jqx.dataAdapter(this.source);

    printButton: any = null;

    resources: any =
    {
        colorScheme: 'scheme01',
        dataField: 'calendar',
        source: new jqx.dataAdapter(this.source)
    };

    appointmentDataFields: any =
    {
        from: 'start',
        to: 'end',
        id: 'id',
        description: 'description',
        location: 'place',
        subject: 'subject',
        resourceId: 'calendar'
    };

    views: any[] =
    [
        'dayView',
        'weekView',
        'monthView'
    ];
	
	isFirstLoad: boolean = true;
    // called when the dialog is craeted.
    editDialogCreate = (dialog, fields, editAppointment) => {
		
		if (this.isFirstLoad) {
			this.isFirstLoad = false;
			this.myScheduler.closeDialog();
			dialog.jqxWindow({ isModal: true });
			setTimeout(_ => {
				dialog.jqxWindow({ height: 380 });
				this.myScheduler.openDialog(50, 100);
			}, 100);
		}
		
					
        // 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");

        let buttonElement = document.createElement("BUTTON");
        buttonElement.innerText = 'Print';
        buttonElement.style.cssFloat = 'right';
        buttonElement.style.marginLeft = '5px';
        buttonElement.id = 'PrintButton';

        fields.buttons[0].appendChild(buttonElement);

        let printButton: jqwidgets.jqxButton = jqwidgets.createInstance('#PrintButton', 'jqxButton', {
            width: 50,
            height: 25
        });

        this.printButton = printButton;

        printButton.addEventHandler('click', function () {
            let appointment = editAppointment;
            if (!appointment && printButton.disabled) {
                return;
            }

            let appointmentContent =
                "<table class='printTable'>" +
                "<tr>" +
                "<td class='label'>Title</td>" +
                "<td>" + fields.subject.val() + "</td>" +
                "</tr>" +
                "<tr>" +
                "<td class='label'>Start</td>" +
                "<td>" + fields.from.val() + "</td>" +
                "</tr>" +
                "<tr>" +
                "<td class='label'>End</td>" +
                "<td>" + fields.to.val() + "</td>" +
                "</tr>" +
                "<tr>" +
                "<td class='label'>Where</td>" +
                "<td>" + fields.location.val() + "</td>" +
                "</tr>" +
                "<tr>" +
                "<td class='label'>Calendar</td>" +
                "<td>" + fields.resource.val() + "</td>" +
                "</tr>"
                + "</table>";
            let newWindow = window.open('', '', 'width=800, height=500'),
                document = newWindow.document.open(),
                pageContent =
                    '<!DOCTYPE html>\n' +
                    '<html>\n' +
                    '<head>\n' +
                    '<meta charset="utf-8" />\n' +
                    '<title>jQWidgets Scheduler</title>\n' +
                    '<style>\n' +
                    '.printTable {\n' +
                    'border-color: #aaa;\n' +
                    '}\n' +
                    '.printTable .label {\n' +
                    'font-weight: bold;\n' +
                    '}\n' +
                    '.printTable td{\n' +
                    'padding: 4px 3px;\n' +
                    'border: 1px solid #DDD;\n' +
                    'vertical-align: top;\n' +
                    '}\n' +
                    '</style>' +
                    '</head>\n' +
                    '<body>\n' + appointmentContent + '\n</body>\n</html>';
            try {
                document.write(pageContent);
                document.close();
            }
            catch (error) {
            }
            newWindow.print();
        });
        
    };

    /**
    * called when the dialog is opened. Returning true as a result disables the built-in handler.
    * @param {Object} dialog - jqxWindow's jQuery object.
    * @param {Object} fields - Object with all widgets inside the dialog.
    * @param {Object} the selected appointment instance or NULL when the dialog is opened from cells selection.
    */
    editDialogOpen = (dialog, fields, editAppointment) => {
        if (!editAppointment && this.printButton) {
            this.printButton.setOptions({ disabled: true });
        }
        else if (editAppointment && this.printButton) {
            this.printButton.setOptions({ disabled: false });
        }
    };

    /**
    * called when the dialog is closed.
    * @param {Object} dialog - jqxWindow's jQuery object.
    * @param {Object} fields - Object with all widgets inside the dialog.
    * @param {Object} the selected appointment instance or NULL when the dialog is opened from cells selection.
    */
    editDialogClose = (dialog, fields, editAppointment) => {
    };

    /**
    * called when a key is pressed while the dialog is on focus. Returning true or false as a result disables the built-in keyDown handler.
    * @param {Object} dialog - jqxWindow's jQuery object.
    * @param {Object} fields - Object with all widgets inside the dialog.
    * @param {Object} the selected appointment instance or NULL when the dialog is opened from cells selection.
    * @param {jQuery.Event Object} the keyDown event.
    */
    editDialogKeyDown = (dialog, fields, editAppointment, event) => {
    };
}

(it is based on this “Edit Dialog” demo)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts