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

  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:51 am EST

  Hi Eric,

  We have replied to your query on the forum post below:

  https://www.grapecity.com/forums/wijmo/issue-with-calendar-itemfo

  For reference, we are copying the response here:

  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, 8:21 am EST

  OK, thanks. I’m not sure why it posted twice. I would delete this duplicate post, but I don’t think I have permissions.