カレンダーplusから更新フォームに画面遷移したときに計算もしたい

お世話になります。

プラグインの「カレンダーPlus」を利用して、空いている駐車場の予約を行いたい。
空き駐車場は可変でマスターからルックアップしており、日別表示(リリース別)を表示している。
以下のJSでうまく動作しませんので教えていただきたくお願いいたします。
やりたいことは以下の通りです。
******************
カレンダーplusで駐車区画(KUKAKUBANGO)の利用したい時間帯を
トレースした後、アプリ(駐車場予約)に画面遷移した時に自動入力された
時間の入庫日時(time1)から出庫日時(time2)までの時間(分)を計算し、
time99に自動表示し、利用30分当たり50円の利用料を計算して、
priceへ表示する。但し30分未満は30分へ繰り上げする。
・現在時刻よりも前の時間を指定するとエラー表示する。
・同一区画番号の時間重複不可
・最大12時間の予約とする。但し利用日の3日前に空きがあれば
24時間まで延長予約できる。
・保存ボタン押すと駐車場予約の一覧画面(空き状況)へ戻る

******************

(function( ){
‘use strict’;

const PRICE_PER_30MIN = 50;

const MAX_NORMAL = 12 * 60; // 12時間

const MAX_EXTEND = 24 * 60; // 24時間

const RETURN_VIEW_ID = ‘5951427’; // 一覧ID

/********************************

* 利用時間・料金計算

********************************/

function calculate(record) {

const startVal = record.time1.value;

const endVal   = record.time2.value;



if (!startVal || !endVal) {

  record.time99.value = null;

  record.price.value  = null;

  return;

}



const start = new Date(startVal);

const end   = new Date(endVal);

const now   = new Date();



// 現在時刻より前は禁止

if (start < now || end < now) {

  record.time1.error = '現在時刻より前の時間は指定できません。';

  record.time99.value = null;

  record.price.value  = null;

  return;

}

record.time1.error = null;



// 開始 >= 終了はエラー

if (start >= end) {

  record.time2.error = '出庫日時は入庫日時より後を指定してください。';

  record.time99.value = null;

  record.price.value  = null;

  return;

}

record.time2.error = null;



// 利用時間(分)

const diffMinutes = Math.ceil((end - start) / (1000 \* 60));



// 利用日までの日数

const daysDiff = Math.floor((start - now) / (1000 \* 60 \* 60 \* 24));



// 最大利用時間

const maxMinutes = (daysDiff <= 3) ? MAX_EXTEND : MAX_NORMAL;



if (diffMinutes > maxMinutes) {

  record.time2.error =

    (maxMinutes === MAX_EXTEND)

      ? '利用日の3日前からは最大24時間まで予約可能です。'

      : '最大12時間までしか予約できません。';

  record.time99.value = null;

  record.price.value  = null;

  return;

}



// 30分単位で切り上げ

const units = Math.ceil(diffMinutes / 30);

record.time99.value = units \* 30;

record.price.value  = units \* PRICE_PER_30MIN;

}

/********************************

* カレンダーPlus遷移直後

********************************/

kintone.events.on(‘app.record.create.show’, function (event) {

calculate(event.record);

return event;

});

/********************************

* 日時変更時も再計算

********************************/

kintone.events.on([

'app.record.create.change.time1',

'app.record.create.change.time2',

'app.record.edit.change.time1',

'app.record.edit.change.time2'

], function (event) {

calculate(event.record);

return event;

});

/********************************

* 同一区画番号の時間重複チェック

********************************/

kintone.events.on([

'app.record.create.submit',

'app.record.edit.submit'

], async function (event) {

const record = event.record;



const start = record.time1.value;

const end   = record.time2.value;

const place = record.KUKAKUBANGO.value;



const query =

  'KUKAKUBANGO = "' + place + '" ' +

  'and time1 < "' + end + '" ' +

  'and time2 > "' + start + '"';



const resp = await kintone.api(

  kintone.api.url('/k/v1/records', true),

  'GET',

  { app: kintone.app.getId(), query: query }

);



// 自分自身を除外

if (

  resp.records.length > 0 &&

  !(resp.records.length === 1 && resp.records\[0\].$id.value === record.$id.value)

) {

  event.error = '同一区画番号で予約時間が重複しています。';

}



return event;

});

/********************************

* 更新後に一覧ID=5951427へ遷移

********************************/

kintone.events.on(‘app.record.edit.submit.success’, function () {

location.href =

  '/k/' + kintone.app.getId() + '/?view=' + RETURN_VIEW_ID;

});

})();

