Kintone Calendar does not display after applying JavaScript customization

Here is my code on javascript:

Then I attached it on kintone, and the calendar has no display:

Hello @Jayron_Rosel ,

Thank you for including screenshots in your post, but given it lacks key information, we cannot help you out. Please answer the following questions:

Your current situation

Are you using Kintone’s build-in Calendar view?

Or are you building a calendar functionality with a Custom view?

Your Code

Please include your code using Markdown code blocks

Your desired outcome

Aside from restoring your “Calendar view”, what is your goal with this customization?

What have you tried so far

Did you refer to any tutorial while building out this customization?

Error Messages

Did you get any error messages?
Have you checked your console.log()?

Hello @Genji ,

My current situation

I am using Calendar Plus Plug-in to generate the Calendar view.

  • Ver.14.0 Release (5 Jun. 2022)

My code

Using the Onload Event (desktop) - app.record.index.show event trigger.

Get Record List Field Elements - kintone.app.getFieldElements()

(function () {
  'use strict';
  kintone.events.on('app.record.index.show', function (event) {
    var elStatus = kintone.app.getFieldElements('bookingStatus');

    for (var i = 0; i < elStatus.length; i++) {
      var record = event.records[i];
      if (record.bookingStatus.value === 'Booking') {
        elStatus[i].style.color = 'red';
      } else if (record.bookingStatus.value === 'Booked') {
        elStatus[i].style.color = 'blue';
      } else if (record.bookingStatus.value === 'Arrived') {
        elStatus[i].style.color = 'green';
      }
    }
  });
})();

My desired outcome

I want to attach the following fields to the Calendar view:

  • Driver Name
  • Car Details
  • From & To (Time and Date)
  • Title
  • Remarks

Kintone App’s Fields

Desired Outcome for the Calendar View

What I’ve tried so far

Yes, I already searched about my problem but I did not find a tutorial pertaining to my situation.

Error Messages

After running a console.log() check, I got the following error:

index.js:123 Uncaught TypeError: Cannot read properties of null (reading 'length')

Thank you @Jayron_Rosel for answering my questions.

Including the code snippet and console.log() error message was especially helpful.

Uncaught TypeError: Cannot read properties of null (reading ‘length’) Error

Looking at the code, I think the problem is you are using kintone.app.getFieldElements() and the current view you are on does not include the field with the field code bookingStatus.

I made a quick post here with more details:

Calendar Plus Plug-in Support

Also, if you have trouble using the Calendar Plus Plug-in, you should contact the KDDI America team for support.

You are welcome to keep asking questions about building customizations!

However, we do not provide support for 3rd party Plug-ins.

Additional Questions

Please include the following information in your next post:

  • Is the Booking Status field a Drop-down field with the field code set to bookingStatus?

  • Please take a screenshot of your Calendar Plus Plug-in settings page.

  • Have you read the Conditional Formatting the Record List tutorial?

Hello @Genji

Is the Booking Status field a Drop-down field with the field code set to bookingStatus?

Yes, Booking Status is a Drop-down field with bookingStatus as the field code.

Uncaught TypeError: Cannot read properties of null (reading ‘length’) Error

I addressed the problem with i < elStatus.length; in my for loop.

Please take a screenshot of your Calendar Plus Plug-in settings page.

Following are screenshots of the Calendar Plus Plug-in settings page:

Have you read the Conditional Formatting the Record List tutorial?

Yes, I already read that tutorial.

Thank you @Jayron_Rosel ,

My bad; I saw your error message, glanced at the code, and went straight to the conclusion that you were not checking for null values.

In the future, be sure to list out the tutorials & documents you have used to build out your customization so that we can help you quicker.

Well, the code you used works on my end.
The code should work as long as the Booking Status Drop-down field is included in the List view.

Prevent Code from Running on Calendar Plus Plug-In’s Custom View

Maybe your Conditional Formatting the Record List code is conflicting with Calendar Plus Plug-in. Thus, the Calendar does not display.

To prevent your code from running on the Calendar Plus plug-in’s custom view, you can add the following code to the script:

const NoRunViewID = 12345; // Replace with the Calendar Plus Plug-in's Custom View ID
if (event.viewId === NoRunViewID) {
  console.log(`\nCurrently on the specified Custom View (View ID: ${NoRunViewID}).\nThis script will not run.\n`);
  return;
}

Example Code

(function () {
  'use strict';
  kintone.events.on('app.record.index.show', function (event) {
    const NoRunViewID = 12345; // Replace with the Calendar Plus Plug-in's Custom View ID
    if (event.viewId === NoRunViewID) {
      console.log(`\nCurrently on the specified Custom View (View ID: ${NoRunViewID}).\nThis script will not run.\n`);
      return;
    }
    var elStatus = kintone.app.getFieldElements('bookingStatus');
    console.log('elStatus: ', elStatus);

    for (var i = 0; i < elStatus.length; i++) {
      var record = event.records[i];
      console.log('record: ', record);

      if (record.bookingStatus.value === 'Booking') {
        elStatus[i].style.color = 'red';
      } else if (record.bookingStatus.value === 'Booked') {
        elStatus[i].style.color = 'blue';
      } else if (record.bookingStatus.value === 'Arrived') {
        elStatus[i].style.color = 'green';
      }
    }
  });
})();

To Obtain the View ID

Navigate to the Custom View by clicking on the blue drop-down list widget.

CleanShot 2022-10-12 at 19.38.15

Then, copy the View ID from the URL.

View_URL

If this does not work, please create a regular List view that includes the Booking Status Drop-down field and see if it works.

If you get an error message, please include that in your response.


Calendar Plus Plug-in Support

If your code does work on a regular List view, then your bug would be specific to the Calendar Plus Plug-in. I recommend reviewing their help guide and contacting their support team as needed.

Calendar Plus Plug-in for Kintone - Help Guide

Calendar Plus Support Team - Contact Us