Enhance the To Do App with conditional coloring

Moment.js is now in maintenance mode.
It is advised to use a different JavaScript date and time library instead, such as Luxon.



This article introduces a customization that can be applied to the To Do App that lies in the kintone Marketplace. The customization will affect the Record List of the To Do App in the following way:

  • The status field of records will contain bold red characters, if the the "Due date" has passed today's date.
  • The status field of records will contain blue characters if the "Due date" is within five days from today's date.
  • A dialog box will be displayed, to show the number of records that have passed their "Due date". 
  • Records that contain the logged-in user in the "Assigned to" field will be hi-lighted in orange.
  • Records that have a status of "Complete","Suspended" or "Canceled" will be ignored from the above conditions.

Create a To Do App from the kintone Marketplace, and proceed to the next steps to apply the customization to the App.

Sample Code

JavaScript Libraries

This customization will use the moment.js library that can be found in the kintone CDN. Specify the following URL in the JavaScript and CSS Customization Settings of the kintone App.

  • Moment.js

JavaScript file

Save the following code as a JavaScript file, and upload it to the JavaScript and CSS Customization Settings of the kintone App.



The Result

Add a number of records into the kintone App, with some "Due dates" set before today's date, and some "Due dates" set after today's date. Also add yourself and other users to the "Assigned to" (User selection) field. Navigate to the Record List page so that the script will run.


If successful, the code will style the fields in the Record List depending on the conditions of the "Due date" field and the "Assigned to" field, and a dialog box will show up if any due dates have passed.

Was this article helpful?
0 out of 0 found this helpful
Do you have any questions or issues related to this article?
Please share your views with us in the Community forums!