Onclick cellEvent should save the event and avoid popup

[MP]

Hello Gurus, 

When I click on cell, I don't want popup to open, instead I would like to save the event for 1 hr 

return (<div className='schedule-control-section'>

<div className='col-lg-12 control-section'>

<div className='control-wrapper'>

<ScheduleComponent

ref={scheduleObj}

endHour='23:00'

startHour='9:00'

cssClass='group-editing'

width='100%' height='650px'

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

eventSettings={{ dataSource: data, fields: { } }}

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

<ResourcesDirective>

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

allowMultiple={true} dataSource={resourceData} textField='Text' idField='Id' colorField='Color'/>

</ResourcesDirective>

<ViewsDirective>

<ViewDirective option='Day'/>

</ViewsDirective>

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

</ScheduleComponent>

</div>

[Ashokkumar Karuppasamy]

Hi Manasee,

You can achieve your requirement by using the schedule's cellClick event and addEvent method. However, when the event start time and end time are obtained from clicked cells, you need to set a default subject for the event. The attached code snippet and sample below demonstrate the solution. Let us know if you need any further assistance.

Sample: https://stackblitz.com/edit/schedule-oncell-click-utztfl?file=index.js,datasource.json

const Views = () => {

  const scheduleObj = useRef(null);

  const data = extend([], dataSource.zooEventsData, null, true);

  let count = 0;

  const [currentView, setCurrentView] = useState("Week");

  const onEventRendered = (args) => {

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

  };

 

  const onCellClick = (args) => {

    args.cancel = true;

    count = count + 1

    let eventData = {

      Subject: "event-" + count,

      StartTime: args.startTime,

      EndTime: args.endTime,

      IsAllDay: args.isAllDay

    };

    scheduleObj.current.addEvent(eventData);

  }

  return (<div className='schedule-control-section'>

    <div className='col-lg-9 control-section'>

      <div className='control-wrapper'>

        <ScheduleComponent cellClick={onCellClick} width='100%' height='650px' ref={scheduleObj} selectedDate={new Date(2021, 1, 15)} eventSettings={{ dataSource: data }} eventRendered={onEventRendered} currentView={currentView}>

 

Regards,
Ashok

[MP]

Thanks Ashok for the quick reply. 

I was able to get it working however I noticed few things that is not working on my side and also wanted to know how can I accomplish 

Not working: 

1) When I reseize, the event selection disappeared. 

2) How do I get conferenceId --> Is that the groupIndex ? 

Would like to do 

1) When I click on the event, I would like to disable the edit option, I only want delete and cancel button

2) I would like the data coming from database OR in the case datasource.json to be readonly.

3) In the attachment, I see a CSS issue on the right side of the event, there is a gap, how can I fix that ( attached )

4) Is there an example to load datasource.json from the DB ? 

[MP]

/**

* schedule resources group-editing sample

*/

const GroupEditing = () => {

const [eventLog, setEventLog] = useState('');

const scheduleObj = useRef(null);

const data = extend([], dataSource.resourceConferenceData, null, true);

const resourceData = [

{ Text: 'ABC', Id: 1, Color: '#1aaa55' },

{ Text: 'XYZ', Id: 2, Color: '#357cd2' },

{ Text: 'AJD', Id: 3, Color: '#7fa900' },

{ Text: 'UDJ', Id: 4, Color: '#357cd2' },

{ Text: 'XIS', Id: 5, Color: '#7fa900' },

{ Text: 'OED', Id: 6, Color: '#7fa900' },

{ Text: 'AOX', Id: 7, Color: '#357cd2' },

{ Text: 'IQWW', Id: 8, Color: '#7fa900' },

];

const getEmployeeName = (value) => {

return ((value.resourceData) ? value.resourceData[value.resource.textField] : value.resourceName);

};

const onCellClick = (args) => {

var today = new Date(args.startTime);

const endTime = today.setHours(today.getHours() + 1);

let Data = [{

"Id": 14, // randomID

"StartTimezone":"America/Chicago",

"EndTimezone":"America/Chicago",

"Subject": "Web Summit123",

"StartTime": args.startTime,

"EndTime": new Date(endTime),

"ConferenceId": [

args.groupIndex+1

]

}]

args.cancel = true;

scheduleObj.current.addEvent(Data);

};

return (<div className='schedule-control-section'>

<div className='col-lg-12 control-section'>

<div className='control-wrapper'>

<ScheduleComponent

ref={scheduleObj}

cellClick={onCellClick.bind(this)}

// created={onCreate}

endHour='23:00'

startHour='9:00'

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

cssClass='group-editing'

width='100%' height='650px'

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

eventSettings={{ dataSource: data, fields: { } }}

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

<ResourcesDirective>

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

allowMultiple={true} dataSource={resourceData} textField='Text' idField='Id' colorField='Color'/>

</ResourcesDirective>

<ViewsDirective>

<ViewDirective option='Day'/>

</ViewsDirective>

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

</ScheduleComponent>

</div>

</div>

</div>);

};

export default GroupEditing;

[Ashokkumar Karuppasamy]

Hi Manasee Punjani,

We have created a separate forum for this query. Please follow the below forum for further details.

https://www.syncfusion.com/forums/187124/when-i-reseize-the-event-selection-disappeared-from-187056

Regards,

Ashok