This plug-in creates an alternative to the standard Kintone calendar view, with the ability to view schedules as event blocks instead of single-line events. It also adds timezone support, color differentiation support, and the ability to easily edit or reschedule by dragging-and-dropping.
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 visualize how busy or free a schedule is.
Drag to edit
Changing the duration of an event is simple by dragging the bottom edge of a time block.
The time block can also be dragged to a different day or time slot for rescheduling.
This plug-in supports multiple time zones. The event will correctly display in each participant's time zone.
An event can be created in any timezone by selecting the desired timezone from the drop-down field at the top of the custom view and clicking on the desired time slot.
If the date and time of an event is being specified by a combination of Date fields, Time fields, and a Drop-down field for the timezone, an event can be created for any timezone from the record create page as well.
All-day and multi-day support
Checking the All-day checkbox will indicate that an event lasts all day. This is perfect for events like birthdays and anniversaries.
If multiple days are entered when creating an event, the event will visually span all of the selected 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 hex color codes (e.g., #003399) or one of the 140 specified HTML color names (e.g., blue). Each event can be set individually.
If a Radio Button field or Drop-down field is selected as the field to determine the background color of events, an additional setting will appear in the plug-in settings screen. The available options of the Radio Button field or Drop-down field will be shown, and a background color can be assigned to each value
Downloading the plug-in
Download the latest version of the Calendar plug-in (v2.2.0):
|12 November 2019||ver. 2.2.0||
|03 September 2019||ver. 2.1.0||
|27 May 2019||ver. 2.0.0||
Installing the plug-in
To install a plug-in, the plug-in file must first be imported into the Kintone subdomain through the Kintone Administration settings. After it has been added to the subdomain, the plug-in can be installed into any App.
For more information, see the Adding a plug-in page of the Kintone Help Center.
Creating the calendar form
The Calendar plug-in can take a number of different set-ups, using combinations of Date and time fields, Date fields, Time fields, and a Drop-down field to specify the timezone. These form fields are mapped to the plug-in functions in the Calendar plug-in settings. Select the correct field from the drop-down list. The field label is the field code of the field in the form. The field type is shown in [square brackets].
Specifying the Start Datetime setting and End Datetime setting as Date and time fields is the quickest, simplest set-up. Once a Date and time field is selected in the Start Datetime setting, the End Datetime setting will be required. The plug-in settings are shown below.
|Date and time||Event start datetime|
|Date and time||Event end datetime|
All-day event only set-up
Specifying only the Start Date setting as a Date field and optionally filling in the End Date setting as a Date field in the plug-in settings will create a set-up where all events are automatically considered All-day events. The plug-in settings are shown below.
This set up is best viewed in either the Month sub-view or the List Week sub-view.
|Date||Event start date|
Timezone support set-up
If the End Date setting is filled in, additional settings will appear in the plug-in settings. Adding a Time field to the Start Time setting will prompt the End Time and Timezone settings to be required. Filling in these settings will create a set-up that accounts for event duration and events in different timezones. The plug-in settings are shown below.
|Date||Event start date|
Event end date
Note: An asterisk to denote this setting is required will not appear, but if this setting is not filled in, the following settings will not appear.
|Time||Event start time|
|Time||Event end time|
Note: When the settings are saved, the drop-down field is automatically populated with the available timezone values
|Checkbox||If checked, indicates the event lasts all day|
|Text or Drop-down||Sets the background color for an event. Valid values are HTML color codes (e.g., #003399) or common color names (e.g., blue)|
Important! After configuring and saving the plug-in settings, return to the App Settings and click Update App. If Update App is not clicked, changes will not be reflected in the live App.
Configuring the plug-in
The Calendar plug-in will need to be used with a custom view. A new view can be created, or an existing custom view can be edited to work with the plug-in.
Create a new view
There is a link inside of the plug-in settings screen that allows a new custom view to be created with the necessary configurations for the plug-in.
Clicking the link will bring up the following settings.
Use an existing custom view
An existing custom view can also be used with this plug-in. Edit the existing custom view and add the following code to the HTML field:
The following can also be used:
<div id="calendar" />
To specify a default sub-view, use the attribute data-default-agenda and assign it one of the following values:
The default sub-view is Week.
For example, to specify an existing custom view to display the Calendar plug-in with the Month sub-view, the settings would be as follows:
- If the custom view is not displaying correctly, return to the App settings and make sure that the Update App button has been clicked.
- Refer to the colors listed in the MDN web docs for the color names that can be assigned to the background color of an event. Colors can also be set with their HTML hex color code.