Event template design

[Nikola Škeva]

In the pdf file, I provided an image of my schedule and I want the event to start at the middle of the cell of the day that it starts and to end in the middle of the cell of the day that the event ends. This way when events are ending and starting in the same day, they don't overlap and create a new row like in the picture below.

Attachment: png2pdf_(2)_c6b30811.7z

[Vijay Ravi]

Hi Nikola, 

The appointment is rendered based on the start time and end time of the event, which corresponds to the start and end times of the cells. Therefore, the display is determined by these timings, and it's not possible to override the width. As a result, providing a workaround for this is not feasible.

Additionally, You can restrict the users to create and update more than one appointment on specific time slots. Also, you can disable the CRUD action on those time slots if it is already occupied, which can be achieved using Scheduler’s public method isSlotAvailable.

isSlotAvailable UG: https://ej2.syncfusion.com/react/documentation/schedule/appointments#restricting-event-creation-on-specific-time-slots

isSlotAvailable api: https://ej2.syncfusion.com/react/documentation/api/schedule#isslotavailable

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay

[Nikola Škeva]

Ok, I have another question. In the image i sent "noedit.png" how can I make some text aligned on the left and other on the right of the event in the timeline like in the picture "edit.png".

Also I have an issue with the "all day option" when creating an event". I want all events that are created even "all day" events to be set at 12pm start time and 12pm end time without me having to edit it in the popup editor.

Attachment: files_7cf920f1.rar

[Vijay Ravi]

Hi Nikola, 
 

Query 1: Ok, I have another question. In the image i sent "noedit.png" how can I make some text aligned on the left and other on the right of the event in the timeline like in the picture "edit.png".

We suggest you use the Schedule eventTemplate to customize the text alignment using the display: flex style to achieve your requirement. Refer the below shared sample for your reference.

[index.js]

const TimelineGrouping = () => {

    const instance = new Internationalization();

    const getTimeString = (value) => {

      return instance.formatDate(value, { skeleton: 'hm' });

    }

    const eventTemplate = (props) => {

        return (

          <div className="template-wrap" style={{display: "flex"}}>

            <div className="subject">{props.Subject}</div>

            <div className="time">

              Time: {getTimeString(props.StartTime)} - {getTimeString(props.EndTime)}

            </div>

          </div>

        );

      }

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

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

                <div className='control-wrapper'>

                    <ScheduleComponent eventSettings={{ dataSource: data, template: eventTemplate }} group={{ resources: ['Categories'] }} popupClose={onPopupOpen}>

                    </ScheduleComponent>

                </div>

            </div>

        </div>);

};

export default TimelineGrouping;

Query 2: Also I have an issue with the "all day option" when creating an event". I want all events that are created even "all day" events to be set at 12pm start time and 12pm end time without me having to edit it in the popup editor.

We suggest you to bind the popupClose event to programmatically set the startTime and endTime while creating events with IsAllDay checked as shown in the below shared code snippet. Refer the shared sample for your reference.

[index.js]
 

const onPopupOpen = (args) => {

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

          const eventDetails = args.data;

          if (eventDetails.IsAllDay) {

            const startTime = new Date(eventDetails.StartTime);

            const endTime = new Date(eventDetails.EndTime);

            startTime.setHours(12, 0, 0);

            endTime.setHours(12, 0, 0);

            eventDetails.StartTime = startTime;

            eventDetails.EndTime = endTime;

          }

        }

}
 

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

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

                <div className='control-wrapper'>

                    <ScheduleComponent  popupClose={onPopupOpen}>

                    </ScheduleComponent>

                </div>

            </div>

        </div>);

Sample link: https://stackblitz.com/edit/react-rcjuea-s7eust?file=index.js,datasource.json,index.css

Regards,

Vijay

[Nikola Škeva]

Hello,

in your sample the issuse with the setting the time  to 12pm is that if I choose for the end date 1/16 and set it to all day. when I save the event it will be saved as 1/17 12PM. I provided a video below.

Attachment: video_2ee40a27.rar

[Vijay Ravi]

Hi Nikola, 

