Blocking Date/Time but allowing bookings (Soft blockout)

[kotac]

Hi,

I have a use case where i need to allow for hard and soft blockouts. Hard blockouts meaning you cant book over them and soft ones meaning they appear as the normal blockout but we allow user to book appointment there.

Is there a flag that we can set to allow booking appointments over the default blockout?

So the blocking entry would have isBlock:true and ideal i would set some additional property if exists like : "AllowBooking": true     

Is there anything like it?

Thanks

Example:

"Id": 56,

 "Subject": "Lunch Break",

 "StartTime": "2017-08-01T07:30:00.000Z",

 "EndTime": "2017-08-01T08:30:00.000Z",

 "RecurrenceRule": "FREQ=DAILY;INTERVAL=1;",

 "IsBlock": true,

"AllowBooking": true,

 "RoomId": 1

[Balasubramanian Sattanathan]

Hi Kotac, 

Greetings from Syncfusion Support. 

We have validated your requirement at our end and let you know that the block appointment will not allow to perform CRUD actions by default. And we can achieve your requirement by using the below workaround. In the below sample, we have added IsCustomBlock and AllowBooking fields and implemented block appointment functionality based on that field So we would suggest you to refer and follow the below sample.  

Sample: https://stackblitz.com/edit/react-schedule-block-event-customization?file=index.js 

index.js: 

this.data = [{ 

  Id: 1, 

  Subject: 'Testing-1', 

  StartTime: new Date(2018, 1, 14, 10, 0), 

  EndTime: new Date(2018, 1, 14, 12, 30), 

  IsCustomBlock: true, 

  AllowBooking: false 

}, { 

  Id: 2, 

  Subject: 'Testing-2', 

  StartTime: new Date(2018, 1, 15, 10, 0), 

  EndTime: new Date(2018, 1, 15, 12, 30), 

  IsCustomBlock: true, 

  AllowBooking: true 

}];
onDataBound() { 

  if (this.flag) { 

    var appointments = this.scheduleObj.eventsData; 

    for (var i = 0; i < appointments.length; i++) { 

      if (appointments[i].AllowBooking) { 

        appointments[i].IsReadonly = false; 

      } else { 

        appointments[i].IsReadonly = true; 

      } 

    } 

    this.flag = false; 

  } 

} 

onEventRendered(args) { 

  if (args.data.IsCustomBlock) { 

    args.element.classList.add('custom'); 

  } 

} 

onPopupOpen(args) { 

  if (args.target.classList.contains('custom') && !args.data.AllowBooking) { 

    args.cancel = true; 

  } 

} 

index.css: 

.e-appointment.custom { 

  background: rgba(0,0,0,0.08) !important; 

  border-radius: 2px !important; 

  color: rgba(0,0,0,0.6) !important; 

} 

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

Regards,  

Balasubramanian S