Cant change cell style depending of extra fields of the event.

[Emiliano]

Hi there.

I am having some problems with changing the cells of the Schedule.

I dont want hours. I only want to know full days. So i am using the timelines Month, Timeline.Month and Timeline.Year. I need to select several days and do some action (i allready have a ticket because in Timeline.Year cant select several cells, but that's another story). i am doing this by using ContextMenu when i right click some cell.

I only want one event per day, with some extra fields, to calculate some info to change the cell appearance.

Something like this:

But my problem is to use the Schedule with URLAdaptor, get the records from url and personalize the cell of the day, by checking the extra data in the event for that day.

I only need to change the background color or put an image in the cell, to inform the user which days have data. I don't need the "little square with the event" or the "plus 1" when exists several events.

I am allready using URL Adaptor and the ScheduleEventData class for the events, and i am using the DataBinding event to put in a global javascript variable the list of events. And then in the CellTemplate i perform a check in the global variable if the day is present. but is not working very well. The Cell Template executes before the DataBinding so when i have data for setember, i need to change views or go front and back in the same month to get to show the data because the first time CellTemplate run it didn't had the data recovered in DataBingind. I tryed the EventRendered, but it does not get executed then the rows height are small and shows the "+1 event".

So my list of problems is this:

The EventRendered only shows if the little square can fit in the cell. If the cell height is small the cell will show "+1 events" and it will not triger the EventRendered event. this event have access to the event day and cell. Its a very good candidate to my needs.

The CellTemplate does not have access to the events. I need to have access to the events in that day to personalize the cell info.

The RenderCell cant access the events of the cell. And it's called before the URL Adaptor returns the Data.

If you could help me to have some sample which could show the days which have data from the events, coming from the database and not some fixed data from javascript code it would be awesome.

Thanks

[Emiliano]

After many attempts, with a lot of trial and error, finally i reached a point where i am satisfied with the result.

With the help of this https://www.syncfusion.com/forums/154728/rendercell-and-databinding

Here's the code where i only use the event .DataBinding("DataBinding") to get the data from the server and go through all the "day" cells and do whatever i want.

    function DataBinding(args) {

        console.log('DataBinding');

        let cellEle = document.querySelectorAll('.e-work-cells');

        for (var i = 0; i < cellEle.length; i++) {

            let date = new Date(parseInt(cellEle[i].getAttribute("data-date")));

            if (args.result?.find(x => x.StartTime.getFullYear() == date.getFullYear() && x.StartTime.getMonth() == date.getMonth() && x.StartTime.getDate() == date.getDate()) != null) {

                cellEle[i].insertAdjacentHTML('beforeend', "<i class='fa fa-check' style='font-size: x-large; color: green;'></i>");

            }

        }

    }

CSS to hide the events elements which i don't need, and it was this part which made my working solution:

<style>

    .e-schedule .e-timeline-view .e-appointment,

    .e-schedule .e-timeline-view .e-appointment-wrapper,

    .e-schedule .e-timeline-month-view .e-appointment,

    .e-schedule .e-timeline-month-view .e-appointment-wrapper,

    .e-schedule .e-month-view .e-appointment,

    .e-schedule .e-month-view .e-appointment-wrapper,

    .e-schedule .e-timeline-year-view .e-event-table .e-appointment,

    .e-schedule .e-timeline-year-view .e-event-table .e-appointment-wrapper {

        visibility: hidden;

    }

</style>

The results are precisely the images i had created before!

Now i just need this request to be implement, that allow to select several cells at the same time in TimelineYear view.

[Vinitha Devi Murugan]

Hi Emiliano, 

 

Thanks for your update. 

 

We are happy that you found solution at your end. 

 

We have validated your query “Now i just need this request to be implement, that allow to select several cells at the same time in TimelineYear view” at our end and let you know that we have plan to include “select multiple cells in timeline year view ” feature on our upcoming Volume 4, 2021 release which is expected to be rolled out on the end of December, 2021 , and would appreciate your patience until then.  

 

https://www.syncfusion.com/feedback/27009/unable-to-select-multiple-cells-in-timeline-year-view 

 

Regards, 

Vinitha 

[Vengatesh Maniraj]

Hi Marios,

We are glad to announce that our Essential Studio 2021 Volume 4 Release v19.4.0.38 is rolled out and is available for download under the following link.

https://www.syncfusion.com/forums/171304/essential-studio-2021-volume-4-main-release-v19-4-0-38-is-available-for-download

In this release, we have provided keyboard accessibility support to timeline year view. So we suggest upgrading your package version to the latest to avail of these changes.

Release Notes: https://ej2.syncfusion.com/vue/documentation/release-notes/19.4.38/?type=all#schedule

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Regards,

Vengatesh