We have modified our last shared code, we're subtracting one day from the end date using the setDate method and the getDate method. The getDate method returns the day of the month (from 1 to 31) for the specified date, and the setDate method sets the day of the month for a specified date according to local time. By passing endTime.getDate() - 1 to the setDate method, we're setting the day of the month to one day before the current day of the month as shown in the below shared code snippet. Refer the shared sample and video demo for your reference.

[index.js]
 

const onPopupOpen = (args) => {

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

            const eventDetails = args.data;

            if (eventDetails && eventDetails.hasOwnProperty('IsAllDay') && eventDetails.IsAllDay) {

                const startTime = new Date(eventDetails.StartTime);

                const endTime = new Date(eventDetails.EndTime);

                startTime.setHours(12, 0, 0);

                endTime.setDate(endTime.getDate() - 1);

                endTime.setHours(12, 0, 0);

                eventDetails.StartTime = startTime;

                eventDetails.EndTime = endTime;

            }

        }

    }

Sample link: https://stackblitz.com/edit/react-rcjuea-tbeaaq?file=index.js

Regards,

Vijay

Attachment: video_demo_for_setting_time_programmatically_7413d14a.zip

[Nikola Škeva]

Can you make it as a class component.

[Vijay Ravi]

Hi Nikola, 
 

Based on your requirements, we have prepared a React Scheduler sample using class components, as requested. Please refer to the shared sample and code snippets provided below for your reference. Kindly try it out.

[index.js]

export class TimelineGrouping extends SampleBase {    

    instance = new Internationalization();
 

    getTimeString = (value) => {

        return this.instance.formatDate(value, { skeleton: 'hm' });

    }

    

    eventTemplate = (props) => {

        return (

          <div className="template-wrap" style={{display: "flex"}}>

            <div className="subject">{props.Subject}</div>

            <div className="time">

              Time: {this.getTimeString(props.StartTime)} - {this.getTimeString(props.EndTime)}

            </div>

          </div>

        );

    }

    onPopupClose = (args) => {

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

          const eventDetails = args.data;

          if (eventDetails && eventDetails.hasOwnProperty('IsAllDay') && eventDetails.IsAllDay) {

            const startTime = new Date(eventDetails.StartTime);

            const endTime = new Date(eventDetails.EndTime);

            startTime.setHours(12, 0, 0);

            endTime.setDate(endTime.getDate() - 1);

            endTime.setHours(12, 0, 0);

            eventDetails.StartTime = startTime;

            eventDetails.EndTime = endTime;

          }

        }

      }

    render() {

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

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

                    <div className='control-wrapper'>

                        <ScheduleComponent eventSettings={{ dataSource: this.data, template: this.eventTemplate }}  popupClose={this.onPopupClose}>               

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

                        </ScheduleComponent>

                    </div>

                </div>

            </div>);

    }

}

const root = createRoot(document.getElementById('sample'));

root.render(<TimelineGrouping />);

Sample link: https://stackblitz.com/edit/react-gipqdz-zxsiyd?file=index.js,datasource.json,index.css

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay

[Nikola Škeva]

Can you fix it for quick info created events also.
How can I make the resource column change its width accordingly to the content of it. 

From my original question about the events split in one cell can you make the cells in the Timelinemonth for each day be in two parts like its for hours in the examples you provided. Then if its possible can I create events to one half and from it.

Can you make a counter of days from the period selected inside the Editor.

[Swathi Ravi]

Hi Nikola,

Can you fix it for quick info created events also?

In the provided sample the quickinfo created event also working fine.

How can I make the resource column change its width according to the content of it?

Currently, we don't have the support for changing resource column width according to its content in Syncfusion Scheduler recurrence rule.

From my original question about the events split in one cell, can you make the cells in the Timeline month for each day be in two parts like it's for hours in the examples you provided. Then if its possible can I create events to one half and from it.

You can achieve this by setting the view interval to one month (e.g., 30 or 31 days) in the TimelineDay and customizing the timescale.

Sample: https://stackblitz.com/edit/react-gipqdz-ia9fqx?file=index.js,index.css

