We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Resource Grouping

Hello, wourld like to know if is possible to divide a column day in two columns , like in the picture.
Example:
On day 1 : Having two columns, one saying Day, and another one saying Night, and the same for the other days.
Must have the resources on the left side too.
Something like the last image(The days divided)(Grouping resources by date)

On the last image i couldnt replicate with the resources on the left side

Thanks,

Pe

 


6 Replies

PE Pedro April 12, 2023 05:44 PM UTC

Another question, is On the first image on day 3, the first resource, if it is possible to hide the Night event on the column of the day 4
Basically, it is possible to hide events on a day column if that event has start date on another date?
Thanks



SR Swathi Ravi Syncfusion Team April 14, 2023 05:55 PM UTC

Hi Pedro,


Sample: https://stackblitz.com/edit/react-mc34wc-6xgc8c?file=index.js


Hello, would like to know if is possible to divide a column day in two columns , like in the picture. On day 1 : Having two columns, one saying Day, and another one saying Night, and the same for the other days.


You can achieve your requirement by using the Schedule's timescale property, as shown in the below snippet.


Api: https://ej2.syncfusion.com/angular/documentation/api/schedule#timescale

https://ej2.syncfusion.com/angular/documentation/api/schedule/views/#timescale

https://ej2.syncfusion.com/angular/documentation/api/schedule/views/#interval


[index.js]

const timeScale = { enable:trueinterval: 1440slotCount: 2 };

function getDateHeaderText(value) {

    var skeleton = value.getDate() === 1 ? 'MMMd' : 'd';

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

}

function dateHeaderTemplate(props) {

  return (

      <div>

         <div>{getDateHeaderText(props.date)}</div>

      </div>

     );

 }    

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

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

                <div className='control-wrapper'>

                    <ScheduleComponent timeScale={timeScale}  dateHeaderTemplate={dateHeaderTemplate.bind(this)}>

                        <ViewsDirective>

                            <ViewDirective option='TimelineDay' timeScale={{enable: false }} interval={30}/>

                        </ViewsDirective>

                    </ScheduleComponent>

                </div>

            </div>

 </div>);



Basically, it is possible to hide events on a day column if that event has start date on another date?


You can achieve your requirement by using the Schedule’s eventRendered event, as shown in the below snippet.


Api: https://ej2.syncfusion.com/angular/documentation/api/schedule#eventrendered


[index.js]

function OnEventRendered(args) {

        var Start = args.data.StartTime;

        var End = args.data.EndTime;

        if(Start.getDate() != End.getDate())

        {

            args.element.style.width = '48px';

        }

    }

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

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

                <div className='control-wrapper'>

                    <ScheduleComponent eventRendered={OnEventRendered.bind(this)}></ScheduleComponent>

                </div>

            </div>

</div>);



Regards,

Swathi Ravi



PE Pedro April 14, 2023 06:30 PM UTC

Hello Swathi,

Thanks for the answer

Regarding for the first question, using timescale, i as wable to make it work using timelineWeek but not with timelineMonth, is is possible with the timelineMonth?

Thanks



PE Pedro April 14, 2023 06:31 PM UTC

Other thing, with your code of the first question is giving me the error TypeError: Cannot set properties of undefined (setting 'viewClass')



PE Pedro April 14, 2023 06:42 PM UTC

Hi again, were able to check in your sample correctly now, but if put timelineMonth doesnt work, and on timeline day is possible to get currentMonth lenght days ?
Thanks again



VR Vijay Ravi Syncfusion Team April 17, 2023 04:34 PM UTC

Hi Pedro,


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


You can achieve your requirement by using the TimelineDay views with intervals and timeScale options. Also we used  dateHeaderTemplate to customize the header and binding the navigating event to get the currentMonth days length to change the interval property in views during the date navigation.


Note

: Not possible to achieve these requirement in TimelineMonth View.


[app.component.ts]


function TimelineGrouping() {

    function dateHeaderTemplate(props) {

        return (

            <div>

                <div className="date">{getDateHeaderText(props.date)}</div>

                <div><span className="day">Day</span><span className="night">Night</span></div>

            </div>

        );

    }

    function onNavigating(args) {

        const { viewcurrentDate } = args;

        if (scheduleObj.currentView === 'TimelineDay') {

          const daysInMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 10).getDate();

          scheduleObj.views[0].interval = daysInMonth;

          scheduleObj.dataBind();

        }

      }

 

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

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

            <div className='control-wrapper'>

                <ScheduleComponent ref={(schedule=> scheduleObj = schedule} cssClass='timelineresource- dateHeaderTemplate={dateHeaderTemplate.bind(this)} 

navigating={onNavigating.bind(this)}

                >

                    <ViewsDirective>

                        <ViewDirective option='TimelineDay' timeScale={timeScale} interval={31}/>

                    </ViewsDirective>

 


Regards,

Vijay Ravi


Loader.
Up arrow icon