The delete event is not working in the Scheduler - from 187137

[MP]

MP Mar 18, 2024 

i was able to load the data using axios. Can you pls help me with the code when you add, edit and delete using axios. I think this is my challenge. Thanks again. 

MP

Mar 19, 2024 

Hello Experts, 

I was able to load resources, reservations, create new event however the delete event is not working. In the backend event is deleted but on the scheduler it is not. 

const onPopupOpen = (args) => {

console.log(args);

//console.log('onPopupOpen', args)

if (args.type === 'DeleteAlert') {

// args.cancel = true;

// scheduleObj.current.deleteEvent(args.data);

args.cancel = true;

console.log('args', args)

console.log('scheduleObj', scheduleObj)

deleteData(args.data.reservationId);

scheduleObj.current.deleteEvent(args.data.id)

console.log('scheduleObj', scheduleObj)

};

}

const deleteData = (reservationId) => {

console.log("deleteReservation ,reservationId ", reservationId)

try {

const response = axios.delete(`http://xyz/api/v1/reservation/reservationId/${reservationId}`);

console.log(response.data);

} catch (error) {

console.error(error);

}

};

<ScheduleComponent ref={scheduleObj} cssClass='group-editing' width='100%' height='650px'

timeScale={ {interval: 60, slotCount: 2}}

selectedDate={new Date(2024, 2, 18)} eventClick={onEventClick} cellClick={onCellClick}

cellDoubleClick={onCellDoubleClick} popupOpen={onPopupOpen}

eventSettings={{ dataSource: reservationData, ignoreWhitespace: false, allowEditing: false,

enableTooltip: true, enableMaxHeight: true, enableIndicator: false,

fields: {

subject: { title: 'Conference Name', name: 'reservationName' },

description: { title: 'Summary', name: 'reservationName' },

startTime: { title: 'From', name: 'reservationCheckIn' },

endTime: { title: 'To', name: 'reservationCheckOut' } } }}

group={{ allowGroupEdit: false, resources: ['Conferences'] }}>

<ResourcesDirective>

<ResourceDirective field='conferenceId' title='Attendees' name='Conferences'

allowMultiple={false} dataSource={resourceData}

textField='resourceName' idField='conferenceId' colorField='resourceColor'/>

</ResourcesDirective>

<ViewsDirective>

<ViewDirective option='Day'/>

</ViewsDirective>

<Inject services={[Day, Resize, DragAndDrop]}/>

</ScheduleComponent>

Pls help me out. THanks

[MP]

Shoukd I need to call the the reservations api again after delete is invoked?

[MP]

any udpate here ?

[MP]

const saveReservation = (eventData) => {

console.log("eventData", eventData)

const date = new Date();

const year = date.getFullYear();

const month = `0${date.getMonth() + 1}`.slice(-2);

const day = `0${date.getDate()}`.slice(-2);

const formattedDate = `${year}-${month}-${day}`;

const res = {

reservationName : eventData.reservationName,

reservationCheckIn : eventData.reservationCheckIn,

reservationCheckOut : eventData.reservationCheckOut,

reservationDate :formattedDate,

memberId: "7557d682-47d8-46e5-8260-8506fb5421b3",

resourceId: "eff281f2-0ad8-49c4-943f-3f231fb75e35"

}

axios.post('http://xyx/api/v1/reservation', res)

.then(response => response.data )

.catch(error => {

this.setState({ errorMessage: error.message });

console.error('There was an error!', error);

});

}

[Ashokkumar Karuppasamy]

Hi Manasee Punjani,

Based on the shared details, we have prepared a sample Axios CRUD action for the schedule. Please find the attached sample below for your reference. Please try this solution and let us know if you need any further assistance.

Sample: https://github.com/SyncfusionExamples/React-Scheduler-CRUD-using-axiosRegards

Regards,
Ashok

[MP]

404 for git

[MP]

also with my implementation 

*)  Drag and Drop is not working

*) If there is already an event booked/created, I don't want to others to create an event at the same time ? 

*) If its an all day event, the entire day must be blocked.  -- How can I do that ? 

*) Event could start at anytime but could be 30/45 mins long..so if user tries to create and it overlaps it should not.. the isSchedulerAvailable is not working.. 

