Schedule event customization - from 187124

Question

4) From DB -- I need to try and will share the code.

/////////// Things I would like to do ////////////////

scheduler component
1) Disable past events
2) disable others events - readOnly
3) delete its own events
4) horizontal view & Vertical view for Resource 
5) pick your colors event - 
6) if its an all day event then entire day must be blocked

MP · Answer

Any update here, pls.

Ashokkumar Karuppasamy · Answer

Hi MP,

We have checked your shared requirements at our end. You can find the possible ways to achieve your shared requirements in the Scheduler below. Try the provided solutions and let us know if you need further assistance.

1) Disable past events

You can achieve your requirement by using the schedule popupOpen and eventClick. These features will allow you to meet your requirements.

const onEventClick = (args) => {

eventClick = true;

};

const onPopupOpen = (args) => {

if (eventClick) {

eventClick = false;

scheduleObj.current.eventSettings.allowEditing = !(

args.data.EndTime < selectDate

);

}

};

2) disable others events - readOnly

6) if its an all day event then entire day must be blocked

You can achieve your requirement by using the schedule dataBound event. If you utilize this event, you can specifically make the necessary changes to your appointments.

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

const dataBond = () => {

const appointments = scheduleObj.current.eventsData;

appointments.forEach((appointment) => {

if (appointment.IsAllDay) {

appointment.IsBlock = true;

isAllDayPresent = true;

} else {

appointment.IsReadonly = appointment.EndTime > selectDate;

}

});

if (isAllDayPresent) {

isAllDayPresent = false;

scheduleObj.current.refreshLayout();

}

};

3) delete its own events

You can achieve your requirement by setting the allowGroupEdit property to false. The attached code snippet and sample below demonstrate the solution. Please let us know if you need any further assistance.

Sample: https://stackblitz.com/edit/react-fptybz-psbvkt?file=index.js,datasource.json

<ScheduleComponent

ref={scheduleObj}

cssClass="group-editing"

width="100%"

endHour="23:00"

startHour="9:00"

height="650px"

selectedDate={new Date(2021, 5, 5)}

currentView="WorkWeek"

cellClick={onCellClick}

eventSettings={{

dataSource: data,

ignoreWhitespace: true,

allowEditing: false,

enableTooltip: true,

enableMaxHeight: true,

enableIndicator: false,

fields: {

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

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

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

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

},

}}

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

>

4) horizontal view & Vertical view for Resource

We have demonstrated a similar example in the demo and user guide links provided below.

Component:
https://ej2.syncfusion.com/react/demos/#/material3/schedule/resource-grouping
https://ej2.syncfusion.com/react/demos/#/material3/schedule/timeline-resource-grouping

UG:
https://ej2.syncfusion.com/react/documentation/schedule/resources
https://ej2.syncfusion.com/react/documentation/schedule/resources#vertical-resource-view
https://ej2.syncfusion.com/react/documentation/schedule/resources#timeline-resource-view

5) pick your colors event

You can achieve your requirement by using the schedule eventRendered event. By utilizing this event, you can customize the event color as needed.

Sample: https://stackblitz.com/edit/react-1bxkxn-7memj2?file=index.js

const onEventRendered = (args) => {

applyCategoryColor(args, scheduleObj.current?.currentView);

};

[helper.js]

function applyCategoryColor(args, currentView) {

var categoryColor = args.data.CategoryColor;

if (!args.element || !categoryColor) {

return;

}

if (currentView === 'Agenda') {

args.element.firstChild.style.borderLeftColor = categoryColor;

}

else {

args.element.style.backgroundColor = categoryColor;

}

[datasource.json]

[

{

"Id": 1,

"Subject": "Explosion of Betelgeuse Star",

"Location": "Space Center USA",

"StartTime": "2021-01-10T04:00:00.000Z",

"EndTime": "2021-01-10T05:30:00.000Z",

"CategoryColor": "#1aaa55"

},

{

"Id": 2,

"Subject": "Thule Air Crash Report",

"Location": "Newyork City",

"StartTime": "2021-01-11T06:30:00.000Z",

"EndTime": "2021-01-11T08:30:00.000Z",

"CategoryColor": "#357cd2"

}

Regards,
Ashok

MP · Answer

Thanks Ashok for the quick update. I will try all these by today.

MP · Answer

Ashok -- Delete is not working on your example either. 3) delete its own events

MP · Answer

so for delete, I tried this and its not working

    const onEventClick = (args) => {
      
      
      console.log('onEventClick', args)
      console.log('scheduleObj.current>> ' + scheduleObj.current)
      
       scheduleObj.current.deleteEvent(args.event.Id);
       // console.log(args.event.Id);
     }   

MP · Answer

following the example of here --> https://ej2.syncfusion.com/react/documentation/schedule/how-to/add-edit-and-remove-events

MP · Answer

tried with onPopupOpen and its not working. .. is there anything to do with customId that we have ?

MP · Answer

 const onPopupOpen = (args) => {
      console.log('onPopupOpen', args)
      if (args.type === 'DeleteAlert') {
       //console.log('here in delete')
      scheduleObj.current.deleteEvent(args.data);
      args.cancel = true;
      }
    // }

    }

MP · Answer

1) Disable past events 2) disable others events - readOnly I was able to make it work.

