Issue with Calendar itemFormatter property

Issue with Calendar itemFormatter property

Posted by: eh1160 on 16 April 2020, 9:56 am EST

• 

  eh1160

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 16 April 2020, 9:56 am EST

  I found an issue with the Calendar’s itemFormatter property. When using the property to style a single date, it is incorrectly applying that style to the same td cell position in every month.

  See this jsFiddle for details:
  
  https://jsfiddle.net/eh1160/f5got8ad/

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 17 April 2020, 12:48 am EST

  Hi Eric,

  When you change the month in the Calendar, it uses the previous elements and just updates the dates on previous td element. So, in itemFormatter, you can explicitly set the background of the cell element as yellow and since, for each month, the Calendar uses the same elements, so this style is copied over to the next month.
  
  So, to resolve this issue, simply set the background color of the cell to the default value in the itemFormatter:

  const givenDay = moment(date);
        const today = moment();
  
        // reset the styling of Wijmo's td.wj-day-today cell
        if (givenDay.isSame(today, 'day')) {
          element.style.backgroundColor = 'yellow';
        }
        else {
        	element.style.backgroundColor = 'inherit';
        }
  

  Refer to the updated sample:

  https://jsfiddle.net/149p6aeb/1/

  Regards,
  
  Ashwin

• 

  eh1160

  • Post Options:
  • Link
    Copy

  Posted 17 April 2020, 9:38 am EST

  Thank you…that fix works!

  The approach seems a little unintuitive, though. If I am explicitly styling a specific date, I shouldn’t need to unapply that styling from any other cells. You might want to provide this feedback to the development team.