用JSP/Servlet做Web日历(趣味)

参考链接
https://joytas.net/programming/jsp_servlet/calendarapp-2

年号对照表

没加css时

加了css后


Main.java

package controller;

import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import model.MyCalendar;
import model.MyCalendarLogic;


/**
 * @author U100926
 */
@WebServlet("/main")
public class Main extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String sYear = request.getParameter("year");
        String sMonth = request.getParameter("month");
        MyCalendarLogic logic = new MyCalendarLogic();
        MyCalendar mc = null;

        if (sYear != null && sMonth != null) {
            int year = Integer.parseInt(sYear);
            int month = Integer.parseInt(sMonth);
            if (month == 0) {
                month = 12;
                year--;
            }
            if (month == 13) {
                month = 1;
                year++;
            }
            //年と月のクエリパラメーターが来ている場合にはその年月でカレンダーを生成する
            mc = logic.createMyCalendar(year, month);
        } else {
            //クエリパラメータが来ていないときは実行日時のカレンダーを生成する。
            mc = logic.createMyCalendar();
        }
        //リクエストスコープに格納
        request.setAttribute("mc", mc);
        //viewにフォワード
        RequestDispatcher rd = request.getRequestDispatcher("/main.jsp");
        rd.forward(request, response);
    }
}

MyCalendar.java

package model;
import java.io.Serializable;
/**
 * @author U100926
 */
public class MyCalendar implements Serializable{

    //元号表記
    private String gengou;
    //カレンダーの年
    private int year;
    //カレンダーの月
    private int month;
    //カレンダーの日付を保持する配列
    private String[][] data;

    /*setter & getter*/
    public String getGengou() {
        return gengou;
    }
    public void setGengou(String gengou) {
        this.gengou = gengou;
    }
    public int getYear() {
        return year;
    }
    public void setYear(int year) {
        this.year = year;
    }
    public int getMonth() {
        return month;
    }
    public void setMonth(int month) {
        this.month = month;
    }
    public String[][] getData() {
        return data;
    }
    public void setData(String[][] data) {
        this.data = data;
    }
}

MyCalendarLogic.java

package model;

import java.util.Calendar;

public class MyCalendarLogic {
    //カレンダーインスタンスを生成するメソッド(int...は可変長引数)
    public MyCalendar createMyCalendar(int... args) {
        //マイカレンダーインスタンス生成
        MyCalendar mc = new MyCalendar();
        //現在日時でカレンダーインスタンス生成
        Calendar cal = Calendar.getInstance();
        //2つの引数が来ていたら
        if (args.length == 2) {
            cal.clear();
            //最初の引数で年を設定
            cal.set(Calendar.YEAR, args[0]);
            //次の引数で月を設定
            cal.set(Calendar.MONTH, args[1] - 1);
        }
        //マイカレンダーに年を設定
        mc.setYear(cal.get(Calendar.YEAR));
        //マイカレンダーの元号の設定
        if (mc.getYear() > 2018) {
            mc.setGengou("令和" + (mc.getYear() - 2018));
        } else if (mc.getYear() > 1988) {
            mc.setGengou("平成" + (mc.getYear() - 1988));
        } else if (mc.getYear() > 1925) {
            mc.setGengou("昭和" + (mc.getYear() - 1925));
        } else if (mc.getYear() > 1911) {
            mc.setGengou("大正" + (mc.getYear() - 1911));
        } else {
            mc.setGengou("" + mc.getYear());
        }
        //マイカレンダーに月の設定
        mc.setMonth(cal.get(Calendar.MONTH) + 1);
        //その月の1日が何曜日かを調べる為に日付を1日にする
        cal.set(Calendar.DATE, 1);
        //カレンダーの最初の空白の数
        int before = cal.get(Calendar.DAY_OF_WEEK) - 1;
        //カレンダーの日付の数
        int daysCount = cal.getActualMaximum(Calendar.DAY_OF_MONTH);
        //その月の最後の日が何曜日かを調べるために日付を最終日にする
        cal.set(Calendar.DATE, daysCount);
        //最後の日後の空白の数
        int after = 7 - cal.get(Calendar.DAY_OF_WEEK);
        //すべての要素数
        int total = before + daysCount + after;
        //その要素数を幅7個の配列に入れていった場合何行になるか
        int rows = total / 7;
        //その行数で2次元配列を生成
        String[][] data = new String[rows][7];
        //今見ているカレンダーが今月かどうかを調べるために、この瞬間の日付情報をもつもう一つのインスタンス作成しておく
        Calendar now = Calendar.getInstance();
        for (int i = 0; i < rows; i++) {
            for (int j = 0; j < 7; j++) {
                if (i == 0 && j < before || i == rows - 1 && j >= (7 - after)) {
                    //カレンダーの前後に入る空白の部分は空文字
                    data[i][j] = "";
                } else {
                    //カウンター変数と実際の日付の変換
                    int date = i * 7 + j + 1 - before;
                    //配列に日付を入れる
                    data[i][j] = String.valueOf(date);
                    //今作業しているマイカレンダーが今月のカレンダーだったら今日の日付の先頭に*を付与する
                    if (now.get(Calendar.DATE) == date && now.get(Calendar.MONTH) == mc.getMonth() - 1 && now.get(Calendar.YEAR) == mc.getYear()) {
                        data[i][j] = "*" + data[i][j];
                    }
                }
            }
        }
        //作成した2次元配列をマイカレンダーにセットする。
        mc.setData(data);
        return mc;
    }
}