カレンダーplusから更新フォームに画面遷移したときに計算もしたい

うまく動かない

具体的にどういう状況なのでしょうか、まずは問題の切り分けのためにエラーがでてるのか、でてるとしてどういうエラーなのか、など掘り下げて行く必要があるかとおもいます

まずは上記のようにConsoleにエラーがないかみて、
必要に応じてブレークポイントを貼って、どこまでうまくいってるのかをみていく、ということになるかとおもいます。

回答頂きありがとうございます。
なるほど、一度確認してみます。デバッグのやり方も知識不足でして大変助かります。

こんにちは。アスノートの松田正太郎です。横から失礼します。
(カレンダーPlusエバンジェリストをしております)

まず、基本方針の検討をじっくり考えられたらいいと思います。
私が考えてみた一例です。ご参考になれば幸いです。

実現したいことがいくつか書かれていますが、それらを以下の手段をどのように使って実現できるのか?するのか?

  • kintone基本機能
  • カレンダーPlus(カレプラ)のプラグイン機能
  • カスタマイズ(kintone 画面)
  • カスタマイズ(カレンダーPlus API利用)

やりたいこと:

個別に見ていきましょう

これはkintoneのレコード追加画面ですね。
ここでは、時間の30分丸め(切り上げ)および利用料単価をかけた利用料計算が、基本機能の計算で実現できると思います。画像は一例です。

これはエラー表示等をどこでやりたいのか?によって対応が変わりますね。

カレプラ画面でマウスドラッグで選んだ時点でエラー表示させたいのであれば、カレプラAPIを使ったカスタマイズが必要。

これは、カレンダーPlusのPro版でリソース別カレンダーを用いることで、プラグイン上で重複選択できないような制御が可能となりますね。開いたレコード追加画面で制御したいのであれば、別の対応が必要。

このように、まずは基本方針についてしっかりと考えたうえで、必要なカスタマイズを考えることが大事になってきます。また、全ての要望をJavaScriptカスタマイズで実現するのではなく、別の手段で実現するという選択肢もあるかと思います。

回答頂き、ありがとうございます。色々考えて、JavaScriptにて実行がよいのかなと考えましたが、基本であるものやカレプラで出来るものがあれば、そちらで実施すること理解しました。
カレプラで実施する場合はどのようにすればよいのかご教授頂けますでしょうか?
以下の場合、マウスドラッグ時にエラー表示がベストだと思いましたので・・・

{C6EB2076-AA39-4BEF-B82A-BC1EABAED3B0}

時刻まるめ&料金計算部分は、基本機能でやるほうがいいと思います。

また、サンプル画像にもありますが、単価は初期値をもたせた数値フィールドとして、フォームに置いておくと、将来の価格変更時にトラブルを招くことが無くなります。

カレンダーPlus のAPIを使ったカスタマイズは、こちらにAPIのドキュメントがありますが、
kintoneのAPIや仕様をある程度把握してから利用するべきものだと思います。

かんたんなカレプラAPIを使ったカスタマイズの例

まずは、基本機能部分を実装し、段階的に取り組んでいかれてはいかがでしょうか?

時刻まるめ等は標準計算で実装いたしました。ありがとうございます。
区画マスターにある区画毎に単価を持たせ、ルックアップして連携させました。区画毎に単価を変動させる場合も対応可能になりました。
まだまだ勉強することが多いですね。
これからもご教授くださいませ。