Change Cell color, get apointments data in the selected cell, prevent cell to add further apppointment based on certain condition

[Hamid Akhtar]

Hi Team Syncfusion, I have different types of event to be scheduled, If an event type is "other". What I want is, to change the background color  of the cell, also no other event could be scheduled on that day.
I tried isBlock property but it blocks the complete cell and the scheduled event cannot be edited or can be seen in QuickInfo.
Also, I tried to get the appointment scheduled on that day when a cell is clicked. A work around for this is filter my data with startDate or end Date of the cell using getCellDetail(args.target) but it won't work for me. 
To summarize my points:
1) Change color of the cell based on some condition.
2) Block/Freeze  the cell from adding more appointments, if an event of type "other" is scheduled on that day.
3) Get all appointments of that day when cell is clicked.  

[Balasubramanian Sattanathan]

Hi Hamid, 

Greetings from Syncfusion support. 

Q1: Change the color of the cell based on some conditions. 

We have changed the color of the weekend cells color based on condition with the help of the renderCell event of the Scheduler with help of the below code snippet. 

  onRenderCell(args: RenderCellEventArgs) { 

    if(args.elementType === "monthCells") { 

        const eventList: { [key: string]: any }[] = this.filterEvents(args.date.getTime(), args.date.getTime() + 86400000); 

        if(eventList.length === 1 && eventList[0].EventType === "others") { 

            // Preventing the CRD actions on othery type appointment rendered cells 

            args.element.classList.add('e-readonly-cell'); 

        } else if ([0, 6].indexOf(args.date.getDay()) > -1) { 

            // Coloring cell based on condition 

            args.element.classList.add('e-non-work-day'); 

      } 

    } 

  } 

Q2: Block/Freeze the cell from adding more appointments, if an event of type "other" is scheduled on that day. 

We have prevented adding appointments in the other type of appointment rendered cells in the actionBegin event of the Scheduler by using the below code snippet. 

  onActionBegin(args: ActionEventArgs) { 

    //   Preventing adding normal appointments in othery type appointment slots 

    const isEventCreate = args.requestType === 'eventCreate'; 

    const isEventChange = args.requestType === 'eventChange'; 

    if (isEventCreate || isEventChange) { 

        const app = isEventCreate ? args.addedRecords[0] : args.changedRecords[0]; 

        const slotAvailable = this.scheduleObj.isSlotAvailable(app.StartTime, app.EndTime); 

        const isOtherType = app.EventType === 'others'; 

        const eventList: { [key: string]: any }[] = this.filterEvents(app.StartTime.getTime(), app.EndTime.getTime()); 

        args.cancel = isOtherType && !slotAvailable || !isOtherType && eventList.length === 1 && eventList[0].EventType === "others"; 

        if(args.cancel) { 

            alert('Invalid action'); 

        } 

    } 

  } 

Q3: Get all appointments of that day when the cell is clicked. 

We have achieved your above requirement by filtering the Scheduler appointments based on the clicked cell by filtering the appointments using the ej2 data manager 

  onCellClick(args) { 

    //   To get the appointments rendered on acitve cell element 

    const startTime: number = args.startTime.getTime(); 

    const endTime: number = args.endTime.getTime(); 

    console.log("Appointments in currently clicked cell: ", this.filterEvents(startTime, endTime)); 

  } 

 

  filterEvents(start: number, end: number) { 

    //   Filtering apppointment based on start and end date 

    let filterObj: { [key: string]: any }[] = []; 

    filterObj.push({ field: 'StartTime', operator: 'greaterthanorequal', value: start, predicate: 'and', matchcase: false}); 

    filterObj.push({ field: 'EndTime', operator: 'lessthanorequal', value: end, predicate: 'and', matchcase: false }); 

    let filterCondition: { [key: string]: any } = filterObj[0]; 

    let predicate: Predicate = new Predicate(filterCondition.field, filterCondition.operator, filterCondition.value, filterCondition.matchcase); 

    for (let i: number = 1; i < filterObj.length; i++) { 

        predicate = predicate.and(filterObj[i].field, filterObj[i].operator, filterObj[i].value, filterObj[i].matchcase); 

    } 

    let result: Object[] = new DataManager(this.scheduleObj.eventSettings.dataSource).executeLocal(new Query().where(predicate)); 

    return result; 

  } 

Sample: https://stackblitz.com/edit/angular-8u3wrb?file=app.component.ts 

Kindly try the above sample and let us know if you need any further assistance. 

Regards, 

Balasubramanian S