Microsoft has changed calculated fields to block the execution of custom markup. That means calculated fields that contain any unsupported markup will not display correctly.

This change went into effect on June 13, 2017. Administrators can request an extension through September 10, 2017 at the latest. During this extension, execution of custom markup in calculated fields will not be blocked. This request can be submitted through Microsoft Support. However, beginning September 10, 2017, all unsupported markup will be ignored. This change can be controlled in on-premise SharePoint 2013 and 2016 using CustomMarkupInCalculatedFieldDisabled setting.

Alternatives 

SharePoint Framework Field Customizer 

  • To extend the SharePoint user experience within modern pages and list/document libraries
  • Provides modified views to data for fields within a list/library
  • more powerful and can write custom code
  • End users need developer help to deploy the solution
  • For more advanced scenarios that column formatting does not support
  • Not supported in classic experience

Column Formatting 

  • To customize how fields in SharePoint list/library is displayed
  • No change in data; only changes how it is displayed to the users who browse the list/library
  • Anyone who can manage list/library views in a list can use column formatting
  • JSON based scehma
  • Reusable as site column

Supported Column Types 

The following column types support column formatting:

  • Single line of text
  • Number
  • Choice
  • Person or Group
  • Yes/No
  • Hyperlink
  • Picture
  • Date/Time
  • Lookup Title (in Lists)

The following are not currently supported:

  • Managed Metadata
  • Filename (in Document Libraries)
  • Calculated
  • Retention Label

Sample List with Column Formatting 

03082018SampleList

03082018ColumnFormatting

For more info click here