main.jsp

<%--
  Created by IntelliJ IDEA.
  User: U100926
  Date: 2021/12/29
  Time: 17:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" import="model.MyCalendar"%>
<%
    MyCalendar mc=(MyCalendar)request.getAttribute("mc");
%>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title><%=mc.getGengou() %>年<%=mc.getMonth() %>月カレンダー</title>
    <link rel="stylesheet"  href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c" rel="stylesheet">
    <link rel="stylesheet" href="main.css">
</head>
<body>
<div id="container">
    <h1><%=mc.getGengou() %>年<%=mc.getMonth() %>月のカレンダー</h1>
    <p>
        <a href="?year=<%=mc.getYear()%>&month=<%=mc.getMonth()-1%>">前月</a><br>
        <a href="?year=<%=mc.getYear()%>&month=<%=mc.getMonth()+1%>">翌月</a>
    </p>
    <table>
        <tr>
            <th>日</th>
            <th>月</th>
            <th>火</th>
            <th>水</th>
            <th>木</th>
            <th>金</th>
            <th>土</th>
        </tr>
        <%for(String[] row: mc.getData()){ %>
        <tr>
            <%for(String col:row) {%>
            <%if (col.startsWith("*")){ %>
            <td class="today"><%=col.substring(1)%></td>
            <%}else{ %>
            <td><%=col %></td>
            <%} %>
            <%} %>
        </tr>
        <%} %>
    </table>
</div><!-- end container-->
</body>
</html>

main.css

@charset "UTF-8";
body{
    background:#7ce2d9;
}
#container{
    width:1000px;
    min-height:100vh;
    margin:0 auto;
    font-family: "M PLUS Rounded 1c";
    padding:20px 0 40px;
}
#container > p{
    display:flex;
    width:90%;
    margin:0 auto 20px;
    justify-content:space-between;
    align-items:center;
}
#container > p > a{
    display:block;
    width:70px;
    height:70px;
    text-align:center;
    line-height:70px;
    border-radius:50%;
    background:#fefefe;
    font-size:20px;
    text-decoration:none;

}
h1{
    width:800px;
    margin:0 auto 20px;
    text-align:center;
    font-size:64px;
    border:5px solid #fff00f;
    border-radius: 20px;
    padding:0 10px;
    background-color:#00ff76;
    color:#ff69b4;
    text-shadow: 1px 1px 0 #333;
}
table{
    width:90%;
    margin:20px auto 0;
    border-collapse: collapse;
    border-spacing: 0;
}
td,th{
    border:5px solid #fff00f;
    text-align: center;
    background-color:#ffffff;
    font-size:50px;
    padding:5px 0;
}
th{
    color:white;
    background-color:#00ff76;
    text-shadow: 1px 1px 0 #333;
}
tr *:first-child{
    color:#ff69b4;
}
tr *:last-child{
    color:#0ba9ea;
}
td.today{
    background:#ffff80;
}

index.jsp

<%--
  Created by IntelliJ IDEA.
  User: U100926
  Date: 2021/12/29
  Time: 17:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>
  $END$
  </body>
</html>