Calendar Plug-in

Introduction

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.

Features

Block view

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

 

calendar_view_normal.png

 

The Calendar plug-in displays events as time blocks. This makes it easier to visualize how busy or free a schedule is.

 

block_display_example.png

Drag to edit

Changing the duration of an event is simple by dragging the bottom edge of a time block.

 

block_display_drag_example.png

 

The time block can also be dragged to a different day or time slot for rescheduling.

 

block_display_move_example.png

Time-zone support

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

 

timezone_us.pngtimezone_jp.png

 

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.

 

create_schedule.gif

 

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.

 record_create_timezone.gif

 

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.

 

multiday_events.png

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 hex color codes (e.g., #003399) or one of the 140 specified HTML color names (e.g., blue). Each event can be set individually.

 

multicolor_events.png

Downloading the plug-in

Packaged plug-in

Download the latest version of the Calendar plug-in (v0.1.1):

Kintone Calendar plug-in.zip (v0.1.1)

Updates

Date Update Notes
27 May 2019 ver. 0.1.1
  •  Major update. Refer to the Plug-in update: Calendar Plug-in article in the What's New section for details.

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].

Quick set-up

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.

 

datetime_settings.png

Required fields

Field type Description
Text Event title
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.

 

single_date_field_settings.png

 

This set up is best viewed in either the Month sub-view or the List Week sub-view.

 

single_date_field_monthsubview.pngsingle_date_field_listweeksubview.png

Required fields

Field type Description
Text Event title
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.

 

calendarplugin_settings.gif

Required fields

Field type Description
Text Event title
Date Event start date
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
Drop-down

Timezone

Note: When the settings are saved, the drop-down field is automatically populated with the available timezone values

Optional fields

Field type Description
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.

 

activation_customview_settings.png

 

Clicking the link will bring up the following settings.

 

customview_creation.gif

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:

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

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:

Sub-view Value
Week agendaWeek
Month month
List week listWeek

 

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:

 

existing_view_settings.png

Notes

  • 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.
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!