新規投稿
フォローする

DOM操作 Classの複製

お世話になっております。

カレンダーplusプラグインを使用しており、ボタンの複製を行いたいと考えています。

Classの取得まではできているのですが、複製でエラーを吐いている状況です。

なにが間違っているのでしょうか。知恵をお貸しください。

(function () {
  'use strict';
  var events = ['app.record.index.show'];
  kintone.events.on(events, function (event) {
    window.addEventListener('DOMContentLoaded', () => {
      // 複製要素取得
      var fc_button = document.getElementsByClassName('fc-left');
      console.log(fc_button);
      // 複製
      var fc_button_element = fc_button.cloneNode(true);
      // 挿入先取得
      var bottom_list = document.getElementById('view-list-bottom-gaia');
      bottom_list.appendChild(fc_button_element);
    });
    return event;
  });
})();
0

6件のコメント

Avatar
斎藤 栄

mionix様

カレンダーPlusの開発・販売元であるラジカルブリッジの斎藤と申します。

本件の直接的なエラーの原因は、

var fc_button = getElementsByClassName('fc-left');

で取得している内容がElementの配列であるにも関わらず、

fc_button.cloneNode(true);

で直接cloneNode()しているためと思われます。よくやる方法としては

getElementsByClassName('fc-left')[0];

のように、配列の先頭のElementを取得するようにすると良いと思います。

---------------

一方、カレンダーPlusの提供メーカーとしては、そもそもDOMを直接参照することはオススメいたしません。
将来的にDOM構造が変更になる可能性があるためです。また、最後の方で行っている

var bottom_list = document.getElementById('view-list-bottom-gaia');
bottom_list.appendChild(fc_button_element);

も、kintoneのDOMを参照しており、サイボウズとしても推奨しないカスタマイズ内容になっているかと思います。

プログラム内容から推察するに、ヘッダー部分にある日付移動のボタン類をカレンダー下部にも表示させたいということかと思われますので、カレンダーPlus自体の今後のバージョンアップにて標準機能としての対応を検討させていただきます。

どうぞ宜しくお願いいたします。

0
Avatar
mionix

斎藤様

ご教示頂き、誠にありがとうございます。

当環境ではスケジュール件数が多く、下部にもボタンを配置してほしいとの要望が多かったため、

日付移動ボタンを下部に複製しようと考えておりました。

 

ご提示いただいた内容でコードを書き替えてみたのですが、「fc_button」がundefinedになってしまい、

cloneNodeでエラーを吐いている状況です。

 

推奨しないとのことですので、今後の機能追加を祈念しております。

0
Avatar
斎藤 栄

mionix 様

ご確認ありがとうございます。

非推奨であること、ご理解いただきましてありがとうございます。

私の方で実際に動かしているわけではないのでエラーが出てしまっているようですが、

window.addEventListener('DOMContentLoaded')

のタイミングの問題もあるかもしれません。

カレンダーPlusには Calendar Plus JavaScript API という機能が備わっており、
カレンダー画面描画後イベントなども用意しておりますので、より安全なタイミングで
独自の処理を走らせることができるのではないかと思います。

https://radical-bridge.com/product/kintone-plugin/calendarPlus/CalendarPlus-JavaScript-API.pdf


今後なんらかのカスタマイズをされる場合は、Calendar Plus JavaScript API の利用もご検討いただければ幸いです。

斎藤 栄により編集されました
0
Avatar
mionix

斎藤様

ご教示頂き、誠にありがとうございます。

CalendarPlasAPIを使用したところボタンが表示されるようになりました。

しかし、HTMLをコピーしただけでは処理が走らないのですね...

APIも含め、もう少し知識を付けいたいと思います。

今後とも何卒よろしくお願いいたします。

0
Avatar
斎藤 栄

mionix 様

Calendar Plus JavaScript API である程度動作が進んだようでなによりです。

尚、Calendar Plus JavaScript API リファレンスの p.26 以降にメソッドがいくつかあり、日付を1単位進める・戻す、本日日付に移動するなど、ヘッダー部のボタンと同じ挙動をするメソッドもございますので、カレンダーPlusの今後のバージョンを待たずとも、(HTMLコピーをせずに)独自の日付移動ボタンを設置いただくことが可能かと思います。

こちらも併せてご確認くださいませ。

0
Avatar
mionix

斎藤様

そのようなメソッドもあるのですね。確認不足で申し訳ありません。

頂いた内容を元に試してみたいと思います。

ご教授いただき、誠にありがとうございました。

0
サインインしてコメントを残してください。