Marking Holidays but not block them

[Stephan Schrade]

Hi support,

what is the best way to mark holidays on the schedule but not block the day(s) to create an event on that day?

I can import the holidays of my country via ics file and I want to have a visible mark of the days 

First possible solution:

Put a little line on top of the day cell to mark the days of the holiday.

I managed to get this to work in manipulating the styles with eventRendered, but if I have another event on the same day I can't put the holiday event on top of the other event. It seems that if a cell contains several events, they are sorted by their id. So I would end up in having the line blow the other event :-(

(see attached screenshot, where holidays are marked with a red line but are sometimes below other events)

Second solution:

Put another background color to the days of the holiday.

I have tried several ways with eventRendered and renderCell, but it did not work.

I think that this can not work anyway, because the event is stretched over couple of days (and cells) and I have no access to the parentElement.

Can you please help me or give me a hint?

Regards,

Stephan

Attachment: holidays_marker.png_b0760e6e.zip

[Vinitha Devi Murugan]

Hi Stephan,

Syncfusion Greetings

We achieved your requirement by making use of renderCell event of our scheduler. We have prepared a sample below for your reference. 

sample: https://stackblitz.com/edit/holiday-sample-jogshc?file=index.ts

UG Link: https://ej2.syncfusion.com/documentation/schedule/header-bar/#date-header-customization

.weather-text {

    float: right;

    margin: -20px 2px 0 0;

    background: #EA7A57;

    }

  renderCell: (args) => {

    if (args.elementType === 'workCells') {

      let ele: Element = document.createElement('div');

      let text = getWeather(args.date);

      if (text) {

        ele.innerHTML = text;

        (args.element).appendChild(ele.firstChild);

      }

    }

  }

let getWeather: Function = (value: Date) => {

  let holidayCollection = [new Date(2019, 0, 8), new Date(2019, 2, 9), new Date(2019, 6, 9)];

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

    if ((value.getTime() - holidayCollection[i].getTime()) == 0) {

      return '<div class="weather-text">Holiday</div>';

    }

  }

  return null;

};

Kindly try the above sample and get back to us if you need any further assistance.

Regards,

M.Vinitha devi

[Stephan Schrade]

Hi support,

many thanks for your quick reply.

This looks good on the layout.

But how can I set the holiday collection?

I easily get the holiday dates as an ics file and can import these into the schedule.

So the best way is to work with the events which are already in the schedule.

I can give these events a resource called "holidays", so they can be identified. 

If there would be a possibility determine the order of the events within the day I could change the backend so that the holiday events will be the first in the response array.

Then I could use my solution with eventRendered to display the holiday events as a small line.

Regards,

Stephan

[Ravikumar Venkatesan]

Hi Stephan, 

Thanks for the update. 

Q1: If there would be a possibility to determine the order of the events within the day I could change the backend so that the holiday events will be the first in the response array. 

The schedule events are rendered on the start time value and we have handled the events rendering in our source end. So, we are not able to order the events by changing the order of the events in the data source. 

Q2: I could use my solution with eventRendered to display the holiday events as a small line. 

Based on your query we have rendered the holiday event as the small line with the help of the below code in the eventRendered event. 

[index.ts] 

  eventRendered: (args) => { 

    if(args.data.IsHolidayEvent === true) { 

      args.element.style.height = "8px"; 

    } 

  } 

Sample: https://stackblitz.com/edit/holiday-sample-u9h1ky?file=index.ts 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan