タッチ機能 - カレンダー -

カレンダーコントロールおよび日付時刻、日付コントロールのドロップダウンカレンダーでは、パンによる月や年のスクロールが可能です。左右や上下のパンの方向により、スクロールする内容が異なります。日付を選択する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>


このページの先頭へ戻る