MP · Answer

6) if its an all day event then entire day must be blocked : It didn't work . const dataBond = () => { const appointments = scheduleObj.current.eventsData; console.log('appointments', appointments); appointments.forEach((appointment) => { console.log("appointment", appointment) if (appointment.reservationIsAllDay) { console.log('inside<<><><><') appointment.IsBlock = true; isAllDayPresent = true; } else { console.log('in else<<><><><') appointment.IsReadonly = appointment.EndTime > new Date(); } }); console.log('isAllDayPresent before', isAllDayPresent) // if (isAllDayPresent) { // isAllDayPresent = false; // scheduleObj.current.refreshLayout(); // } console.log('isAllDayPresent', isAllDayPresent) };

MP · Answer

Any update on delete and all day event

Ashokkumar Karuppasamy · Answer

Hi MP,

Q1)tried with onPopupOpen and its not working. .. is there anything to do
with customId that we have ? so for delete,  I tried this and its not working

Based on the details you've provided, we have created a sample, tested the
reported issue on our end, and unfortunately, we were unable to replicate the
problem you mentioned. We kindly request that you provide the following
details, as this information will greatly assist us in understanding and
resolving the issue effectively.
 Shared the all schedule related codes.
 When dealing with the scenario, you can
     delete events using the schedule delete function?
 Provide a video demonstration illustrating
     the issue or
 Replicate the issue in our shared sample.

6) if its an all day event then entire day must be blocked : It didn't work
.

You can achieve your requirement by utilizing the schedule's refreshLayout
method. Please try this solution, and let us know if you need any further
assistance.

sample: https://stackblitz.com/edit/react-rx9l53-pkgvvs?file=index.js

Regards,
Ashok

MP · Answer

Ashok to replicate Delete here is an example --> https://react-fptybz-psbvkt.stackblitz.io/

Steps - when you create events and delete in the sequence it was created, it works fine, however when you try to change the sequence of deletion it doesn't work.

For eg, Create event 1, 2, 3, 4, 5 and try deleting 4, 3 and 2 it will fail.

Pls let me know your thoughts.

MP · Answer

Any update here ?

MP · Answer

any update for Delete here? Also when I try to call API I get cors exception. If I'm using any other lib like reactQuery OR axios I'able to make a localhost api  const dataManagerReservataions = new DataManager({        url: 'http://my-ip-address/api/v1/reservation-by-resource',        crudUrl: 'http://my-ip-address/api/v1/reservation',        adaptor: new UrlAdaptor(),           crossDomain: true    });

Ashokkumar Karuppasamy · Answer

Hi MP,

You can use axios to call APIs and update data according to your needs. We have attached a sample axios code snippet below for your reference. Please try the solution and let us know if you need any further assistance.

Sample: Attached as Zip

import * as React from 'react';

import { useState, useEffect } from 'react';

import './App.css';

import axios from 'axios';

import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';

const App = () => {

const [data, setData] = useState(null);

const [loading, setLoading] = useState(true);

const [error, setError] = useState(null);

useEffect(() => {

const fetchData = async () => {

try {

const response = await axios.get('http://localhost:54738/Home/LoadData');

setData(response.data);

setLoading(false);

} catch (error) {

setError(error);

setLoading(false);

}

};

fetchData();

}, []);

if (loading) return <p>Loading...</p>;

if (error) return <p>Error: {error.message}</p>;

return (<ScheduleComponent eventSettings={{ dataSource: data }}>

</ScheduleComponent>);

};

export default App;

Regards,
Ashok

Attachment: reactscheduleaxiossample_8bf9bf47.zip

Loading...

; if (error) return

Error: {error.message}

; return ( ); }; export default App; Regards, AshokAttachment: reactscheduleaxiossample_8bf9bf47.zip

MP · Answer

Great. I will implement in few days.

MP · Answer

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 · Answer

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); } }; Pls help me out. THanks

Ashokkumar Karuppasamy · Answer

Hi MP,We have
created a separate follow-up ticket for this query, and it is currently being
worked on with higher priority. We will update you once it is complete. Please
follow the below ticket for further details and progress updates. Thank you for
your patience and understanding.

Forum: https://www.syncfusion.com/forums/187310/the-delete-event-is-not-working-in-the-scheduler-from-187137

Regards,
Ashok