AngualrJS kendo-date-picker, how to color day cells.

1 Answer 65 Views

Date/Time Pickers

1 Answer, 1 is accepted

answered on 18 Sep 2023, 11:44 AM

Hello Clint,

In order to achieve the desired behavior, I would suggest configuring a template in the content option of the "month" view of the DatePicker component:

angular.module("MyModule", ["kendo.directives"])
       .controller("MyCtrl", function ($scope) {
            $scope.datePickerOptions = {
                value: new Date(),
        	month: {
         	     content: (data) => `<span class="${data.value == 9 ? 'color' : ''}">${data.value}</span>`
        	},
         };
})

As you can see from the above code snippet, I am setting the ".color" class for the span element conditionally, only for a specific date value (in this case "9").

After that, you could select the td parent element of the corresponding span from the template, using the CSS :has() pseudo-class selector, and set the desired background color for the table cell:

<style>
  .k-calendar-td:has(.color){
     background-color: red;
  }
</style>

Below you can find a small Dojo example with AngularJS, demonstrating the described approach:

https://dojo.telerik.com/eRuxiFUy

Let me know if this is what you are looking for.

Regards,
Zornitsa
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Clint

commented on 31 Jan 2024, 06:12 PM

Apologies for the long delay in responding, but thank you for that.

Just need to work out a way of using a list of dates from a database procedure, which represents dates with different colours and apply that to the template via an AngularJS procedure within the controller.

Clint

commented on 31 Jan 2024, 06:24 PM | edited

I see that you can tie a colour background to a particular day value within a month, but how would you do that to a specific date (i.e. Make only the 10th of January red, but not the 10th of February, for example)?

Thanks again for your suggestion.

Neli

commented on 05 Feb 2024, 11:29 AM

Hi Clint,

You can access the full Date() obejct through data.date. Then you can use javaScript methods such as getMonth() and getFullYear() to customize the appearance only of the needed dates. Below is an example:

 month: {
            content: (data) => `<span class="${(data.date.getDate() == 9 && data.date.getMonth() == 2 && data.date.getFullYear() == 2024) ? 'color' : ''}">${data.value}</span>`
          },

Here is the modified Dojo example: - https://dojo.telerik.com/@NeliKondova/EHiDiZOl

Regards,

Neli

Clint

commented on 05 Feb 2024, 03:41 PM

Thanks for that tip Neli. Didn't know about that data.date property, so that will be handy rather than trying to use the data.title, which is something I was experimenting with. Cheers.

Clint

commented on 08 Feb 2024, 06:41 PM

Neli help, I am stuck on trying to call a function with your example.

Where you have:

content: (data) => `<span class="${data.value == 9 ? 'color' : ''}">${data.value}</span>`

I would like to call a controller function so I can use more complex logic to determine the CSS background colour. I was thinking of doing something like this:

                   $scope.datePickerOptions = {
                       month: {
                           content: (data) => `<span class="${ $scope.dateBackground(data) }">${ data.value }</span>"`
                       },
                   };

                   $scope.dateBackground = function (data) {

                       var test = data.date;

                       return "colorRed";
                   }

Where I am calling the function $scope.dateBackground, each time the day cell is rendered, however I can't get the syntax correct in the options code.

How can I call a function within the content template, please?

Clint

commented on 08 Feb 2024, 07:07 PM | edited

This is as far as I could get:

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS example</title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.7.0/default/default-ocean-blue.css">
    <script src="https://kendo.cdn.telerik.com/2023.2.829/js/jquery.min.js"></script>
    
    <script src="https://kendo.cdn.telerik.com/2023.2.829/js/angular.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2023.2.829/js/kendo.all.min.js"></script>
    
</head>
<body>
<div id="example" ng-app="MyModule">
    <div ng-controller="MyCtrl">
       <input kendo-date-picker k-options="datePickerOptions"/>
    </div>
</div>

<script>
    angular.module("MyModule", ["kendo.directives"])
        .controller("MyCtrl", function ($scope) {
            $scope.datePickerOptions = {
                value: new Date(),
        				month: {
         					content: (data) => {{dateBackground(data)}}
        			},
            };
      
      
      		 $scope.dateBackground = function(data) {
             return "<span class='color'>" + data.value + "</span>";
           }
        })
</script>

<style>
  .k-calendar-td:has(.color){
    background-color: red;
  }
</style>

</body>
</html>

but when I try that, I get this error:

result:7 Uncaught ReferenceError: dateBackground is not defined
    at content (result:7:36)
    at _e (kendo.all.js:322401:19)
    at content (kendo.all.js:322401:19)
    at ee (kendo.all.js:322401:19)
    at Object.content (kendo.all.js:322401:19)
    at init.navigate (kendo.all.js:322401:19)
    at init.setOptions (kendo.all.js:322401:19)
    at N._setOptions (kendo.all.js:322401:19)
    at N._calendar (kendo.all.js:322401:19)
    at N.open (kendo.all.js:322401:19)

So I'm not sure what to do here. Is what I am doing possible?

Clint

commented on 08 Feb 2024, 07:49 PM | edited

Also after checking our current version of Kendo, I find that we are using:

2016.3.914+Official

Which was installed with Bowser. So how would be update that if we need to, for any solution to work?

Clint

commented on 08 Feb 2024, 08:23 PM

Neli,

I think I may have found a solution that works. The code is below:

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS example</title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.7.0/default/default-ocean-blue.css">
    <script src="https://kendo.cdn.telerik.com/2023.2.829/js/jquery.min.js"></script>
    
    <script src="https://kendo.cdn.telerik.com/2023.2.829/js/angular.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2023.2.829/js/kendo.all.min.js"></script>
    
