カレンダーコントロールおよび日付時刻、日付コントロールのドロップダウンカレンダーでは、パンによる月や年のスクロールが可能です。左右や上下のパンの方向により、スクロールする内容が異なります。日付を選択するMonthDayカレンダー(月-日カレンダー)と月を選択するYearMonthカレンダー(年-月カレンダー)をズームボタンが表示されていない場合においても、ピンチ・ストレッチ操作により切り替えることができます。※ピンチ・ストレッチ・パンによる操作は、Internet Explorer 10以降、およびタッチデバイス使用時に動作します。
using System; public partial class Touch_Calendar : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void Button1_Click(object sender, EventArgs e) { // ピンチ・ストレッチ操作でのズームを許可するかどうか設定します。 GcCalendar1.EnableTouchZoom = CheckBox1.Checked; GcDate1.DropDownCalendar.EnableTouchZoom = CheckBox1.Checked; // ズームボタンの表示するかどうか設定します。 GcCalendar1.ShowZoomButton = CheckBox2.Checked; GcDate1.DropDownCalendar.ShowZoomButton = CheckBox2.Checked; // アニメーション効果を適用するかどうか設定します。 GcCalendar1.EnableScrollAnimation = CheckBox3.Checked; GcDate1.DropDownCalendar.EnableScrollAnimation = CheckBox3.Checked; } }
Partial Class Touch_Calendar Inherits System.Web.UI.Page Protected Sub Button1_Click(sender As Object, e As System.EventArgs) Handles Button1.Click ' ピンチ・ストレッチ操作でのズームを許可するかどうか設定します。 GcCalendar1.EnableTouchZoom = CheckBox1.Checked GcDate1.DropDownCalendar.EnableTouchZoom = CheckBox1.Checked ' ズームボタンの表示するかどうかを設定します。 GcCalendar1.ShowZoomButton = CheckBox2.Checked GcDate1.DropDownCalendar.ShowZoomButton = CheckBox2.Checked ' アニメーション効果を適用するかどうか設定します。 GcCalendar1.EnableScrollAnimation = CheckBox3.Checked GcDate1.DropDownCalendar.EnableScrollAnimation = CheckBox3.Checked End Sub End Class
<%@ page title="" language="C#" masterpagefile="~/MasterPage.master" autoeventwireup="true" inherits="Touch_Calendar, App_Web_tz1sshx0" theme="SkinFile" %> <%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMCalendar" tagprefix="im_calendar" %> <%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMDate" tagprefix="im_date" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> <script type="text/javascript"> // ピンチ・ストレッチ操作によるカレンダータイプの切換えを許可または禁止します。 function SetZoom(obj) { if (!document.getElementById("isClient").checked) return; FindIMControl('<% =GcCalendar1.ClientID %>').SetEnableTouchZoom(obj.checked); FindIMControl('<% =GcDate1.ClientID %>').GetDropDownCalendar().SetEnableTouchZoom(obj.checked); } // ズームボタンの表示を切り替えます。 function ShowZoomButton(obj) { if (!document.getElementById("isClient").checked) return; FindIMControl('<% =GcCalendar1.ClientID %>').SetShowZoomButton(obj.checked); FindIMControl('<% =GcDate1.ClientID %>').GetDropDownCalendar().SetShowZoomButton(obj.checked); } // アニメーション効果を適用するかどうか設定します。 function SetScrollAnimation(obj) { if (!document.getElementById("isClient").checked) return; FindIMControl('<% =GcCalendar1.ClientID %>').SetEnableScrollAnimation(obj.checked); FindIMControl('<% =GcDate1.ClientID %>').GetDropDownCalendar().SetEnableScrollAnimation(obj.checked); } </script> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <div class="sample"> <table> <tr> <td class="controlsTd" valign="top">カレンダー:</td> <td class="controlsTd"> <im_calendar:GcCalendar ID="GcCalendar1" runat="server" HasLoadFromXml="True" Height="210px" Width="210px" EnableTouchZoom="True"> </im_calendar:GcCalendar> </td> <td class="controlsTd" valign="top">日付:</td> <td class="controlsTd" valign="top"> <im_date:GcDate ID="GcDate1" runat="server" HasLoadFromXml="True" Width="170px"> <dropdowncalendar autosize="False" enabletouchzoom="True" height="210px" width="210px"></dropdowncalendar> </im_date:GcDate> </td> </tr> </table> </div> <label style="font-size:80%;"><input type="checkbox" id="isClient" checked="checked" /> クライアント側の設定を有効にする</label> <table class="inputTable"> <tr> <th class="inputTh">カレンダータイプの切換え</th> <td class="inputTd"> <asp:CheckBox ID="CheckBox1" runat="server" Checked="True" Text="ピンチ・ストレッチ操作による切換えを許可する" onclick="SetZoom(this);" /> </td> </tr> <tr> <th class="inputTh">ズームボタンの表示</th> <td class="inputTd"> <asp:CheckBox ID="CheckBox2" runat="server" Text="表示する" onclick="ShowZoomButton(this);" /> </td> </tr> <tr> <th class="inputTh">スクロール時のアニメーション</th> <td class="inputTd"> <asp:CheckBox ID="CheckBox3" runat="server" Checked="True" Text="アニメーション効果を適用する" onclick="SetScrollAnimation(this);" /> </td> </tr> </table> <center> <asp:Button ID="Button1" runat="server" CssClass="button_nowidth" Text="サーバー側で設定" onclick="Button1_Click" /> </center> </asp:Content>