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 NameCar Details-
From&To(Time and Date) TitleRemarks
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 Statusfield a Drop-down field with the field code set tobookingStatus? -
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.
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.
Then, copy the View ID from the 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.