Multiple resources?

[andy knasinski]

I am trying to have two filters on my schedule data - Calendar and Resources

I'm not sure how to properly set the predicate to use BOTH checkbox values

  function onChange() {

        var predicate;

        var checkBoxes = [calendarOneObj, calendarTwoObj, calendarThreeObj,resourceOneObj,resourceTwoObj,resourceThreeObj];

        checkBoxes.forEach(function (checkBoxObj) {

            if (checkBoxObj.checked) {

                if (predicate) {

                    predicate = predicate.or('CalendarId', 'equal', parseInt(checkBoxObj.value, 10));

                } else {

                    predicate = new ej.data.Predicate('CalendarId', 'equal', parseInt(checkBoxObj.value, 10));

                }

            }

        });

        scheduleObj.eventSettings.query = new ej.data.Query().where(predicate);

    }

var calendarCollections = [

{ CalendarText: 'Committed', CalendarId: 1, Color: '#ea7a57' },

{ CalendarText: 'Uncommitted', CalendarId: 2, Color: '#df5286' },

{ CalendarText: 'Test', CalendarId: 3, Color: '#865fcf' }

];

 var resourceCollections = [

{ ResourceText: 'Carpenter 1', ResourceId: 1, Color: '#ea7a57' },

{ ResourceText: 'Carpenter 2', ResourceId: 2, Color: '#df5286' },

{ ResourceText: 'Subcontractor', ResourceId: 3, Color: '#865fcf' }

];

var scheduleObj = new ej.schedule.Schedule({

    height: '800px',

    selectedDate: '[[TODAY]]',

    currentView: 'Month',

    resources: [{

            field: 'ResourceId', title: 'Resources',

            name: 'Resource', allowMultiple: false,

            dataSource: resourceCollections,

            textField: 'ResourceText', idField: 'ResourceId', colorField: 'Color'

        },{

            field: 'CalendarId', title: 'Calendars',

            name: 'Calendar', allowMultiple: false,

            dataSource: calendarCollections

        }],

    eventSettings: {

        dataSource: scheduleData

    },

    readonly: false

});

[Saritha Sankar]

Hi andy knasinski,

We have implemented for filtering events in the schedule component using Room and Owner filters.

Each filter group Rooms and Owners which creates its own predicate using OR conditions among the selected checkboxes. This means:

• The Room filter includes events that match any of the selected rooms.
• The Owner filter includes events that match any of the selected owners.

Once both individual predicates are created, they are combined using an AND condition. This ensures that the final filtered result includes only those events that satisfy both the room and owner criteria.

Refer the below codes and sample for your reference.

  <div id="room-filters">

        <label><input type="checkbox" value="1" checked> ROOM 1</label>

        <label><input type="checkbox" value="2" checked> ROOM 2</label>

    </div>

        

   <div id="owner-filters">

        <label><input type="checkbox" value="1" checked> Nancy</label>

        <label><input type="checkbox" value="2" checked> Steven</label>

        <label><input type="checkbox" value="3" checked> Michel</label>

    </div>

 

document.getElementById('room-filters').addEventListener('change', function () {

    const checkedRoomIds = Array.from(document.querySelectorAll('#room-filters input[type="checkbox"]:checked'))

        .map(cb => parseInt(cb.value));

            

    let roomPredicate = null;

    checkedRoomIds.forEach(id => {

        if (roomPredicate) {

            roomPredicate = roomPredicate.or('RoomId', 'equal', id);

        } else {

            roomPredicate = new ej.data.Predicate('RoomId', 'equal', id);

        }

    });

    const checkedOwnerIds = Array.from(document.querySelectorAll('#owner-filters input[type="checkbox"]:checked'))

        .map(cb => parseInt(cb.value));

    

    let ownerPredicate = null;

    checkedOwnerIds.forEach(id => {

        if (ownerPredicate) {

            ownerPredicate = ownerPredicate.or('OwnerId', 'equal', id);

        } else {

            ownerPredicate = new ej.data.Predicate('OwnerId', 'equal', id);

        }

    });

    combineBoth(roomPredicate,ownerPredicate);

});

document.getElementById('owner-filters').addEventListener('change', function () {

    const checkedRoomIds = Array.from(document.querySelectorAll('#room-filters input[type="checkbox"]:checked'))

    .map(cb => parseInt(cb.value));

        

    let roomPredicate = null;

    checkedRoomIds.forEach(id => {

        if (roomPredicate) {

            roomPredicate = roomPredicate.or('RoomId', 'equal', id);

        } else {

            roomPredicate = new ej.data.Predicate('RoomId', 'equal', id);

        }

    });

    const checkedOwnerIds = Array.from(document.querySelectorAll('#owner-filters input[type="checkbox"]:checked'))

        .map(cb => parseInt(cb.value));

    let ownerPredicate = null;

    checkedOwnerIds.forEach(id => {

        if (ownerPredicate) {

            ownerPredicate = ownerPredicate.or('OwnerId', 'equal', id);

        } else {

            ownerPredicate = new ej.data.Predicate('OwnerId', 'equal', id);

        }

    });

    combineBoth(roomPredicate,ownerPredicate);

});

function combineBoth(roomPredicate,ownerPredicate) {

    var finalPredicate = null;

    if (roomPredicate && ownerPredicate) {

    finalPredicate = roomPredicate.and(ownerPredicate);

    } else if (roomPredicate) {

    finalPredicate = roomPredicate;

    } else if (ownerPredicate) {

    finalPredicate = ownerPredicate;

    }

    if (finalPredicate) {

    scheduleObj.eventSettings.query = new ej.data.Query().where(finalPredicate);

    } else {

    scheduleObj.eventSettings.query = new ej.data.Query();

    }

}

Sample Link: https://stackblitz.com/edit/x3fugusp-borizwnj?file=index.html

Please let us know if you need any further assistance.

Regards,

Saritha S.

[andy knasinski]

This is close - but in your sample then it shows separate calendars for Room. I want them all overlayed onto a single calendar view.

[Saritha Sankar]

Hi andy knasinski,

We kindly request further clarification regarding your expectations to ensure accurate understanding and alignment, we would appreciate it if you could elaborate on the details.

Additionally, kindly share a reference image that illustrates your requirement. This will greatly assist in ensuring that we proceed in the right direction.

Please get back to us with the required details for further assistance.

Regards,

Saritha S.