Our powerful JS Calendar component


Post by cbennett »

I would like to be able to open the Calendar in a modal popup.

The way our set up is currently working, we have an instance of the Calendar in list view that the user is able to interact with. This list allows them to review cancelled events (appointments). They have the option to reschedule the cancelled event.

If they click reschedule, a modal opens with a new instance of the Calendar with its own config, in the month view. This Calendar only loads appointment data related to the specific individual that the appointment was created for. It isn't possible to just toggle the view of the original Calendar to month, because it is working with a different set of data.

My issue is that once the modal is open with the new month view Calendar loaded, I am not able to edit the events or create new ones. If I double click a cell, it briefly shows the new event but then it disappears.

When I log the event through the "change" listener, I can see that the new event was created.

I am also unable to edit existing events. When I hover, I have the option to open the event editor by clicking on the tooltip icon, but clicking it does nothing.

Is there some config option that is disabling the event editing when I have the Calendar opened as a modal like this?


Post by saki »

Is there some config option that is disabling the event editing when I have the Calendar opened as a modal like this?

There is nothing that could disable events editing, however, z-Index could go awry so that the dialog is shown behind the popup. Which kind of popup do you use? This one? https://bryntum.com/docs/calendar/api/Core/widget/Popup/#config-modal

Post please a runnable showcase if still in troubles.


Post by cbennett »

I have set up the modal using Material-Ui's modal component. I also tried React-Bootstrap's modal component and faced the same issue. I will look into the built in widget.

What I am wanting to do is to open the new Calendar in a modal window.

Am I able to adjust the z-index of the event editor popups?

Last edited by cbennett on Tue Nov 09, 2021 5:34 pm, edited 1 time in total.

Post by saki »

OK, try to see if zIndexes are reasonable and prepare a runnable showcase if it does not resolve.


Post by cbennett »

I tried playing with the z-indexes. It didn't seem to have an impact on this issue.

I was able to get the EventEditor to appear by setting "autoClose: false", under eventEditFeature in the config. I am not able to use the EventEditor once it is open though. The pointer changes when I hover over the inputs, but when I try to click on or type in a field, nothing happens except that it gives a message that the field is required.

I am not sure how I would go about preparing a test case for you.

I just want to open the calendar in a modal window. When I try to do that, the event editor appears to be disabled. If I set autoClose to false, the editor opens, but I cannot use the inputs.


Post by Animal »

Why not just use the Calendar inside a Popup configured with

layout : 'fit',
modal : true

?

It will Just Work


Post by Animal »

I just tweaked the listview example a little to be like this:

import '../_shared/shared.js'; // Adds example page chrome
import Calendar from '../../lib/Calendar/view/Calendar.js';
import AppEvent from './lib/AppEvent.js';
import Popup from '../../lib/Core/widget/Popup.js';

const calendar = new Calendar({
    // Start life looking at this date
    date : new Date(2020, 9, 12),

    // Show the event list
    modes : {
        list : {
            listeners : {
                celldblclick : 'up.showModalCalendar'
            }
        }
    },

    mode : 'list',

    // CrudManager arranges loading and syncing of data in JSON form from/to a web service
    crudManager : {
        transport : {
            load : {
                url : 'data/busy.json'
            }
        },
        // This demo uses a custom Event model with extra fields
        eventStore : {
            modelClass : AppEvent
        },
        autoLoad : true
    },

    appendTo : 'container',

    showModalCalendar() {
        modalCalendar.show();
    }
});

const modalCalendar = new Popup({
    title : 'A Modal Calendar',
    autoShow : false,
    modal : true,
    layout : 'fit',
    height : 400,
    width  : 600,
    items : {
        calendarInstance : {
            type : 'calendar',

            sidebar : false, // Not eniough space

            // Start life looking at this date
            date : new Date(2020, 9, 12),
        
            // CrudManager arranges loading and syncing of data in JSON form from/to a web service
            crudManager : {
                transport : {
                    load : {
                        url : 'data/busy.json'
                    }
                },
                // This demo uses a custom Event model with extra fields
                eventStore : {
                    modelClass : AppEvent
                },
                autoLoad : true
            }
        }
    }
});

Resulting in this when I dblclick a row:

Screenshot 2021-11-10 at 12.13.09.png
Screenshot 2021-11-10 at 12.13.09.png (164.4 KiB) Viewed 937 times

Post by cbennett »

This is exactly what I needed. Absolutely fantastic! Thanks Animal.


Post Reply