クイックスタート

Wijmo UI for the Web

クイックスタート

すべて折りたたむ

Wijmo ユーザーガイド > ウィジェット > EventsCalendar > クイックスタート

全て展開

すべて折りたたむ

すべて折りたたむ

このクイックスタートでは、HTML マークアップおよび jQuery スクリプトを使用して、HTML プロジェクトに EvCal ウィジェットを追加する方法について学びます。

テキストエディタで新規の HTML ページを作成するには、下記コードを追加して文章を .html の拡張子で保存します。
ドロップダウンしてマークアップをコピーします
テキストエディタに張り付けます
コードのコピー

<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

依存ファイルへのリンクを HTML ページの <head> タグ内に追加します。最新の依存ファイルについては、「Wijmo CDN」の CDN ファイルを参照してください。

ドロップダウンから参照コードをコピーして head タグ内に貼り付けます

次のマークアップを <body> タグ内に追加して、ウィジェットを作成します。<div> 要素はウィジェットを作成し、その id 属性を jQuery で呼び出して初期化します。
ドロップダウンからマークアップをコピーして body タグ内に貼り付けます
マークアップ
コードのコピー

<div id="eventscalendar"></div>

<head> タグ内の参照の下に次のスクリプトを追加して、ウィジェットを初期化し、いくつかのイベントカレンダーウィジェットオプションを設定します。

時間間隔は、30 分ごとではなく、15 分ごとにイベントを記載する余地を提供します。
時間帯は、15 ピクセルではなく、30 ピクセルごとになります。
ルーラーの書式は分単位で表示されます。この結果、ルーラーの目盛りを 30 分ごとに設定した場合、１時間ごとの表示をさらに詳細にすることができます。
ルーラーの目盛りの表示は、１時間ごとではなく 30 分ごとになります。

ドロップダウンからスクリプトをコピーして head タグ内に貼り付けます

<head> タグ内のウィジェットを初期化するためのスクリプトの上で、CSS を使用してウィジェットのサイズを設定します。
ドロップダウンからマークアップをコピーして head タグ内に貼り付けます
スタイル
コードのコピー

<style type="text/css"> #eventscalendar { width: 650px; } </style>
HTML ファイルを保存し、それをブラウザで開きます。実際のウィジェットは次のように表示されます。

関連トピック

参照

wijevcal メソッド

Copyright © GrapeCity inc. All rights reserved.