記事詳細

投稿日
2025年12月26日18時03分
タイトル

ASP.NET Core MVC を使って、コントローラーとビューでシンプルな月間カレンダーを生成するサンプル

内容

ASP.NET Core MVC を使って、コントローラーとビューでシンプルな月間カレンダーを生成するサンプルを示します。
このサンプルは 現在の月 または指定された年月のカレンダーを HTML テーブルとして表示します。

1. モデル (Models/CalendarDay.cs)

Csharp
using System;

namespace MvcCalendar.Models
{
    // 1日分の情報を保持するモデル
    public class CalendarDay
    {
        public DateTime Date { get; set; }
        public bool IsCurrentMonth { get; set; }
        public bool IsToday { get; set; }
    }
}

2. コントローラー (Controllers/CalendarController.cs)

Csharp
using Microsoft.AspNetCore.Mvc;
using MvcCalendar.Models;
using System;
using System.Collections.Generic;
using System.Globalization;

namespace MvcCalendar.Controllers
{
    public class CalendarController : Controller
    {
        public IActionResult Index(int? year, int? month)
        {
            // 年月が指定されていない場合は現在の年月
            var targetDate = new DateTime(
                year ?? DateTime.Today.Year,
                month ?? DateTime.Today.Month,
                1
            );

            var days = GenerateCalendar(targetDate);
            ViewBag.Year = targetDate.Year;
            ViewBag.Month = targetDate.Month;
            ViewBag.MonthName = targetDate.ToString("MMMM", CultureInfo.CurrentCulture);

            return View(days);
        }

        private List<CalendarDay> GenerateCalendar(DateTime targetDate)
        {
            var days = new List<CalendarDay>();

            // 月初と月末
            var firstDayOfMonth = new DateTime(targetDate.Year, targetDate.Month, 1);
            var lastDayOfMonth = firstDayOfMonth.AddMonths(1).AddDays(-1);

            // カレンダー開始日（週の初め：日曜日）
            var startDate = firstDayOfMonth.AddDays(-(int)firstDayOfMonth.DayOfWeek);

            // カレンダー終了日（週の終わり：土曜日）
            var endDate = lastDayOfMonth.AddDays(6 - (int)lastDayOfMonth.DayOfWeek);

            for (var date = startDate; date <= endDate; date = date.AddDays(1))
            {
                days.Add(new CalendarDay
                {
                    Date = date,
                    IsCurrentMonth = date.Month == targetDate.Month,
                    IsToday = date.Date == DateTime.Today
                });
            }

            return days;
        }
    }
}

3. ビュー (Views/Calendar/Index.cshtml)

Razor
@model List<MvcCalendar.Models.CalendarDay>
@{
    ViewData["Title"] = "カレンダー";
    var weeks = Model.Chunk(7); // 1週間ごとに分割
}

<h2>@ViewBag.Year 年 @ViewBag.Month 月 (@ViewBag.MonthName)</h2>

<table border="1" cellpadding="5" style="border-collapse: collapse; text-align: center;">
    <thead>
        <tr style="background-color: #f0f0f0;">
            <th>日</th>
            <th>月</th>
            <th>火</th>
            <th>水</th>
            <th>木</th>
            <th>金</th>
            <th>土</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var week in weeks)
        {
            <tr>
                @foreach (var day in week)
                {
                    var style = "";
                    if (!day.IsCurrentMonth) style = "color: #aaa;";
                    if (day.IsToday) style += " background-color: yellow;";

                    <td style="@style">
                        @day.Date.Day
                    </td>
                }
            </tr>
        }
    </tbody>
</table>

<div style="margin-top: 10px;">
    <a href="@Url.Action("Index", new { year = ViewBag.Year, month = ViewBag.Month - 1 })">前月</a> |
    <a href="@Url.Action("Index", new { year = ViewBag.Year, month = ViewBag.Month + 1 })">次月</a>
</div>

4. 実行方法

  1. 新規 ASP.NET Core MVC プロジェクトを作成
    Bash
    dotnet new mvc -n MvcCalendar
  2. 上記の モデル, コントローラー, ビュー を追加
  3. Program.cs / Startup.cs はデフォルトのままでOK
  4. 実行
    Bash
    dotnet run
  5. ブラウザで
    

    https://localhost:5001/Calendar
    にアクセス

特徴

  • 現在日付を黄色でハイライト
  • 前後の月の日付はグレー表示
  • 前月・次月リンクで移動可能
  • 週は日曜始まり

もしご希望であれば、このカレンダーに イベント登録機能 や Ajaxでの月切り替え を追加した拡張版も作成できます。
次はその拡張版を作りますか？

Powered by Froala Editor
添付画像
画像はありません
Genreのカテゴリ-名
Controllers
編集 | 記事一覧