</head>
<body>
<div id="example" ng-app="MyModule">
    <div ng-controller="MyCtrl">
       <input kendo-date-picker k-options="datePickerOptions"/>
    </div>
</div>

<script>
    angular.module("MyModule", ["kendo.directives"])
        .controller("MyCtrl", function ($scope) {
     
           $scope.dateBackground = function(data) {
             return "<span class='color'>" + data.value + "</span>";
           }
      
            $scope.datePickerOptions = {
                value: new Date(),
        				month: {
         					content: (data) => `${$scope.dateBackground(data)}`
        			}
            };
      
        })
</script>

<style>
  .k-calendar-td:has(.color){
    background-color: red;
  }
</style>

</body>
</html>

It appears to work, as I get this result:

However, when I use this code as is in my project I get the error:

VM756:3 Uncaught ReferenceError: $scope is not defined
    at eval (eval at compile (kendo.all.min.js:25:7820), <anonymous>:3:284)
    at i (kendo.all.min.js:39:5493)
    at Object.content (kendo.all.min.js:39:19536)
    at init.navigate (kendo.all.min.js:39:11260)
    at init.setOptions (kendo.all.min.js:39:9887)
    at W._setOptions (kendo.all.min.js:39:24841)
    at W._calendar (kendo.all.min.js:39:24688)
    at W.open (kendo.all.min.js:39:25314)
    at W.toggle (kendo.all.min.js:39:25502)
    at init._click (kendo.all.min.js:39:29094)

While I don't get this error in the Dojo, I do in my Visual Studio project.

Is what I am doing legitimate?
Is there a better way to do this?
What could be causing the error in my local code?

Thanks.

Clint

commented on 08 Feb 2024, 08:59 PM

Another issue I am having is that when I try to use the original code as suggested by Zornitsa, I see the result with our current project like this:

Is this due to an out of date version of the Kendo library?

Neli

commented on 13 Feb 2024, 04:49 PM

Hi Clint,

Regarding the '$scope is not defined' usually such error appears when for example by the time a function is called (ex. $scope.myFunc()....), the angular scope is not yet available. However, the Dojo example seems correct and as the issue is not replicated in it I can not be sure why there is such an error on your side.

Regarding the rendered template, indeed the observed behavior could be due to using an old Kendo version. The approach suggested by Zornitsa is suitable when CSP templates are used. For versions prior to R1 2023 yuo can use the previous syntax as in the exmaple below:

$scope.datePickerOptions = {
                value: new Date(),
        		month: {  
                               content: "<span class='#= data.value == 9 ? 'color' : '' #'>#=data.value#</span>"
        		},
            };

I hope this helps.

Regards,

Neli

Clint

commented on 13 Feb 2024, 07:22 PM | edited

Hello Neil.

Thanks for your help this far. From your example:

$scope.datePickerOptions = {
                value: new Date(),
        		month: {  
                               content: "<span class='#= data.value == 9 ? 'color' : '' #'>#=data.value#</span>"
        		},
            };

Is it possible for the code in the content line to call an AngularJS controller function?

I would like to run some logic over a backend call of dates and colours to work out which one I need to show.

Thanks again.,

Clint

commented on 15 Feb 2024, 08:10 PM | edited

Is there a way to re-render/re-draw the date picker control, please?

I've been asked to dynamically change the background colours when an on-click event is fired, but I am not sure how to re-render the kendo date picker control.

Neli

commented on 16 Feb 2024, 02:47 PM

Hi Clint,

If you need to change the styles for every date that has been selected, you can add a custom class in the change event handler:

 change: function(e){
            $('.k-selected').addClass('custom')
},

If you need to change the style of the currently selected cell you can use the .k-calendar .k-calendar-td.k-selected .k-link selector:

 .custom, .k-calendar .k-calendar-td.k-selected .k-link{
        background-color: green;
      }

Here is the modified Dojo - https://dojo.telerik.com/@NeliK/IhUyomat.

Regards,

Neli

Clint

commented on 16 Feb 2024, 08:38 PM | edited

Thanks for the update Neil. However, I need to be able to redraw/rerender the date picker control from an AngualrJS controller function.

The issue is that we are using a Google map, which has pins. When a pin is clicked, we have a click listener on the google.maps.Marker objects.

When this click event is fired I have a back-end call to get a list of dates and CCS colour codes from an endpoint that is calling a database-stored procedure, and at that point, I have to apply them to the date picker background colours.

Is this possible? If so how? Thanks again.

Neli

commented on 21 Feb 2024, 09:30 AM

Hi Clint,

I am afraid i could not suggest a possible approach to redraw the DatePicker. The DatePicker API does not provide a refresh() method.

If you think that such a method will be a valuable addition to the suite i would suggest logging a feature request in our official Feedback Portal:

- https://feedback.telerik.com/kendo-jquery-ui/

Regards,

Neli

Clint

commented on 22 Feb 2024, 04:15 PM

Thanks, Neli for the response.

Not sure if this is correct, however, I found with experimentation, that if I put an ng-if statement on the surrounding DIV tag, that is holding the date picker control, then set it to false (hidden) then true (visible), this readds the date picker to the DOM and the column template function fires.

Thanks again for your help in this issue, appreciate it.

Neli

commented on 27 Feb 2024, 09:45 AM

Hi Clint,

As far as I understand you have managed to achieve the desired result.

Thank you very much for sharing your approach with the community.

Regards,

Neli

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

AngualrJS kendo-date-picker, how to color day cells.

1 Answer, 1 is accepted