jq.schedule.jsでスケジュールデータを変更する方法

jq.schedule.jsを使ってスケジュールアプリを作っているのですが
表示されているデータを変更しようとしているのですが、
変更しようとするrowsに値をセットしても
変更データの行がスケジュール表の下に追加されてしまい、
変更しようとする行の表示データを変更できません。

どなたかjq.schedule.jsの使い方を教えていただけないでしょうか？
JavaScriptの初心者で初歩的な質問で申し訳ありませんが
よろしくお願いいたします。


###該当のソースコード

    function index_show(event) {
		setSchedule();
		setSchedule02();
    }

    function setSchedule(){
	    var $sc = jQuery("#schedule").timeSchedule({
	        startTime: "08:00", // schedule start time(HH:ii)
	        endTime: "20:00",   // schedule end time(HH:ii)
	        widthTime:60 * 10,  // cell timestamp example 10 minutes
	        timeLineY:60,       // height(px)
	        verticalScrollbar:20,   // scrollbar (px)
	        timeLineBorder:2,   // border(top and bottom)
	        debug:"#debug",     // debug string output elements
	        rows : {
	            '1' : {
	                title : '01:'
	            },
	            '2' : {
	                title : '02:'
	            }
	        },
	        change: function(node,data){
	            alert("change event");
	        },
	        init_data: function(node,data){
	        },
	        click: function(node,data){
	            alert("click event");
	        },
	        append: function(node,data){
	        },
	        time_click: function(time,data){
	            alert("time click event");
	        }
	    });
    }

    function setSchedule02(){
	    var $sc = jQuery("#schedule").timeSchedule({
	        rows : {
	            '1' : {
	                title : '01:',
	                schedule:[
	                    {
	                        start:'08:30',
	                        end:'09:30',
	                        text:'会議001',
	                        data:{
	                        }
	                    }
	                ]
	            }
	        }
	    });
    }

'1'の行にsetSchedule02で設定しているデータを追加したいのですが、
追加した行が表の下に追加されてしまいます。
よろしくお願いします。

jq.schedule.js
http://www.ateliee.com/archives/2040

テストソース

    function index_show(event) {

		setSchedule();
		
//		$("#schedule").timeSchedule().remove();
		$("#schedule").remove();

		setSchedule();

    }

    function setSchedule(){
	    var $sc = jQuery("#schedule").timeSchedule({
	        startTime: "08:00", // schedule start time(HH:ii)
	        endTime: "20:00",   // schedule end time(HH:ii)
	        widthTime:60 * 10,  // cell timestamp example 10 minutes
	        timeLineY:60,       // height(px)
	        verticalScrollbar:20,   // scrollbar (px)
	        timeLineBorder:2,   // border(top and bottom)
	        debug:"#debug",     // debug string output elements
	        rows : {
	            '1' : {
	                title : '01:'
	            },
	            '2' : {
	                title : '02:'
	            }
	        },
	        change: function(node,data){
	            alert("change event");
	        },
	        init_data: function(node,data){
	        },
	        click: function(node,data){
	            alert("click event");
	        },
	        append: function(node,data){
	        },
	        time_click: function(time,data){
	            alert("time click event");
	        }
	    });
    }

kei344

2016/07/16 12:50

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答1件

ベストアンサー

【jquery.schedule/jq.schedule.js at master · ateliee/jquery.schedule · GitHub】
https://github.com/ateliee/jquery.schedule/blob/master/js/jq.schedule.js#L104

とりあえず addScheduleData で追加は出来そうですが、編集や削除、データの出力（JSONなど）は（jq.schedule.jsに）実装されていないようです。編集を実装するのであれば、元データを変数で管理して、変更があるたび前のものを削除して再描画するしかないと思います。

JavaScript
1jQuery( '#schedule' ).addScheduleData( { start:'08:30', end:'09:30', text:'会議001',
2	click:	function( node, data ) {
3			console.log( 'click event' );
4		}
5} ); // 未テスト

投稿2016/07/17 10:34

kei344

総合スコア69398

kanegon2016

2016/07/19 14:41 編集

回答ありがとうございます。 >変更があるたび前のものを削除して再描画するしかないと思います。上記の方法で、描画後、｢schedule｣を削除すると、再度、setSchedule()をコールしてもスケジュール表が再描画しないのですが、以下の削除方法は間違っているのでしょうか？ $("#schedule").timeSchedule().remove();でも $("#schedule").remove();でも再描画されませんでした。お手数ですが、オブジェクトの削除方法を教えて頂けないでしょうか？