カレンダーアップグレードプラグイン
プラグインの概要
「kintone標準カレンダーじゃ物足りない…」「もっと直感的に操作したい！」そんな悩みを持っている方にピッタリなのがこれ！
カレンダーのドラッグ＆ドロップ操作や色分け設定で、よりスマートに予定を管理できるようになります。週の開始曜日や休日の設定も自在だから、仕事のスケジュール管理もお手の物！日々の予定管理を格上げしてみては？
このプラグインでできること
表示切り替えは 「月」「週」「日」
日本の祝日は 自動更新
ドラッグ&ドロップで 予定変更
休日設定は 曜日単位で
これらすべての機能がプラグイン設定で制御可能です。祝日の関係ない業種であれば祝日は非表示、週単位での管理が多ければデフォルトビューを週表示に。カレンダー上でのドラッグドロップも不要であれば禁止にできます。
カレンダー上から 予定登録
登録も編集も 画面遷移なし
カレンダー上から 予定削除
カレンダー上で 一部項目変更可
このプラグイン一番の便利機能は「画面遷移なしでレコード登録、レコード修正」ができること。ポップアップで開いた詳細画面でそのままレコード編集や登録が出来ちゃいます。だから、レコード詳細開いて一覧に戻ってて、、そんなマラソン、もはや不要です！
設定方法
【事前確認】
まず最初に、利用予定のアプリに下記フィールドが存在しているか確認してください。
・日時フィールド2個
・文字列フィールド1個（計算やルックアップを除く純粋なもの）
カレンダーのプラグインなので、開始日時、終了日時、タイトルの指定が必須になるためです。
【事前設定】
アプリの一覧設定より、カスタマイズビューを一つ作成してください。一覧名はなんでも良いです。
カスタマイズビューのHTML欄に下記を貼り付けて保存します。
<div id=”calendar”></div>
このとき、絞り込み条件を設定しても構いません。
例えば人事部用のカレンダーだったらユーザーフィールドを事前に人事部に絞り込んで用意しておくなど、あらかじめカレンダーをいくつか準備しておくと便利です。
■必須設定
カレンダーの初期表示ビュー
カレンダービューを開いた時にどの表示スタイルにするかの設定です。
ドラッグ&ドロップ
カレンダー上でドラッグ&ドロップによる予定移動や変更を許可するかの設定です。
■任意設定
休日設定
ここでチェックした曜日の背景が赤になります。「祝日を休日にするにチェックを入れると、祝日を自動で取得し、祝日名を表示して背景を赤にします。
週の開始曜日
月および週表示での週の始まりを設定します。
表示開始時刻
週および日表示での一番早い時間の表示設定です。これより前の予定は表示されません。
■必須マッピング
それぞれのフィールドを指定してください。指定したフィールドに基づいて、予定が表示されます。カレンダー上から予定を簡易登録する際も、これらのフィールドへ登録します。「カレンダー表示タイトル」については文字列計算フィールドをおすすめします。[“予定カテゴリ”+”予定名”]のように連結しておくとカレンダーが見やすくなります。
■カラー設定
初めて設定する時は「ユーザーを読み込む」ボタンを押してユーザーを取得してください。ここで設定した色がカレンダーに反映されます。「デフォルトカラーを割り振る」ボタンでは表示中のユーザーに一括で割り振ることが出来ますが、12個まで。それ以上ユーザーがいる場合は個別に設定してください。なお、設定するとなっているユーザーのみ、設定が保存されカレンダーに反映されます。
2024.11.6アップデート
カラー設定をユーザー選択以外でも設定できるようになりました。ドロップダウン、ラジオボタンが対象です。
ここで指定したフィールドはカレンダー上の右クリックで変更可能です。
おまけ
カレンダーをポータルページにも表示させたいという声もありましたので、おまけ的に方法を記しておきます。
やることはシンプルですが、ポータル画面のカスタマイズ、つまりkintone全体に影響を与えることになるので、慎重にご活用ください。
すでに他のカスタマイズをポータルに施している場合は競合する可能性があります。その場合は、、、諦めてください。笑
通常はお知らせエリアがある位置にカレンダーが挿入されます。
下記コードのここにカスタマイズビューのURLの部分を表示させたいカレンダーの一覧URLに変更し、jsファイルで保存してください。
ファイルができたら下記にアップロードして保存してください。
kintoneシステム管理→JavaScript / CSSでカスタマイズ→PC用のJavaScriptファイル
初期値が閉じた状態のコード
(function() {
'use strict';
// ポータルが表示されたときに実行するイベント
kintone.events.on('portal.show', function() {
// ブロックのコンテナ要素を作成
const customBlock = document.createElement('div');
customBlock.id = 'custom-block';
customBlock.style.marginBottom = '20px';
customBlock.style.padding = '10px';
customBlock.style.border = '1px solid #ccc';
customBlock.style.backgroundColor = '#f9f9f9';
// タイトル部分（開閉用のボタンを含む）を作成
const titleBar = document.createElement('div');
titleBar.style.display = 'flex';
titleBar.style.justifyContent = 'space-between';
titleBar.style.alignItems = 'center';
titleBar.style.cursor = 'pointer';
const titleText = document.createElement('span');
titleText.innerText = 'カレンダービュー'; // 任意のタイトルを設定
titleBar.appendChild(titleText);
const toggleButton = document.createElement('button');
toggleButton.innerText = 'カレンダーを開く'; // 初期は「開く」
toggleButton.style.padding = '5px 10px';
toggleButton.style.border = 'none';
toggleButton.style.borderRadius = '4px';
toggleButton.style.backgroundColor = '#007bff';
toggleButton.style.color = '#ffffff';
toggleButton.style.fontSize = '14px';
toggleButton.style.cursor = 'pointer';
toggleButton.style.transition = 'background-color 0.3s';
// ボタンのホバー時のスタイル
toggleButton.addEventListener('mouseover', function() {
toggleButton.style.backgroundColor = '#0056b3';
});
toggleButton.addEventListener('mouseout', function() {
toggleButton.style.backgroundColor = '#007bff';
});
titleBar.appendChild(toggleButton);
// iframeのコンテナを作成
const iframeContainer = document.createElement('div');
iframeContainer.style.marginTop = '10px';
iframeContainer.style.display = 'none'; // 初期状態で非表示にする
// iframeの設定
const iframe = document.createElement('iframe');
iframe.src = 'ここにカスタマイズビューのURL'; // 指定されたURLを設定
iframe.width = '100%';
iframe.height = '900px';
iframe.style.border = 'none';
// iframeをiframeコンテナに追加
iframeContainer.appendChild(iframe);
// タイトル部分とiframeコンテナをブロックに追加
customBlock.appendChild(titleBar);
customBlock.appendChild(iframeContainer);
// タイトルバーのクリックイベントを設定（開閉切り替え）
titleBar.addEventListener('click', function() {
if (iframeContainer.style.display === 'none') {
iframeContainer.style.display = 'block';
toggleButton.innerText = 'カレンダーを閉じる';
} else {
iframeContainer.style.display = 'none';
toggleButton.innerText = 'カレンダーを開く';
}
});
// ポータルの左カラムのメインコンテナを取得
const portalBodyLeft = document.querySelector('.ocean-portal-body-left');
// 左カラムが存在する場合、そこにブロックを追加
if (portalBodyLeft) {
portalBodyLeft.insertBefore(customBlock, portalBodyLeft.firstChild);
} else {
console.warn("ポータルの左カラムが見つかりませんでした。");
}
});
})();
初期値が開いた状態のコード
(function() {
'use strict';
// ポータルが表示されたときに実行するイベント
kintone.events.on('portal.show', function() {
// ブロックのコンテナ要素を作成
const customBlock = document.createElement('div');
customBlock.id = 'custom-block';
customBlock.style.marginBottom = '20px';
customBlock.style.padding = '10px';
customBlock.style.border = '1px solid #ccc';
customBlock.style.backgroundColor = '#f9f9f9';
// タイトル部分（開閉用のボタンを含む）を作成
const titleBar = document.createElement('div');
titleBar.style.display = 'flex';
titleBar.style.justifyContent = 'space-between';
titleBar.style.alignItems = 'center';
titleBar.style.cursor = 'pointer';
const titleText = document.createElement('span');
titleText.innerText = 'カレンダービュー'; // 任意のタイトルを設定
titleBar.appendChild(titleText);
const toggleButton = document.createElement('button');
toggleButton.innerText = 'カレンダーを閉じる'; // 初期は「閉じる」
toggleButton.style.padding = '5px 10px';
toggleButton.style.border = 'none';
toggleButton.style.borderRadius = '4px';
toggleButton.style.backgroundColor = '#007bff';
toggleButton.style.color = '#ffffff';
toggleButton.style.fontSize = '14px';
toggleButton.style.cursor = 'pointer';
toggleButton.style.transition = 'background-color 0.3s';
// ボタンのホバー時のスタイル
toggleButton.addEventListener('mouseover', function() {
toggleButton.style.backgroundColor = '#0056b3';
});
toggleButton.addEventListener('mouseout', function() {
toggleButton.style.backgroundColor = '#007bff';
});
titleBar.appendChild(toggleButton);
// iframeのコンテナを作成
const iframeContainer = document.createElement('div');
iframeContainer.style.marginTop = '10px';
iframeContainer.style.display = 'block'; // 初期状態で表示する
// iframeの設定
const iframe = document.createElement('iframe');
iframe.src = 'ここにカスタマイズビューのURL'; // 指定されたURLを設定
iframe.width = '100%';
iframe.height = '900px';
iframe.style.border = 'none';
// iframeをiframeコンテナに追加
iframeContainer.appendChild(iframe);
// タイトル部分とiframeコンテナをブロックに追加
customBlock.appendChild(titleBar);
customBlock.appendChild(iframeContainer);
// タイトルバーのクリックイベントを設定（開閉切り替え）
titleBar.addEventListener('click', function() {
if (iframeContainer.style.display === 'none') {
iframeContainer.style.display = 'block';
toggleButton.innerText = 'カレンダーを閉じる';
} else {
iframeContainer.style.display = 'none';
toggleButton.innerText = 'カレンダーを開く';
}
});
// ポータルの左カラムのメインコンテナを取得
const portalBodyLeft = document.querySelector('.ocean-portal-body-left');
// 左カラムが存在する場合、そこにブロックを追加
if (portalBodyLeft) {
portalBodyLeft.insertBefore(customBlock, portalBodyLeft.firstChild);
} else {
console.warn("ポータルの左カラムが見つかりませんでした。");
}
});
})();