Block certain dates

Question

Hi, how are you?, thanks for all answers in different posts i did. Now i come with another haha, i'm trying to block some dates (in my case because have an excepcion e.g a break), below there is code showing what i have, i read some posts but no one (or i didn't see) is for angular. 'Recurso' is an specific appointment, and 'Recursos' is the appointments group, one doubt is in eventSettings, resources i think its well because i assign the resources but in fields i don't know well what to put to block certain date as i said. If there is any code example similar to this is very welcome. Thanks again, regards

let recurso = {
          /* Id: this.excepcionesList[i].id,*/
          Subject: "NO UTILIZABLE",
          StartTime: hora_inicio,
          EndTime: hora_fin,
          OwnerId: this.excepcionesList[j].id_adm_boxes,
          Box: this.excepcionesList[j].id_adm_boxes,
          Color: '#E61507',
          isBlock: true
        }
        recursos.push(recurso)
      }
      this.ownerDataSource = this.boxes
      this.eventSettings = {
        dataSource: recursos,
        fields: {
          id: 'Id',
          subject: { name: 'Subject', title: 'Titulo Cita' },
          startTime: { name: 'StartTime', title: 'Hora inicio' },
          endTime: { name: 'EndTime', title: 'Hora Fin' },
          /*  isBlock: true */
        }
      };

ramiro redona · Answer

A remember:In this post: https://www.syncfusion.com/forums/153275/schedule-event-within-the-blocked-time-range public onRenerCell(args: RenderCellEventArgs) {       if(args.elementType === 'workCells' && args.date.getHours() === 13) {         args.element.classList.add('e-lunch-hours');       }     } This snippet code its similar what i want with the difference that i don't want block these dates from all 'OwnersDataSource' only who has the 'exception' that said before

Ravikumar Venkatesan · Answer

Hi Ramiro,Greetings from Syncfusion support.We have validated your query “Block certain dates”
at our end. You can block certain dates in the Schedule by setting up the
appointment IsBlock field to true as shown in the below code
snippet.Sample: https://stackblitz.com/edit/ej2-angular-schedule-block-appointments-sample?file=app.component.ts[app.component.ts]

public eventSettings: EventSettingsModel = {
      dataSource: [{
        Id: 1,
        Subject: 'Holiday',
        StartTime: new Date(2021, 7, 2),
        EndTime: new Date(2021, 7, 3),
        IsBlock: true,
        RoomId: 1
      },
      {
        Id: 2,
        Subject: 'Lunch',
        StartTime: new Date(2021, 7, 2, 13, 0),
        EndTime: new Date(2021, 7, 2, 14, 0),
        IsBlock: true,
        RoomId: 2
      },
      {
        Id: 3,
        Subject: 'Holiday',
        StartTime: new Date(2021, 7, 2, 12, 0),
        EndTime: new Date(2021, 7, 6, 16, 0),
        IsAllDay: true,
        IsBlock: true,
        RoomId: 3
      },],
      fields: {
        id: 'Id',
        subject: { title: 'Summary', name: 'Subject' },
        location: { title: 'Location', name: 'Location' },
        description: { title: 'Comments', name: 'Description' },
        startTime: { title: 'From', name: 'StartTime' },
        endTime: { title: 'To', name: 'EndTime' }
      }
    };

Kindly refer to the below links for more details and let us
know if you need any further assistance on this.UG: https://ej2.syncfusion.com/angular/documentation/schedule/appointments/#block-dates-and-timesDemo: https://ej2.syncfusion.com/angular/demos/#/material/schedule/block-eventsOutput:Regards,Ravikumar Venkatesan

ramiro redona · Answer

Thankssss!, i forgot say its works perfect.

Ravikumar Venkatesan · Answer

Hi Ramiro,Thanks for the update.We are happy that our solution works for you.Regards,Ravikumar Venkatesan