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.
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.
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.
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.
Downloading the plug-in
Download the latest version of the Calendar plug-in:
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:
|Date and time||Event start time|
|Date and time||Event end time|
|Checkbox||If checked, indicates the event lasts all day|
|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
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:
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 &). 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.