const onActionBegin = (args) => {

console.log('actionBegin', args)

console.log('scheduleObj', scheduleObj)

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

let eventData = args.data[0];

let eventField = scheduleObj.current.eventFields;

console.log('eventField', eventField);

let startDate = eventData[eventField.startTime];

console.log('startDate', startDate);

let endDate = eventData[eventField.endTime];

console.log('endDate', endDate);

const isAvailable = scheduleObj.current.isSlotAvailable(startDate, endDate);

console.log('isAvailable', isAvailable)

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

}

}

This only works for first time and the User click second time, it calls and creates and event and move the other event.

[Padmini Ramamurthy]

Hi Manasee,

Please find the GitHub link

GitHub - SyncfusionExamples/React-Scheduler-CRUD-using-axios: React scheduler CRUD sample using axios

Regards,

Padmini

[MP]

Thanks Padmini -- I will take a look tonight. 

Do you have any example on the below  

*) If there is already an event booked/created, I don't want to others to create an event at the same time ? 

*) If its an all day event, the entire day must be blocked.  -- How can I do that ? 

[Ashokkumar Karuppasamy]

Hi Manasee,

Q1)   Drag and Drop is not working.

Ensure that you properly import and inject DragAndDrop in your application as shown in the code below. If you are still facing issues, kindly provide more details about when the issues occur during drag and drop.

import {

  TimelineViews,

  TimelineMonth,

  Agenda,

  ScheduleComponent,

  ViewsDirective,

  ViewDirective,

  ResourcesDirective,

  ResourceDirective,

  Inject,

  Resize,

  DragAndDrop,

} from '@syncfusion/ej2-react-schedule';

            <Inject

              services={[

                TimelineViews,

                TimelineMonth,

                Agenda,

                Resize,

                DragAndDrop,

              ]}

            />

 

 

Q2) f there is already an event booked/created, I don't want to others to create an event at the same time ?

In the Syncfusion Scheduler, we indeed have a feature that can prevent the creation of events with overlapping time ranges. The isSlotAvailable method is specifically designed for this purpose. It checks whether the given time range slots are available for event creation or if they are already occupied by other events.

When creating an event, you can pass the event's data into this method to check the availability of the slot. If the slot is available, the event will be created; if not, it will prevent the creation of the event.

For more detailed information and usage examples, please refer to our official documentation at: Syncfusion Scheduler - https://ej2.syncfusion.com/react/documentation/schedule/cell-customization#check-for-cell-availability

Q3) If its an all day event, the entire day must be blocked.  -- How can I do that ?

When loading the event in the schedule, ensure that the all-day event has the IsBlock field added and set to true. If your event changes or is created using the schedule actionBegin event, and it is an all-day event, set the IsBlock field to true to meet your requirement. Please try this solution, and let us know if you need any further assistance.

Sample: https://stackblitz.com/edit/react-rx9l53-ehuilz?file=index.js

[data source]

const data = [

    {

      Id: 1,

      Subject: 'Functionality testing',

      StartTime: '2023-01-04T03:30:00.000Z',

      EndTime: '2023-01-04T05:00:00.000Z',

      IsAllDay: true,

      ProjectId: 1,

      TaskId: 1,

      IsBlock: true,

    },

 

[index.js]

Regards,
Ashok

[MP]

Thanks Ashok.I will try and let you know. 

[MP]

One help with CSS, If I reduce the size of screen OR on mobile then I don't see the Date. 

[Ashokkumar Karuppasamy]

Hi Manasee,

Based on the information provided, we're currently facing difficulties in fully understanding the issues you're encountering on your end. To assist you better, could you please provide more specific information about the problems you're facing? We suspect that the schedule date range toolbar is not visible in responsive and mobile modes, similar to the image shared below.

          Image 1                                                              image 2                                                    image 3

             

In scenarios where we've shared image1 and image2, we've observed that the width of the date range toolbar is not equal in some responsive and mobile modes. In such cases, since the date range toolbar is displayed on the menu link image 3.

Furthermore, if there is a possibility that we misunderstood your requirement, we would greatly appreciate it if you could provide us with further information about your scenario. This will help us align our understanding with your expectations and provide you with the best possible assistance.

Regards,
Ashok