igScheduler
を jQuery を使用して構成できます。このトピックは、基本の igScheduler
コントロールを構成する方法を紹介します。
このトピックは、以下のセクションで構成されます。
以下のトピックは、このトピックを理解するための前提条件として必要な情報を示しています。
igScheduler の概要: このトピックは、igScheduler
およびその機能の概要を説明します。
Infragistics Loader の使用
始まる前に、すべての必要なリソースを読み込みます。最初に jQuery リソースを読み込み、次に必要な Ignite UI for jQuery リソースを読み込みます。Ignite UI for jQuery リソースをプロジェクトに追加する方法が 3 つあります。igLoader
を使用、必要なモジュールを読み込み、あるいはすべての必須リソースを結合するバンドル ファイルを使用することができます。以下はその方法です。
$.ig.loader({
scriptPath: "../../igniteui/js/",
cssPath: "../../igniteui/css/",
resources: "igScheduler"
});
バンドル モジュールを読み込む
<script src="igniteui/js/infragistics.core.js"></script>
<script src="igniteui/js/infragistics.lob.js"></script>
<script src="igniteui/js/infragistics.scheduler-bundled.js"></script>
この手順では、igScheduler
を Web ページに追加する方法を手順ごとに示します。このサンプルは、igScheduler を月表示および予定オブジェクトとともに初期化する方法を紹介します。時間間隔の間で移動し、アクティビティを作成、編集、または削除できます。
この手順を実行するには、以下が必要です。
以下の手順は、複数の予定を表示する igScheduler
コンポーネントをページに追加する方法を説明します。
必要な JS および CSS ファイルの追加
1.1.igLoader の使用
igLoader は、指定したコントロールの JavaScript および CSS ファイルを読み込みます。
<head>
<title>igScheduler example</title>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="../IgniteUI/js/infragistics.loader.js"></script>
<script src="../data-files/scheduler-data.js"></script>
</head>
<body>
<div id="scheduler"></div>
<script>
$.ig.loader({
scriptPath: "http://dev.igniteui.local/17-1/IgniteUI/js/",
cssPath: "http://dev.igniteui.local/17-1/IgniteUI/css/",
resources: "igScheduler"
});
.....
scheduler
の id を持つ HTML DIV 要素が初期化で igScheduler
ウィジェットによってラップされます。
1.2. モジュールを別々に読み込む
<link type="text/css" href="ignite-ui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link type="text/css" href="ignite-ui/css/structure/modules/infragistics.ui.shared.css" rel="stylesheet" />
<link type="text/css" href="ignite-ui/css/structure/modules/infragistics.ui.editors.css" rel="stylesheet" />
<link type="text/css" href="ignite-ui/css/structure/modules/infragistics.ui.popover.css" rel="stylesheet" />
<link type="text/css" href="ignite-ui/css/structure/modules/infragistics.ui.notifier.css" rel="stylesheet" />
<link type="text/css" href="ignite-ui/css/structure/modules/infragistics.ui.toolbarbutton.css" rel="stylesheet" />
<link type="text/css" href="ignite-ui/css/structure/modules/infragistics.ui.splitbutton.css" rel="stylesheet" />
<link type="text/css" href="ignite-ui/css/structure/modules/infragistics.ui.colorpicker.css" rel="stylesheet" />
<link type="text/css" href="ignite-ui/css/structure/modules/infragistics.ui.combo.css" rel="stylesheet" />
<link type="text/css" href="ignite-ui/css/structure/modules/infragistics.ui.scroll.css" rel="stylesheet" />
<link type="text/css" href="ignite-ui/css/structure/modules/infragistics.ui.scheduler.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript" src="ignite-ui/js/modules/infragistics.util.js"></script>
<script type="text/javascript" src="ignite-ui/js/modules/infragistics.util.jquery.js"></script>
<script type="text/javascript" src="ignite-ui/js/modules/infragistics.datasource.js"></script>
<script type="text/javascript" src="ignite-ui/js/modules/infragistics.templating.js"></script>
<script type="text/javascript" src="ignite-ui/js/modules/infragistics.ui.scroll.js"></script>
<script type="text/javascript" src="ignite-ui/js/modules/infragistics.ui.shared.js"></script>
<script type="text/javascript" src="ignite-ui/js/modules/infragistics.ui.popover.js"></script>
<script type="text/javascript" src="ignite-ui/js/modules/infragistics.ui.notifier.js"></script>
<script type="text/javascript" src="ignite-ui/js/modules/infragistics.ui.validator.js"></script>
<script type="text/javascript" src="ignite-ui/js/modules/infragistics.ui.combo.js"></script>
<script type="text/javascript" src="ignite-ui/js/modules/infragistics.ui.editors.js"></script>
<!-- ext -->
<script src="ignite-ui/js/modules/infragistics.ext_core.js"></script>
<script src="ignite-ui/js/modules/infragistics.ext_text.js"></script>
<script src="ignite-ui/js/modules/infragistics.ext_collections.js"></script>
<script src="ignite-ui/js/modules/infragistics.ext_io.js"></script>
<script src="ignite-ui/js/modules/infragistics.ext_ui.js"></script>
<script src="ignite-ui/js/modules/infragistics.dv_jquerydom.js" ></script>
<script src="ignite-ui/js/modules/infragistics.ext_collectionsExtended.js"></script>
<script src="ignite-ui/js/modules/infragistics.ext_threading.js"></script>
<script src="ignite-ui/js/modules/infragistics.ext_web.js"></script>
<!-- xml -->
<script src="ignite-ui/js/modules/infragistics.xml.js"></script>
<!-- dv -->
<script src="ignite-ui/js/modules/infragistics.dv_core.js"></script>
<script src="ignite-ui/js/modules/infragistics.dv_jquerydom.js"></script>
<!-- scheduler -->
<script src="ignite-ui/js/modules/infragistics.scheduler.core.js"></script>
<script src="ignite-ui/js/modules/infragistics.ui.scheduler.core.js"></script>
<script src="ignite-ui/js/modules/infragistics.ui.scheduler.js"></script>
1.3. バンドル モジュールを読み込む
<script src="igniteui/js/infragistics.core.js"></script>
<script src="igniteui/js/infragistics.lob.js"></script>
<script src="igniteui/js/infragistics.scheduler-bundled.js"></script>
予定およびリソース コレクションを対応する dataSource
および resources
オプションに割り当てます。
...
appointments = [{
"resourceId": 1,
"id": "11",
"start": new Date(2017, 10, 2, 6, 45),
"end": new Date(2017, 10, 3, 6, 45),
"subject": "Marketing conference"
},
{
"resourceId": 2,
"id": "5",
"end": new Date(2017, 10, 3, 12, 45),
"start": new Date(2017, 10, 3, 13, 45),
"subject": "Dentist appointment"
}],
resources = [
{ id: 1, displayName: "Trina Friesen"},
{ id: 2, displayName: "Mack Koch"}]
...
上記コレクションを dataSource
および resources
オプションに割り当てます。
$("#scheduler").igScheduler({
height: "650px",
width: "100%",
selectedDate: today,
dataSource: appointments,
resources: resources
});
以下のスクリーンショットは最終結果のプレビューです。
オンラインで表示: GitHub