Is there a way to change what is displayed when I click on a calendar item?
Current Situation
I am working on a "weekly task list" app using a calendar view with the Kintone Calendar Plugin. I can enter a record with a title, a dropdown with a station, and the employee assigned, with the date and time information in a field group.
When I click on the record in the calendar view, the popup only displays the title, background color, and start/end date/times.
Can I configure the popup so that it displays the dropdown information from the record and/or a text field (from the record) with extra details instead of clicking "open the record detail?"
Hello @AndrewLulis
If you’re using the native plugin, you can only edit the settings available within it.
One option is to, I guess, edit the plugin’s file/script, but please note that if you do this, you won’t be able to contact support for help, as the plugin will have been modified.
Another approach is to create a calendar view and write a custom script that suits your requirements. I’ve created a simple example script for your reference. In this script, a popup window will appear upon clicking on events, displaying specified fields, which you can adjust as needed.
(function() {
'use strict';
let currentPopup = null;
// Function to close the current popup if it exists
function closeCurrentPopup() {
if (currentPopup) {
document.body.removeChild(currentPopup);
currentPopup = null;
}
}
// Function to handle the creation of the popup
function createPopup(eventElement, recordId, title, userSelection) {
closeCurrentPopup(); // Close any existing popup before opening a new one
const popup = document.createElement('div');
popup.style.position = 'absolute';
// Get the event element's position and size
const rect = eventElement.getBoundingClientRect();
// Set the popup's position relative to the event element
popup.style.top = `${rect.bottom + window.scrollY}px`;
popup.style.left = `${rect.left + window.scrollX}px`;
popup.style.backgroundColor = 'white';
popup.style.border = '1px solid #ccc';
popup.style.padding = '20px';
popup.style.zIndex = '1000';
popup.style.width = '300px'; // Set a fixed width for the popup
const closeButton = document.createElement('button');
closeButton.textContent = 'Close';
closeButton.style.backgroundColor = '#4CAF50'; // Set the button color to green
closeButton.style.color = 'white';
closeButton.style.border = 'none';
closeButton.style.padding = '10px';
closeButton.style.cursor = 'pointer';
closeButton.onclick = function() {
closeCurrentPopup();
};
const titleElement = document.createElement('p');
titleElement.textContent = 'Title: ' + title;
const userSelectionElement = document.createElement('p');
userSelectionElement.textContent = 'User Selection: ' + userSelection;
const link = document.createElement('a');
link.href = `/k/${kintone.app.getId()}/show#record=${recordId}`;
link.textContent = 'Event Details';
link.target = '_blank';
popup.appendChild(titleElement);
popup.appendChild(userSelectionElement);
popup.appendChild(link);
popup.appendChild(document.createElement('br')); // Line break before the button
popup.appendChild(closeButton);
document.body.appendChild(popup);
currentPopup = popup;
}
// Event listener for calendar view
kintone.events.on('app.record.index.show', function(event) {
const calendarView = document.querySelector('.calendar-gaia');
if (!calendarView) return;
const calendarLinks = calendarView.querySelectorAll('a[href*="show#record="]');
calendarLinks.forEach(link => {
link.addEventListener('click', function(event) {
event.preventDefault();
const recordId = this.href.split('record=')[1].split('&')[0];
const clickedElement = this;
kintone.api(kintone.api.url('/k/v1/record.json', true), 'GET', {
app: kintone.app.getId(),
id: recordId
}).then(function(response) {
const record = response.record;
const title = record['Title'].value || 'No Title'; // Use a default value if the title is empty
const userSelection = record['User_selection'].value.map(user => user.name).join(', ');
createPopup(clickedElement, recordId, title, userSelection);
});
});
});
// Attach an event listener to close the popup when changing months
const monthNavButtons = document.querySelectorAll('.calendar-header-gaia .calendar-month-gaia');
monthNavButtons.forEach(button => {
button.addEventListener('click', closeCurrentPopup);
});
});
// Event listener to close popup on document click (outside of popup)
document.addEventListener('click', function(event) {
if (currentPopup && !currentPopup.contains(event.target)) {
closeCurrentPopup();
}
});
})();
While it isn't exactly what I was looking for, it's another solution to my problem of displaying information quickly with few clicks. I will keep playing around with the code reference until I've got it where I want it.