UG: 

TimeScale - https://ej2.syncfusion.com/react/documentation/schedule/timescale

View interval - https://ej2.syncfusion.com/react/documentation/schedule/views#extending-view-intervals

Regards,

Swathi

[Nikola Škeva]

Thank you timescale fixes my issuse, can you just make the start day and end day lines thicker or bolded so I can 

differentiate it from the half day.

Also can you make a counter of days from the period selected inside the Editor.

And how can I make a popup/alert to confirm changes made by resize and draganddrop. (To prevent accidental changes)

[Vijay Ravi]

Hi Nikola, 
 

Query 1: Thank you timescale fixes my issuse, can you just make the start day and end day lines thicker or bolded so I can differentiate it from the half day.

Based on your requirement you can override the default schedule style to highlight the half day as shown in the below shared styles.

[index.css]
 

 

.e-schedule .e-timeline-view .e-resource-group-cells, 

.e-schedule .e-timeline-month-view .e-resource-group-cells,

.e-schedule .e-timeline-view .e-work-cells {

    border-right-width: 2px;

    border-style: solid;

}

Query 2: Also can you make a counter of days from the period selected inside the Editor.

We suggest you to bind the popupOpen event to render the text box component to the default editor to count days based on startTime and endTime as shown in the below shared code snippet.

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

[index.js]
 

popupOpen = (args) => {

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

          if (!args.element.querySelector('.custom-field-row')) {

            let row = createElement('div', { className: 'custom-field-row' });

            let formElement = args.element.querySelector('.e-schedule-form');

            formElement.firstChild.insertBefore(row, formElement.firstChild.firstChild);

            let container = createElement('div', { className: 'custom-field-container' });

            let inputEle = createElement('input', {

              className: 'e-field', attrs: { name: 'EventType' }

            });

            container.appendChild(inputEle);

            row.appendChild(container);

            // Calculate the difference in days between startTime and endTime

            let startTimeInput = formElement.querySelectorAll('input[name="StartTime"]');

            let endTimeInput = formElement.querySelectorAll('input[name="EndTime"]');

            let startTime = new Date(startTimeInput[0].value);

            let endTime = new Date(endTimeInput[0].value);

            let timeDiff = Math.abs(endTime.getTime() - startTime.getTime());

            let diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));

            let textBox = new TextBox({

              value: `Duration: ${diffDays} day(s)`,

              floatLabelType: 'Always', placeholder: 'Counter Days'

            });

            textBox.appendTo(inputEle);

            inputEle.setAttribute('name', 'EventType');

            // Get the instances of the date pickers

            let startTimePicker = startTimeInput[0].ej2_instances[0];

            let endTimePicker = endTimeInput[0].ej2_instances[0];

            // Add event listeners to startTime and endTime input elements

            startTimePicker.change = updateDuration;

            endTimePicker.change = updateDuration;

            function updateDuration() {

              startTime = new Date(startTimePicker.value);

              endTime = new Date(endTimePicker.value);

              timeDiff = Math.abs(endTime.getTime() - startTime.getTime());

              diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));

              textBox.value = `Duration: ${diffDays} day(s)`;

              textBox.dataBind(); // Update the TextBox value

            }

          }

        }

      }

Query 3: And how can I make a popup/alert to confirm changes made by resize and draganddrop. (To prevent accidental changes)

We suggest you to bind the resizeStop event dragStop event to show the alert window or you can open your customized popup. Refer the api and sample for your reference.

resizeStop = (args) => {

        alert("resized the event");

        // you can open your customize popup

      }

 

      dragStop = (args) => {

        alert("drag and dropped the event");

        // you can open your customize popup

      }

<ScheduleComponent  resizeStop={this.resizeStop} dragStop={this.dragStop}>

</ScheduleComponent>

resizeStop event: https://ej2.syncfusion.com/react/documentation/api/schedule/#resizestop

dragStop event: https://ej2.syncfusion.com/react/documentation/api/schedule/#dragstop

Sample link: Iqi9cl (forked) - StackBlitz

Regards,

Vijay