Calendar Plug-in


Adding this plug-in to your kintone app allows you to view your schedule as event blocks, instead of single-line events. It also adds time-zone support, color support, and easy drag-and-drop editing and rescheduling.


Block view

The normal kintone calendar view displays events as a single line. 


The Calendar plug-in displays events as time blocks. This makes it easier to see how busy your day is.


Drag to edit

This plug in allows you to easily change the duration of your event by dragging the edge of the time block.


You can also drag the time block to a different day.


Time-zone support

This plug-in supports multiple time zones. Your event will correctly display in each participant's time zone.


All-day and multi-day support

By checking the All-day checkbox, you can indicate that your event lasts all day. This is perfect for events like birthdays and anniversaries.

If you select multiple days when creating an event, your event will visually span those days.

All-day and multi-day events are displayed at the top of the calendar.


Event colors

The optional background color field can be used to change the color of an event. This is helpful in color-coding events by priority, type, or location. The color can be set using HTML color codes (e.g., #003399) or common color names (e.g., blue). Each event can be set individually.event-colors.png

Downloading the plug-in

Download the latest version of the Calendar plug-in:

Kintone Calendar

Installing the plug-in

To install a plug-in, first import it into your kintone domain. Then add the plug-in to your app.

For more information, see: Adding a plug-in

Creating the calendar form

The Calendar plug-in requires that you have the following fields in your calendar form. You can label the fields whatever you'd like:

Required fields

Field type Description
 Text  Event title
 Date and time  Event start time
 Date and time  Event end time
 Checkbox  If checked, indicates the event lasts all day


Optional fields

Field type Description
 Text Sets the background color for an event. Valid values are HTML color codes (e.g., #003399) or common color names (e.g., blue)

Configuring the plug-in

Custom view

You will need to use a custom view with the Calendar plug-in. You can either create a new view, or update an existing view.

Create a new view

When configuring the calendar plug-in for the first time, you are prompted to create a new view by clicking the link. This will create a new custom view for you that is already configured to work with the plug-in.


Use an existing view

You can also use an existing view with this plug-in. Edit the existing view and add the following code to the HTML field:

<div id="calendar"></div>

You can also use:

<div id="calendar" />


Mapping form fields

In the Calendar plug-in settings, you can map the form fields to the plug-in functions. Select the correct field from the drop-down list. The field label is the field code you chose when setting up the form. The field type is shown in [square brackets].


Important! After configuring the plug-in and saving it, you must return to the app settings and click Update App. Otherwise, you will not see the changes you just made.


  • In the calendar view, if you create an event that includes special HTML characters like apostrophes ('), ampersands (&), or angle brackets (<>), those characters will be replaced by their HTML equivalent (e.g., an ampersand (&) becomes &amp;). As a workaround, click the event and edit it. Ampersands added this way will display correctly. 
  • If you are not seeing the new calendar view, make sure you have gone back into the app settings and clicked Update App.
  • All-day events last from midnight of the previous day to midnight of the current day. If you change your event to an all-day event (by checking the All day checkbox), it will automatically change your start and end times.
  • While common color names (like "orange") are supported as background colors, rare color names (like "pumpkin") are not. If you are not able to set the background color that you want, try setting it using HTML color codes instead.
Was this article helpful?
1 out of 1 found this helpful
Do you have any questions or issues related to this article?
Please share your views with us in the Community forums!