Our pure JavaScript Scheduler component


Post by jintech »

I have to add a custom checkbox field button in task edit modal with the delete, save, cancel buttons at bottom. On checking/unchecking of checkbox i need to change the css of the event tooltip and the event pill. How can this be done?


Post by sergey.maltsev »

Hi!

Create custom EventModel class with new checked field:

class CustomEventModel extends EventModel {
    static fields = [
        { name : 'eventType', defaultValue : 'appointment' },
        { name : 'checked', type : 'boolean', default : false }
    ];

Add it to CrudManager:

crudManager : {
    eventStore : {
        modelClass : CustomEventModel
    }
   ...
}

Configure these 2 features:

https://bryntum.com/products/scheduler/docs/api/Scheduler/feature/EventEdit

Add checkbox for checked Event field. You may use any other name.

features          : {
    eventEdit : {
        items : {
            customElement : {
                type  : 'checkbox',
                label : 'Checked',
                flex  : '1 1 auto',
                // name will be used to link to a field in the event record when loading and saving in the editor
                name  : 'checked'
            }
        }
    }
}

https://bryntum.com/products/scheduler/docs/api/Scheduler/feature/EventTooltip

Add custom Tooltip style

features          : {
    eventEdit : {
      eventTooltip : {
        align    : 'l-r', // Align left to right,
        template : data => `
        <dl>
            <dt>${DateHelper.format(data.eventRecord.startDate, 'LT')} - ${DateHelper.format(data.eventRecord.endDate, 'LT')}</dt>
            <div class="${data.eventRecord.checked ? 'b-checked' : 'b-not-checked'}">
                ${data.eventRecord.checked ? `I'm checked` : `I'm not checked`}
            </div>
        </dl>`
    }
},

Add css rules which you need:

.b-checked {
    color: green
}

.b-not-checked {
    color: red
}

You may paste the code below to this online example and see it in action:
https://bryntum.com/products/scheduler/examples/eventeditor/

import { DateHelper, EventModel, StringHelper, Scheduler, Toast } from '../../build/scheduler.module.js?477293';
import shared from '../_shared/shared.module.js?477293';

class CustomEventModel extends EventModel {
    static fields = [
        { name : 'eventType', defaultValue : 'appointment' },
        { name : 'checked', type : 'boolean', default : false }
    ];
}

const scheduler = new Scheduler({
    appendTo          : 'container',
    eventStyle        : 'border',
    resourceImagePath : '../_shared/images/users/',
    features          : {
        eventEdit : {
            items : {
                customElement : {
                    type  : 'checkbox',
                    label : 'Checked',
                    flex  : '1 1 auto',
                    // name will be used to link to a field in the event record when loading and saving in the editor
                    name  : 'checked'
                }
            }
        },

        eventTooltip : {
            align    : 'l-r', // Align left to right,
            template : data => `
            <dl>
                <dt>${DateHelper.format(data.eventRecord.startDate, 'LT')} - ${DateHelper.format(data.eventRecord.endDate, 'LT')}</dt>
                <div class="${data.eventRecord.checked ? 'b-checked' : 'b-not-checked'}">
                    ${data.eventRecord.checked ? `I'm checked` : `I'm not checked`}
                </div>
            </dl>`
        }
    },

    // Specialized event bar template with header and footer
    eventRenderer({ eventRecord, resourceRecord, renderData }) {
        renderData.style = 'background-color:' + resourceRecord.color;

        return StringHelper.xss`<section>
            <div class="b-sch-event-header">${DateHelper.format(eventRecord.startDate, 'LT')}</div>
            <div class="b-sch-event-footer">${eventRecord.name || ''} ${eventRecord.checked ? `(Checked)` : `(Not checked)`}</div>
        </section>`;
    },

    subGridConfigs : {
        locked : { width : 300 }
    },

    columns : [
        {
            type : 'resourceInfo',
            flex : 1,
            text : 'Staff'
        }
    ],

    crudManager : {
        autoLoad  : true,
        transport : {
            load : {
                url : 'data/data.json'
            }
        },
        eventStore : {
            modelClass : CustomEventModel
        },
        // This config enables response validation and dumping of found errors to the browser console.
        // It's meant to be used as a development stage helper only so please set it to false for production systems.
        validateResponse : true
    },

    barMargin  : 2,
    rowHeight  : 50,
    startDate  : new Date(2017, 1, 7, 8),
    endDate    : new Date(2017, 1, 7, 22),
    viewPreset : {
        base      : 'hourAndDay',
        tickWidth : 100
    }

});
Checkbox.png
Checkbox.png (93.8 KiB) Viewed 200 times

Post by jintech »

What if I need to check/uncheck the checkbox based on an event field? The field already exists in the event store and it has two values 0 and 1


Post by Animal »

Thats what the name of the new field is for. It matches with the name of the field in the event record.

Screenshot 2024-06-14 at 13.00.58.png
Screenshot 2024-06-14 at 13.00.58.png (53.53 KiB) Viewed 174 times

Post by jintech »

How do i place the checkbox field with the save, delete cancel buttons as the checkbox field is present in the items and not in bbar? I have added a reference image to show what i need

Attachments
checkbox.JPG
checkbox.JPG (6.26 KiB) Viewed 135 times

Post by Animal »

Don't add it to the items.

Add it to the editorConfig's bbar's items

Exactly the same principle.


Post by Animal »

Screenshot 2024-06-20 at 12.59.22.png
Screenshot 2024-06-20 at 12.59.22.png (471.73 KiB) Viewed 128 times

Post by jintech »

When we check/uncheck the box, we need to call the eventRenderer function as well. Based on the choice we assign a class to the event which modifies the UI for the rendered event.
Is there any possible way we can trigger the eventRenderer function while keeping the checkbox in editorConfig bbar?


Post by Animal »

If you want to refresh the Scheduler from not a mutation to the data, you will have to call scheduler.refresh()

Obviously it refreshes itself if you modify a field of a record. But if it's just some condition that will change some codepath in a renderer, you have to kick off a refresh.


Post by jintech »

When i add the checkbox in the bbar like this:

placeholderButton: {
	type: 'checkbox',
	label: 'Placeholder',
	name: 'checked',
	weight: 1
}

the name field is not referring to the field in the event record and it is not displaying the right data. Also on checking/unchecking of checkbox the css of the event tooltip and the event pill does not change. On the other hand if i add the same button in items it works correct.


Post Reply