Question 212058 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to edit Allday box in Sync Fusion Schedular in React

I have a Schedule Component from @syncfusion/ej2-react-schedule

Now when I double click and get the pop up window with the editable table the All day box is ticked by default. How can I change so that it is not?
I played around with the fields attribute in eventStettings but it do not seem to work

Here is my code so far

    <ScheduleComponent
                    height='600px'
                    currentView='Month'
                    eventSettings={
                        {
                            fields: {
                                  subject: { title: 'Work', name: 'Subject', default: 'Type of work' },
                            description: { title: 'Comment', name: 'Description' },
                            startTime: { title: 'From', name: 'StartTime' },
                            endTime: { title: 'To', name: 'EndTime' },
// HERE IS WHERE I THOUGHT I BE ABLE TO CHANGE THE DEFAULT OF THE BOX BEING TICKED IN OR NOT
                            isAllDay: { name: 'isAllDay', default: false, title: 'All Day', validation: {} }
                        }
                    }
                }
            >
                <ViewsDirective>
                    <ViewDirective option='Day' startHour='05:00' endHour='22:00'></ViewDirective>
                    <ViewDirective option='Week' />
                    <ViewDirective option='Month' />
                </ViewsDirective>
                <Inject
                    services={[Month, Week, Resize, Day, DragAndDrop,]}
                />
            </ScheduleComponent>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I finally found the answer with the spannedEventPlacement set to'TimeSlot', And also founf out its not available in the month view, so it didnt really help me, but at least I stopped looking.


  2. 0

    In the month view, the popup opened for the entire day by default, hence the allday check option was initially selected. You can uncheck this by using the popupOpen event, as shown in the below shared snippet.

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

    Api: https://ej2.syncfusion.com/react/documentation/api/schedule/#popupopen

    [index.js]

     const onPopupOpen = (args) => {

   if(args.type == "Editor") {

    document.querySelector("#IsAllDay").ej2_instances[0].checked = false;

    var timeIcon = document.querySelectorAll(".e-time-icon");

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

      if(timeIcon[i].classList.contains('e-icon-disable')){

        timeIcon[i].classList.remove('e-icon-disable');

      }

    }

    var timeZone = document.querySelector(".e-time-zone-container.e-disable");

    if(timeZone.classList.contains('e-disable')) {  

      timeZone.classList.remove('e-disable');        

    }

   }

};



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

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

    <div className='control-wrapper'>

      <ScheduleComponent popupOpen={onPopupOpen}> </ScheduleComponent>

    </div>

  </div>

</div>);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search