Calendar
概要
機能
サンプル
有効な範囲: 1 1, 2024 ~ 12 31, 2025
- FirstDayOfWeek:週の最初の曜日(カレンダーの最初の列に表示される曜日)を表します。
- ShowHeader:コントロールに現在の月とナビゲーションボタンを含むヘッダ領域を表示するかどうかを示します。
- MonthView:カレンダーに月を表示するか、年を表示するかを示します。
- RepeatButtons = True: カレンダーボタン([前へ]ボタンと[次へ]ボタン)は繰り返しボタンとして機能し、ボタンを押したままにすると繰り返し発生します。
- ShowYearPicker = True: ユーザーが年カレンダーのヘッダー要素をクリックすると、カレンダーに年のリストが表示されます。
- MonthCount:カレンダーに表示する月数を表します。
- WeeksBefore:カレンダーに現在の月の前に表示する週数を示します。
- WeeksAfter:カレンダーに現在の月の後に表示する週数を示します。
- HandleWheel: ユーザーがマウスホイールで現在のdisplayMonthの値を変更できるかどうかを決定します。
設定
月数
前の週の数
後ろの週の数
説明
このサンプルは、Calendar コントロールの基本的な使用方法を示します。
ソース
IndexController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcExplorer.Models;
namespace MvcExplorer.Controllers
{
public partial class CalendarController : Controller
{
public ActionResult Index()
{
ViewBag.DemoSettings = true;
ViewBag.DemoSettingsModel = new ClientSettingsModel
{
Settings = CreateSettings()
};
return View();
}
private static IDictionary<string, object[]> CreateSettings()
{
var settings = new Dictionary<string, object[]>
{
{"FirstDayOfWeek", Enum.GetValues(typeof(DayOfWeek)).Cast<object>().ToArray()},
{"ShowHeader", new object[]{true, false}},
{"MonthView", new object[]{true, false}},
{"RepeatButtons", new object[]{true, false}},
{"ShowYearPicker", new object[]{true, false}},
{"HandleWheel", new object[]{true, false}}
};
return settings;
}
}
}
Index.cshtml
@{
var today = DateTime.Now.Date;
var minDate = new DateTime(today.Year - 1, 1, 1);
var maxDate = new DateTime(today.Year, 12, 31);
var format = Resources.Calendar.Index_DateFormat;
ClientSettingsModel settings = ViewBag.DemoSettingsModel;
}
<div>
<label>@Html.Raw(Resources.Calendar.Index_Text1)</label>
@(Html.C1().Calendar().Id(settings.ControlId)
.Value(today).Min(minDate).Max(maxDate).MonthView(true)
.Width(300).RepeatButtons(true).ShowYearPicker(true)
.HandleWheel(true)
)
</div>
<p>
<b>@Html.Raw(Resources.Calendar.Index_ValidRange) <span>@minDate.ToString(format)</span> @Html.Raw(Resources.Calendar.Index_To) <span>@maxDate.ToString(format)</span></b>
</p>
<ul>
<li>@Html.Raw(Resources.Calendar.Index_FirstDayOfWeek)</li>
<li>@Html.Raw(Resources.Calendar.Index_ShowHeader)</li>
<li>@Html.Raw(Resources.Calendar.Index_MonthView)</li>
<li>@Html.Raw(Resources.Calendar.Index_RepeatButtons)</li>
<li>@Html.Raw(Resources.Calendar.Index_ShowYearPicker)</li>
<li>@Html.Raw(Resources.Calendar.Index_MonthsCount)</li>
<li>@Html.Raw(Resources.Calendar.Index_WeeksBefore)</li>
<li>@Html.Raw(Resources.Calendar.Index_WeeksAfter)</li>
<li>@Html.Raw(Resources.Calendar.Index_HandleWheel)</li>
</ul>
@section Settings{
<div style="padding: 4px 8px">
<p style="display:inline-block; width: 100px">@Html.Raw(Resources.Calendar.Index_MonthCount)</p>
@(Html.C1().InputNumber().Width(150).Min(1).Max(10).Step(1).Value(1).Format("n0").OnClientValueChanged("monthCountChange"))
</div>
<div style="padding: 4px 8px">
<p style="display:inline-block; width: 100px">@Html.Raw(Resources.Calendar.Index_WeekBefore)</p>
@(Html.C1().InputNumber().Width(140).Min(0).Max(10).Step(1).Value(0).Format("n0").OnClientValueChanged("weekBeforeChanged"))
</div>
<div style="padding: 4px 8px">
<p style="display:inline-block; width: 100px">@Html.Raw(Resources.Calendar.Index_WeekAfter)</p>
@(Html.C1().InputNumber().Width(140).Min(0).Max(10).Step(1).Value(0).Format("n0").OnClientValueChanged("weekAfterChanged"))
</div>
}
@section Scripts{
<script>
function monthCountChange(sender, args) {
var calenderControl = wijmo.Control.getControl('#DemoControl');
if (calenderControl != null) {
calenderControl.monthCount = sender.value;
calenderControl.invalidate();
if (sender.value === 1) {
document.querySelector('#DemoControl').style.width = "315px";
} else {
document.querySelector('#DemoControl').style.width = "100%";
}
}
}
function weekBeforeChanged(sender, args) {
var calenderControl = wijmo.Control.getControl('#DemoControl');
if (calenderControl != null) {
calenderControl.weeksBefore = sender.value;
calenderControl.invalidate();
}
}
function weekAfterChanged(sender, args) {
var calenderControl = wijmo.Control.getControl('#DemoControl');
if (calenderControl != null) {
calenderControl.weeksAfter = sender.value;
calenderControl.invalidate();
}
}
</script>
}
@section Description{
@Html.Raw(Resources.Calendar.Index_Text0)
}
マニュアル