Non overlap events

[aaa]

I'm using "Date-wise Grouping" like  schedule

 <ScheduleComponent height='650px' className={classes.calendar}
                   showHeaderBar = {true}
                   resourceHeaderTemplate= { this.resourceHeaderTemplate }
                   dateHeaderTemplate= { this.dateHeaderTemplate }
                   eventRendered={this.eventRendered}
                   actionComplete={this.actionComplete}                   
                   eventSettings={{ dataSource: events }}
                   group={{ byDate: true, allowGroupEdit: true, resources: ['Owners'] }}  >
    <ResourcesDirective>
        <ResourceDirective field='resourceIds' title='Assignee' name='Owners' allowMultiple={true} dataSource={users} textField='name' idField='id' colorField='color'>
        </ResourceDirective>
    </ResourcesDirective>

And I need to events be unique, so one User cannot  have 2 events at same time.

I  multiple all my events to  block and event itself:

_.flatten( this.visits.map(x=> { return [
    { IsBlock:true, StartTime: x.start, EndTime: x.end, resourceIds: x.techs.map(t=> t.user_id) },
    { Id: x.id, StartTime: x.start, EndTime: x.end, resourceIds: x.techs.map(t=> t.user_id), IsReadonly: false } ] }) )

It works fine  for new events,  but its also prevent to save existing event, even if I not change times.
Is it any other  way  to achieve  same functionality?

[Karthigeyan Krishnamurthi]

Dear Customer, 

   

Thank you for contacting Syncfusion support. 

   

 

Your requirement can be achieved using isSlotAvailable method, kindly refer the below UG link. 

 

https://ej2.syncfusion.com/react/documentation/schedule/appointments/?no-cache=1#restricting-event-creation-on-specific-time-slots

 

 

 

Regards, 

Karthigeyan 

[Tshepo]

Hi there,

I also have the same problem, i want my time slots to only allow 1 event (booking) at a time.

I followed the documentation on isSlotAvailable and it does not work with both javascript and typescript.

I also tried using the isSlotAvailable documentation example with your demos but i can't get it to work on any setup including trying to use it on your stackblitz.com demos setup.

All help will be very much appreciated.

Thanks

[Nevitha Ravi]

Hi Tshepo, 

Greetings from Syncfusion Support. 

We have prepared a stackblitz sample to prevent appointment creation and updating if the time slot is already booked for your reference which can be viewed from the following link. 

https://stackblitz.com/edit/react-nme8ru-lqi2mu?file=index.js 

onActionBegin(args) { 

    if (args.requestType === 'eventCreate' && (args.data).length > 0) { 

      let eventData = args.data[0]; 

      let eventField = this.scheduleObj.eventFields; 

      let startDate = eventData[eventField.startTime]; 

      let endDate = eventData[eventField.endTime]; 

      let groupIndex = eventData.ConferenceId[0] - 1; 

      args.cancel = !this.scheduleObj.isSlotAvailable(startDate, endDate, groupIndex); 

    } 

  } 

Please check the sample and let us know if you need any further assistance. 

Regards, 

Nevitha 

[Sudhanshu Jain]

Hi Syncfusion,

I have same problem .I have tried isSlotAvailable method in all way .But it is not working as expected .I have tried above method also .It is also not working.Can you please let us how can we restrict that.

[Karthigeyan Krishnamurthi]

Hi Sudhanshu, 

 

Syncfusion greetings. 

 

We have checked the isSlotAvailable method and it is working correctly. Kindly try the sample and if the issue persists, try to reproduce the error in a sample and revert else share your code example/runnable sample (if possible) to serve you better. 

https://stackblitz.com/edit/react-buwxk1?file=index.js 

 

onActionBegin(args) { 

    if (args.requestType === 'eventCreate' || args.requestType === 'eventChange') { 

      let data; 

      if (args.requestType === 'eventCreate') { 

        data = args.data[0]; 

      } 

      else if (args.requestType === 'eventChange') { 

        data = args.data; 

      } 

      if (!this.scheduleObj.isSlotAvailable(data)) { 

        args.cancel = true; 

      } 

    } 

  } 

 

Regards, 

Karthi 

 

[Kamal Anass]

Hello there, 

I have the same problem but this time with recurrent events, I cant use isSlotAvailable when using recurrence so how can I prevent two appointments from showing at the same time ? 

[Nevitha Ravi]

Hi Kamal, 

Greetings from Syncfusion Support. 

We can prevent the appointment creation on recurrence events using actionBegin event, please refer the following sample and code. 

https://stackblitz.com/edit/react-prevent-ovelap-on-recurrence-event?file=index.js  

onActionBegin(args) { 

    if ( 

      args.requestType === "eventCreate" || 

      args.requestType === "eventChange" 

    ) { 

      let data = args.data instanceof Array ? args.data[0] : args.data; 

      let scheduleObj = document.querySelector(".e-schedule").ej2_instances[0]; 

      if (!isNullOrUndefined(data.RecurrenceRule)) { 

        let occurrences = scheduleObj.eventBase.generateOccurrence(data); 

        for (let i = 0; i < occurrences.length; i++) { 

          // Get the timeslot and check if there is already an event 

          let filteredEvents = scheduleObj.eventBase.filterEvents( 

            occurrences[i].StartTime, 

            occurrences[i].EndTime 

          ); 

          if (filteredEvents.length > 0) { 

            args.cancel = true; 

            break; 

          } 

        } 

      } else { 

        args.cancel = !scheduleObj.isSlotAvailable(data); 

      } 

    } 

  } 

Please try the sample and get back to us if you need any further assistance. 

Regards, 

Nevitha 

[Kamal Anass]

Hello Navitha, 

Thanks a lot for your reply, 

unfortunately that only works when I create an event and than I create an other one using recurrence, But if I have an already created event that's coming from database, and I want to create an other one with recurrence, it wont be recognized in scheduleObj.eventBase.filterEvents

[Nevitha Ravi]

Hi Kamal, 

Thanks for your update. 

We have checked the reported scenario in the previously shared sample and not able to replicate the reported problem at our end. For example, if we try to create a recurrence appointment as daily on 18^th February, the appointment is not created since we have appointment on 19^th.  So please check the case at your end, if you still face the issue please share the issue replicating steps or video demo depicting the issue to validate the issue at our end. 

Regards, 

Nevitha 

[Rahul Jain]

Nevitha,
I have tried this (https://stackblitz.com/edit/react-prevent-ovelap-on-recurrence-event?file=index.js ) solution also but that is not working completely,

When I update event in same day with different time that time that is working,

But this solution is not working for other events.

Please let me know , How to prevent all types of events.

I want only one appointment on a datetime .

Please let me know, I am waiting for Response.

Thank you -

Rahul Jain

[Ravikumar Venkatesan]

Hi Rahul,

Greetings from Syncfusion support.

We suggest you follow up on the below forum for your query.

https://www.syncfusion.com/forums/146492/schedule-control-recurrence-rule-default-render-prevent-based-on-recurrence-rule?reply=SfY2RQ

Regards,

Ravikumar Venkatesan