jquery.schedule

jq.スケジュール

jQueryとHTMLのスケジュールカレンダー

• ドラッグ アンド ドロップのサポート
• サイズ変更スケジュール
• Ajax データの取得

インストール

パッケージ

 npm i jq.schedule --save

デモ

デモを試す

使用方法

ヘッドCSSを追加

 <link rel="stylesheet" type="text/css" href="./jquery.schedule/dist/css/style.min.css" />

本体を挿入

 <div id="schedule"></div>
<script type="text/javascript" src="./jquery.schedule/dist/js/jq.schedule.min.js"></script>
<script type="text/javascript">
    $(function(){
        var $sc = $("#schedule").timeSchedule({
            startTime: "07:00", // schedule start time(HH:ii)
            endTime: "21: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)
            bundleMoveWidth:6,  // width to move all schedules to the right of the clicked time line cell
            rows : {
                '0' : {
                    title : 'Title Area',
                    subtitle : 'Description',
                    schedule:[
                        {
                            start:'09:00',
                            end:'12:00',
                            text:'Text Area',
                            data:{
                            }
                        },
                        {
                            start:'11:00',
                            end:'14:00',
                            text:'Text Area',
                            data:{
                            }
                        }
                    ]
                },
                '1' : {
                    title : 'Title Area',
                    schedule:[
                        {
                            start:'16:00',
                            end:'17:00',
                            text:'Text Area',
                            data:{
                            }
                        }
                    ]
                }
            },
            onChange: function(node, data){
                addLog('onChange', data);
            },
            onInitRow: function(node, data){
                addLog('onInitRow', data);
            },
            onClick: function(node, data){
                addLog('onClick', data);
            },
            onAppendRow: function(node, data){
                addLog('onAppendRow', data);
            },
            onAppendSchedule: function(node, data){
                addLog('onAppendSchedule', data);
            },
            onScheduleClick: function(node, time, timeline){
                addLog('onScheduleClick', time + ' ' + timeline);
            }
        });
    });
</script>

オプション

パラメータ

鍵	価値	説明
クラス名	jqスケジュール	要素クラスを追加(デフォルトのjq.schedule)
開始時間	07:00	スケジュール開始時刻(HH:ii)
終了時間	21:00	スケジュール終了時刻(HH:ii)
幅時間	600	セルのタイムスタンプの例 10 分
タイムラインY	60	高さ(ピクセル)
垂直スクロールバー	20	スクロールバー (ピクセル)
タイムラインボーダー	2	境界線(上下)
バンドル移動幅	6	すべてのスケジュールをクリックしたタイムラインセルの右側に移動する幅
行	{物体}	スケジュールデータ
ドラッグ可能	{ブール値}	ドラッグ可能を有効にする(デフォルトは true)
サイズ変更可能	{ブール値}	サイズ変更可能を有効にする(デフォルトはtrue)
サイズ変更可能左	{ブール値}	左ハンドルのサイズ変更を有効にする(デフォルトは false)

スケジュールデータ

鍵	タイプ	説明
タイトル	弦	スケジュール行タイトル
字幕	弦	スケジュール行の説明
スケジュール	物体[]	配列のスケジュール行

オブジェクト内のスケジュールデータ

鍵	タイプ	説明
始める	弦	HH:ii
終わり	弦	HH:ii
文章	弦	バーのタイトル
データ	物体	バインドデータ

コールバックメソッド

onChange(ノード:要素、データ:オブジェクト)

スケジュールバー変更時のコールバック

onInitRow(ノード:要素、データ:オブジェクト)

データを初期化する

onClick(ノード:要素、データ:オブジェクト)

クリックバーのコールバック時

onAppendRow(ノード:要素、データ:オブジェクト)

スケジュール行追加時のコールバック

onSpendSchedule(ノード:要素、データ:オブジェクト)

スケジュール バーの追加時のコールバック

onScheduleClick(ノード: 要素、時刻: 文字列、データ: オブジェクト)

クリック時に行コールバックをスケジュールする

メソッド

行データを取得する

 var data = $("#schedule").timeSchedule('timelineData');

スケジュールデータを取得する

 var data = $("#schedule").timeSchedule('scheduleData');

すべてのデータをクリアする

 $("#schedule").timeSchedule('resetData');

すべてのデータと行をクリアする

 $("#schedule").timeSchedule('resetRowData');

行を追加

 $("#schedule").timeSchedule('addRow', timeline, {
    title : 'Title Area',
    schedule:[
        {
            start:'09:00',
            end:'12:00',
            text:'Text Area',
            data:{
            }
        }
    ]
});

データを追加する

 $("#schedule").timeSchedule('addSchedule', timeline, {
    start: start,
    end: end,
    text:'Insert Schedule',
    data:{}
});

スイッチ設定

 $("#schedule").timeSchedule('setDraggable', true or false);

 $("#schedule").timeSchedule('setResizable', true or false);

開発用

サーバーブラウザ同期を実行する

 npm run serve