Our pure JavaScript Scheduler component


Post by Petrit »

Hi,

I am following your examples but this error is appearing

Screen Shot 2021-02-22 at 21.59.07.png
Screen Shot 2021-02-22 at 21.59.07.png (167.6 KiB) Viewed 742 times

Below is my code

<div id="scheduler-container"></div>

<script type="text/javascript" src="/scheduler/build/scheduler.umd.js"></script>
<script type="text/javascript" src="/scheduler/examples/_shared/browser/helper.umd.js"></script>
<script type="text/javascript" src="/scheduler/examples/_shared/shared.umd.js"></script>
<script type="text/javascript">
    var scheduler = new bryntum.scheduler.Scheduler({
    appendTo: document.getElementById("scheduler-container"),
    height: 400,
    resources: [{"id":1,"name":"Skoda Rapid 1.4","tipi":"Compact"},{"id":2,"name":"Golf 7","tipi":"Full-Size"},{"id":3,"name":"Skoda Octavia","tipi":"Full-Size"},{"id":4,"name":"Skoda Rapid","tipi":"Full-Size"},{"id":5,"name":"Skoda Octavia","tipi":"Economy"},{"id":6,"name":"Skoda Octavia 01-091-DD","tipi":"Economy"},{"id":7,"name":"Skoda Octavia 01-091-FF","tipi":"Economy"},{"id":8,"name":"Skoda Octavia 01-091-GG","tipi":"Economy"},{"id":9,"name":"Skoda Octavia 01-091-QQ","tipi":"Economy"}],
    weekStartDay: 1,
    displayDateFormat : 'DD.MM.YYYY HH:mm',// Controls how dates will be displayed in tooltips etc
    shiftUnit: 'day',
    timeResolution : { // Dates will be snapped to this resolution
        unit: 'minute', // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
        increment: 15
    },
    columnLinesFor : 1, // Defines header level column lines will be drawn for. Defaults to the last level.
    allowOverlap: false,
    rowHeight: 30,
    editable: false,
    resourceMargin: 2,
    //eventStyle: 'colored',
    //eventColor: 'blue',
    height: 600,
    features: {
        cellEdit: false,
        timeAxisHeaderMenu: {
            items: {
                eventsFilter: false,
                zoomLevel: {
                    text: 'Zoom'
                },
                dateRange: {
                    text: 'Rangu i Datave',
                    startDateField: {
                        text: 'Prej',
                    }
                }
            }
        },
        group: 'tipi',
        sort: 'name',
        stripe: true,
        timeRanges: false,
        headerZoom: false,
        eventEdit: {
            editorConfig : {
                bbar : {
                    items : {
                        deleteButton : false
                    }
                }
            },
            items: {
                emertimiField : {
                    type: 'text',
                    name: 'emertimi',
                    label: 'Emërtimi'
                },
                nameField : {
                    type: 'text',
                    label: 'Klienti'
                },
                startDateField : {
                    label: 'Fillimi',
                },
                resourceField : {
                    label: 'Vetura',
                },
                endDateField : {
                    label: 'Mbarimi',
                },
                lokacioniMarrjesField: {
                    type: 'combo',
                    label  : 'Lokacioni Marrjes',
                    name: 'lokacioniMarrjes_id',
                    editable    : false,
                    items  : [{"value":1,"text":"Aeroport"},{"value":2,"text":"Qendra"}]
                },
                lokacioniKthimitField : {
                    type        : 'combo',
                    label       : 'Lokacioni Kthimit',
                    name        : 'lokacioniKthimit_id',
                    editable    : false,
                    items       : [{"value":1,"text":"Aeroport"},{"value":2,"text":"Qendra"}]
                },
                komentiField : {
                    type: 'textarea',
                    name: 'komenti',
                    label: 'Komenti'
                },
            },
        }
    },
    columns: [
        { text: 'Veturat', field: 'name', width: 160 }
    ],

eventStore : {
    fields: [
        {
            name: 'csrf-token', 
            defaultValue: 'Qoef053R9JsGpe5I013dzvMg1lSj2fbrhegvE8zF'
        },
    ],
    createUrl      : '/api/event/create',
    readUrl        : '/api/event/read',
    updateUrl      : '/api/event/update',
    deleteUrl      : '/api/event/delete',
    // Load and save automatically
    autoLoad       : true,
    autoCommit     : true,
    // Send as form data and not a JSON payload
    sendAsFormData : true,

    onBeforeCommit() {
        // Make it read only since it only allows one commit at the time
        //scheduler.readOnly = true;
    },

    onCommit() {
        scheduler.readOnly = false;
    },
    onException(event) {
        const
            { action, response } = event,
            serverMessage = response && response.parsedJson && response.parsedJson.msg,
            exceptionText        = `Command "${action}" failed.${serverMessage ? ` Server response: ${serverMessage}` : ''}`;

        Toast.show({
            html    : exceptionText,
            cls     : 'php-demo-error-message',
            timeout : 5000
        });

        if (!serverMessage) {
            console.error(`App Exception: ${exceptionText}`, event);
        }
        scheduler.readOnly = false;
    }
},

startDate  : new Date(2021, 0, 1),
endDate    : new Date(2021, 0, 31),
readOnly: false,
tbar: [
    {
        type    : 'checkbox',
        label   : 'Ndryshimet janē të bllokuara.',
        tooltip : 'Toggle read only mode for the event editor',
        checked: true,
        onChange({ checked }) {
            scheduler.readOnly = checked;
        }
    },
]
});
</script>

Post by mats »

Try removing

<script type="text/javascript" src="/scheduler/examples/_shared/browser/helper.umd.js"></script>
<script type="text/javascript" src="/scheduler/examples/_shared/shared.umd.js"></script>

If that doesn't do it, please upload a full runnable test case with HTML/JS etc and we'll have a look!


Post by Petrit »

Thank you for your fast reply.
When I am removing those lines, this error is appearing:
"Uncaught (in promise) ReferenceError: Toast is not defined"


Post by mats »

Looks like you have some exception happening, set a breakpoint in onException and see what seems to be going on?


Post by Petrit »

If I remove this part no error will appear:

Toast.show({
            html    : exceptionText,
            cls     : 'php-demo-error-message',
            timeout : 5000
        });

Post by mats »

Good, all working well then?


Post by Petrit »

I need Toast.
Could you advise me how to include Toast on my code?


Post by mats »

For the module scenario, just use regular import.

For UMD:

bryntum.scheduler.Toast.show('foo')

Post by Petrit »

Thank you.


Post Reply