Developers Summit 2018の日程について

毎年恒例「Developers Summit(通称:デブサミ)」が今年も開催されます。
グレープシティは昨年の「Developers Summit Summer」「Developers Summit KANSAI」「Developers Summit KYUSHU」につづいてのスポンサー協賛です。

今年は2月15日からの2日間

開催中の2日間はブースを出展し、リリースしたばかりのInputManJSをはじめとするJavaScriptライブラリをご覧いただけます。
しかし参加予定のない方もいらっしゃいますので、その方はデブサミ開催日程に合わせるかのように公開したInputManJSのデモをご体感ください。

Web用UIコントロールセットであるInputManJSには、Webページにカレンダーを表示するコントロールが搭載されています。そのデモを利用して、デブサミの日程を表示するサンプルを作成します。デモはコードを編集して直接操作できますので、サンプルコードを参考に体験してみてください。

1. デモページを表示

グレープシティのWebサイトからデモページを表示して、カレンダーコントロールのデモを選択します。

InputManJSデモアプリケーション | グレープシティ株式会社

2. JavaScriptのコードを張り付け

作成済みのサンプルコードを以下に記載します。これをそのまま[JavaScript]のタブに上書きで張り付けてください。

var gcCalendar = new GC.InputMan.GcCalendar(document.getElementById('gcCalendar'));
// 表示するのを今月のみに固定
var today = new Date();
gcCalendar.setMinDate(new Date(today.getFullYear(), today.getMonth()));
gcCalendar.setMaxDate(new Date(today.getFullYear(), today.getMonth() + 1, 0));
// 選択できる日数を2日間に設定
gcCalendar.setMaxSelectionCount(2);
gcCalendar.setSelectionMode(GC.InputMan.CalendarSelectionMode.MultiSimple);
// Developers Summit 2018の日程を休日として設定
var holidayGroup = new GC.InputMan.HolidayGroup('holiday', true);
holidayGroup.addHoliday(new GC.InputMan.ForceHoliday('デブサミ Day1', '2018/2/15'));
holidayGroup.addHoliday(new GC.InputMan.ForceHoliday('デブサミ Day2', '2018/2/16'));
gcCalendar.addHolidayGroup(holidayGroup);
3. CSSのコードを張り付け

同様に以下のコードを[CSS]のタブに上書きしてください。

/* 休日をデブサミ風文字色で表示するスタイル */
[calendar-holiday-type] {
background-color: #bdd766;
color: #5b9fc2;
font-weight:bold;
}
4. 実行ボタンを押して表示

コードの設定完了後、[ 実行 ]ボタンを押すと、上に表示されたカレンダーコントロールが変わり、開催日程である2月15日、16日にスタイルが適用され下図のようになります。

f:id:GrapeCity_dev:20180215111602p:plain:w600

まとめ

このように、JavaScriptライブラリである「InputManJS」は、その場でコードを修正して試すことができます。
他にも、テキスト、マスク、数値などのテキストボックスを用意しています。
また、InputManJSだけでなく、SpreadJS、Wijmoのデモも同様です。実際にお試しください。

デブサミ会場お越しいただいた方は、ブース展示がありますのでぜひお立ち寄りください。


製品情報

JavaScriptライブラリ製品「InputManJS」「SpreadJS」「Wijmo」

\  この記事をシェアする  /