This is a migrated thread and some comments may be shown as answers.

Add highlighting to date header

6 Answers 52 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Nithin
Top achievements
Rank 1
Nithin asked on 02 Jul 2018, 07:23 AM
In our application we need to highlight some special days such as holidays. I was able to provide a red circle to the date but it appears in all date is it possible to provide a conditional function inside the scheduler (angularjs code is preferred).

Reference Example

6 Answers, 1 is accepted

Sort by
0
Accepted
Dimitar
Telerik team
answered on 03 Jul 2018, 03:51 PM
Hello Nithin,

The Kendo UI Scheduler has built-in support for a date-header-template directive. A conditional statement to check the date could be added through the special hash syntax as follows:
<div k-date-header-template>
  # if (true) { #
    <span class='k-link k-nav-day circle'>#=kendo.toString(date, 'dd/M')#</span>
  # } #       
</div>

The template automatically receives the date as metadata that can be accessed with data.date and then be used to apply the required condition for displaying the custom markup. Additional information on the topic can be found in the Templates Overview Documentation.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Nithin
Top achievements
Rank 1
answered on 16 Jul 2018, 07:29 AM

Hi Dimitar,

As you mentioned earlier I did implement it but when i tried to give ng-if  to the template it is not taking the angularjs directive.
I'm suppose to highlight a special set of days in the date header. Is there any other way to implement this in angularjs?
Special Days Example

0
Nithin
Top achievements
Rank 1
answered on 16 Jul 2018, 07:36 AM
$scope.specialDates=[
      {"From": "19-07-2018", "To": "22-07-2018", "Color": "Red","description":"Red Day Special"},
      {"From": "23-07-2018", "To": "25-07-2018", "Color": "Green","description":"Green Day Special"}
    ];
 
//header template in views Property
dateHeaderTemplate: angular.element("#dateHeader").html()
 
//$scope.specialDates
<div id="dateHeader" k-date-header-template ng-hide=true>
  <span>#=kendo.toString(date, 'MMM yyyy')#</span><br>
  <span>#=kendo.toString(date, 'dd (ddd)')#</span>
</div>
0
Accepted
Dimitar
Telerik team
answered on 17 Jul 2018, 08:47 AM
Hi Nithin,

I have investigated the described issue and I can confirm that there is an issue with the k-date-header-template, which is not correctly linked to the AngularJS $scope. I have logged this as a bug in the Kendo UI GitHub repository. You can start tracking the progress that we make on it from item #4385.

As a token of gratitude for helping us discover this issue, I have also updated your Telerik Points accordingly. 

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Nithin
Top achievements
Rank 1
answered on 20 Aug 2018, 01:34 PM

Hi Dimitar,
I had gone through the link but wasn't able to figure out if it was resolved or not.

Has the issue been resolved?

0
Accepted
Dimitar
Telerik team
answered on 20 Aug 2018, 02:13 PM
Hi Nithin, 

The issue has not yet been resolved. I would suggest to subscribe to the GitHub item, so that you are able to track its status. In this way, when the issue is closed, which means that it is fixed, you will get notified about the change.

Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
General Discussions
Asked by
Nithin
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Nithin
Top achievements
Rank 1
Share this question
or