NodeJSとFullCalendarでカレンダーをつくる

いろいろな用途がありそうなカレンダーをつくります。

サンプルのURL

https://calen.glitch.me/

完成イメージ

プログラム

index.ejs

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css' rel='stylesheet' />
    <link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.print.min.css' rel='stylesheet' media='print' />
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/locale/ja.js'></script> 
    <style type="text/css">
        /* 日曜日 */
        .fc-sun {
            color: red;
            background-color: #fff0f0;
        }
        
        /* 土曜日 */
        .fc-sat {
            color: blue;
            background-color: #f0f0ff;
        }
    </style>
    <title>カレンダー</title>
</head>

<body>
    <div class="container" style="padding: 1.25rem;">
        <div class="card">
            <h5 class="card-header">カレンダー</h5>
            <div class="card-body">
                <div id="calendar"></div>
            </div>
            </div>
        </div>
    </div>
</body>
<script>
    $(document).ready(function() {
        $('#calendar').fullCalendar({
            events:[{start: '2019-12-10', rendering: 'background', color: '#ffd0d0'}, {start: '2019-12-10', title:'定休日', color: '#ffd0d0'}],
            editable: false
        });
        $('.fc-day-top[data-date="2019-12-10"] .fc-day-number').css({'color': 'red'});
    });
</script>
</html>

休日は自分で設定してあげる必要があります。

app.js

var express = require('express');
var app = express();

// EJS設定
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

// トップページ
app.get('/', function (req, res) {
    res.render('index', {});
});

app.listen(3000, function () {
});

これは定番なので、大丈夫ですね。
Node.jsは今回の内容とはあまり関係ないですね。

イベントを後から追加するとき

$('#calendar').fullCalendar('addEventSource', [{
    id: 12345,
    title: "追加したイベント",
    start: "2019-12-30",
    allDay: true
}]);

こんな感じで追加できます。
idは何かセットしないといけないみたいです。

まとめ

カレンダーを簡単に作ることができました。

システム開発

Posted by @erestage