javascriptを使ったWEBカレンダー(設置サンプル3種)

javascriptを使ったWEBカレンダー(設置サンプル3種)

javascriptを使ったWEBカレンダー(設置サンプル3種)

javascriptとCSSを組み合わせた標準WEBカレンダーを実装する方法をご紹介しています。

javascriptを導入する際コピペしただけでは動かないサンプルもありますので、注意が必要です。

カレンダーを構成する全ての箇所を自由にカスタマイズしてみる事がマスターへの近道だと思います。

標準の基本的なJavaScriptカレンダー

ページ上に月間カレンダーをレンダリングするためのシンプルなJavaScriptライブラリです。

表示・機能としても申し分ありませんし、導入も非常に簡単でシンプルな一押しのカレンダー機能です。

月間カレンダーの導入方法

スタイルシートcalendar.cssをheaderタグ内に追加します。

<link rel="stylesheet" href="css/calendar.css">

HTMLソース

カレンダーのHTMLを作成します。

<div class="container-calendar"> <h4 id="monthAndYear"></h4> <div class="button-container-calendar"> <button id="previous" onclick="previous()">‹</button> <button id="next" onclick="next()">›</button> </div> <table class="table-calendar" id="calendar" data-lang="ja"> <thead id="thead-month"></thead> <tbody id="calendar-body"></tbody> </table> <div class="footer-container-calendar"> <label for="month">日付指定:</label> <select id="month" onchange="jump()"> <option value=0>1月</option> <option value=1>2月</option> <option value=2>3月</option> <option value=3>4月</option> <option value=4>5月</option> <option value=5>6月</option> <option value=6>7月</option> <option value=7>8月</option> <option value=8>9月</option> <option value=9>10月</option> <option value=10>11月</option> <option value=11>12月</option> </select> <select id="year" onchange="jump()"></select> </div> </div> <script src="js/calendar.js" type="text/javascript"></script>

上記の様にカレンダー構成タグの下で、javascriptコードを設置しましょう。

CSSファイル(calendar.css)

.wrapper { margin: 15px auto; max-width: 700px; } .container-calendar { background: #ffffff; padding: 15px; width: 100%; margin: 0 auto; overflow: auto; } .button-container-calendar button { cursor: pointer; display: inline-block; zoom: 1; background: #00a2b7; color: #fff; border: 1px solid #0aa2b5; border-radius: 4px; padding: 5px 10px; } .table-calendar { border-collapse: collapse; width: 100%; } .table-calendar th, .table-calendar td{ padding: 10px; border: 1px solid #e2e2e2; text-align: center; vertical-align: top; } .date-picker.selected { font-weight: bold; color: #fff; background: #cc0000; } .date-picker.selected span { border-bottom: 2px solid currentColor; } /* 日曜 */ .date-picker:nth-child(1) { color: red; } /* 土曜 */ .date-picker:nth-child(7) { color: blue; } #monthAndYear { text-align: center; margin-top: 0; } .button-container-calendar { position: relative; margin-bottom: 1em; overflow: hidden; clear: both; } #previous { float: left; } #next { float: right; } .footer-container-calendar { margin-top: 1em; border-top: 1px solid #dadada; padding: 10px 0; } .footer-container-calendar select { cursor: pointer; display: inline-block; zoom: 1; background: #ffffff; color: #454545; border: 1px solid #bfc5c5; border-radius: 3px; padding: 5px 1em; }

JSコード(calendar.js)

function generate_year_range(start, end) { var years = ""; for (var year = start; year <= end; year++) { years += "<option value='" + year + "'>" + year + "</option>"; } return years; } var today = new Date(); var currentMonth = today.getMonth(); var currentYear = today.getFullYear(); var selectYear = document.getElementById("year"); var selectMonth = document.getElementById("month"); var createYear = generate_year_range(1970, 2200); document.getElementById("year").innerHTML = createYear; var calendar = document.getElementById("calendar"); var lang = calendar.getAttribute('data-lang'); var months = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]; var days = ["日", "月", "火", "水", "木", "金", "土"]; var dayHeader = "<tr>"; for (day in days) { dayHeader += "<th data-days='" + days[day] + "'>" + days[day] + "</th>"; } dayHeader += "</tr>"; document.getElementById("thead-month").innerHTML = dayHeader; monthAndYear = document.getElementById("monthAndYear"); showCalendar(currentMonth, currentYear); function next() { currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear; currentMonth = (currentMonth + 1) % 12; showCalendar(currentMonth, currentYear); } function previous() { currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear; currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1; showCalendar(currentMonth, currentYear); } function jump() { currentYear = parseInt(selectYear.value); currentMonth = parseInt(selectMonth.value); showCalendar(currentMonth, currentYear); } function showCalendar(month, year) { var firstDay = ( new Date( year, month ) ).getDay(); tbl = document.getElementById("calendar-body"); tbl.innerHTML = ""; monthAndYear.innerHTML = months[month] + " " + year; selectYear.value = year; selectMonth.value = month; // creating all cells var date = 1; for ( var i = 0; i < 6; i++ ) { var row = document.createElement("tr"); for ( var j = 0; j < 7; j++ ) { if ( i === 0 && j < firstDay ) { cell = document.createElement( "td" ); cellText = document.createTextNode(""); cell.appendChild(cellText); row.appendChild(cell); } else if (date > daysInMonth(month, year)) { break; } else { cell = document.createElement("td"); cell.setAttribute("data-date", date); cell.setAttribute("data-month", month + 1); cell.setAttribute("data-year", year); cell.setAttribute("data-month_name", months[month]); cell.className = "date-picker"; cell.innerHTML = "<span>" + date + "</span>"; if ( date === today.getDate() && year === today.getFullYear() && month === today.getMonth() ) { cell.className = "date-picker selected"; } row.appendChild(cell); date++; } } tbl.appendChild(row); } } function daysInMonth(iMonth, iYear) { return 32 - new Date(iYear, iMonth, 32).getDate(); }

標準カレンダーサンプル例

JavaScriptによるシンプルなイベントカレンダー

JavaScriptで定義されたカスタムイベントをサポートするカレンダーです。

WEBページ上にイベント設定が可能なインラインカレンダーを生成する事ができます。

イベントカレンダーの設置方法

読み込むのはCSSファイルと、caleandar.js・demo.jsです。

headerで読み込むCSS

<link rel="stylesheet" href="css/theme.css">

HTMLタグ

空のdivコンテナを作成します。この中にカレンダーが展開されます。

<div id="caleandar"></div>

body終了タグ付近へ下記を設置します。

<script type="text/javascript" src="js/caleandar.js"></script> <script type="text/javascript" src="js/demo.js"></script>

ファイル名について

紹介しているファイルは名前が「caleandar.js」になっています(aが多い)。

本記事では別サンプルで「calendar.js」を既に使っているのであえて別名にしています。

CSSファイル

.cld-main{ width: 100&; } .cld-main a{ color: #0080FF; } .cld-main svg{ fill: #0080FF; } .cld-datetime{ position: relative; padding: 20px 0px; max-width: 500px; margin: auto; overflow: hidden; } .cld-datetime .today{ position: relative; float: left; width: calc(100% - 40px); margin: auto; text-align: center; } .cld-nav{ position: relative; width: 20px; height: 20px; margin-top: 2px; } .cld-nav:hover{ cursor: pointer; } .cld-nav:hover svg{ fill: #005EFF; } .cld-rwd{ float: left; } .cld-fwd{ float: right; } .cld-labels, .cld-days{ padding-left: 0; } .cld-label, .cld-day{ box-sizing: border-box; display: inline-block; width: 14.28%; text-align: center; } .cld-day{ border: 1px solid #eee; } .cld-day.today .cld-number{ background: #0080FF; color: #fff; } .cld-day.disableDay{ opacity: 0.5; } .cld-day.nextMonth, .cld-day.prevMonth{ opacity: 0.33; } .cld-number{ position: relative; margin: 0; padding: 10px; } .cld-title{ position: absolute; z-index: 5; display: none; top: 35px; left: 0; padding: 5px 10px; background: #fff; white-space: nowrap; border: 1px solid #ccc; border-radius: 5px; font-size: 18px; } .cld-number:hover .cld-title{ display: block; } .cld-title::before{ content: ''; position: absolute; top: -7.5px; left: 10px; width: 0; height: 0; border-left: 7.5px solid transparent; border-right: 7.5px solid transparent; border-bottom: 7.5px solid #ccc; } .cld-number.eventday{ font-weight: bold; color: #0080FF; } .cld-number.eventday:hover{ cursor: pointer; background: #eee; } .today .cld-number.eventday:hover{ background: #005EFF; }

JSファイル

リンク:caleandar.js

リンクファイルを参照下さい。

ポップアップ部分のデザイン変更

上記caleandar.jsの242行目にある下記コードがイベントが表示された時のポップアップ部分です。

<a href="' + calendar.Model[n].Link + '">' + calendar.Model[n].Title + '</a>

ここにタグを追加したりクラス名などを入れれば、CSSでデザイン装飾ができます。

イベントの設定方法

demo.jsファイル内に、カレンダーの任意の日付で表示させたいイベント内容を設定できます。

日付と内容はご自身の予定に合わせて下さい。

demo.jsファイル

var events = [ {'Date': new Date(2020, 6, 7), 'Title': '資格取得セミナー午後2時からセンタービル'}, {'Date': new Date(2020, 6, 18), 'Title': '●●イベント開催', 'Link': 'https://yahoo.co.jp/'}, {'Date': new Date(2020, 6, 27), 'Title': '〇〇企画創業20周年記念', 'Link': 'https://www.google.com/'}, ]; var settings = {}; var element = document.getElementById('caleandar'); caleandar(element, events, settings);

イベントの開始月について

上記コードで注意いただきたいのが、javascriptのAPIではイベントを作成する月は「0」からカウントする仕様になっています。

ですので例えば7月に設定をしたい場合は、1つ少なくして「6」でスタートする必要があります。

1月の場合は「0」を入れる事になりますので注意して下さい。

さらに作成したdivコンテナ内にイベントカレンダーを生成します。

イベント表示カレンダーサンプル例

イベント表示カレンダーサンプル例
スマホ版ではサンプル例を画像表示しています。

上記サンプルでは2020年7月にイベントが入っています。

日付が青いマスにマウスを合わせると、ポップアップでイベント内容が表示されます。

ポップアップのテキストはWEBページurlへリンクする事ができます。

日付の入力フォームカレンダー

フォーム上にカレンダーからクリックした日付が自動入力されるシステムです。

例えば日付予約の入力フォームや、ホテル予約アプリケーションの日付(範囲)を入力する際などに利用できますね。

日付の入力フォームカレンダーの導入方法

以下をheaderタグに挿入します。

<script src="js/s_calendar.min.js"></script> <link rel="stylesheet" href="css/s_calendar.min.css">

HTMLソース

次のように、2つの日付の入力フォームを作成します。

<input type="text" id="checkin" class="salsa-calendar-input" autocomplete="off" name="到着" value=""> <input type="text" id="checkout" class="salsa-calendar-input" autocomplete="off" name="出発" value=""> 日数:<span id="nights-no"> <span class="counter"></span> <span class="singular" style="display:none;">日間</span> <span class="plural" style="display:none;">日間</span> </span>

HTMLソース直下のJSコード

下記のコード部分を<script></script>の中に入れてhtml内のフォーム箇所の下に記述して下さい。

日付カレンダーを初期化します。

<script> var calendar_from = new SalsaCalendar({ inputId: 'checkin', lang: 'en', range: { min: 'today' }, calendarPosition: 'right', fixed: false, connectCalendar: true }); var calendar_to = new SalsaCalendar({ inputId: 'checkout', lang: 'en', range: { min: 'today' }, calendarPosition: 'right', fixed: false });

これら2つの日付入力間の接続を設定し、ユーザーが選択した日数の合計を出力します。

上の続き new SalsaCalendar.Connector({ from: calendar_from, to: calendar_to, maximumInterval: 21, minimumInterval: 1 }); new SalsaCalendar.NightsCalculator({ from: calendar_from, to: calendar_to, nightsNo: 'nights-no' }); </script>

CSSファイル(s_calendar.min.css)

リンク:s_calendar.min.css

リンクファイルをご参照下さい。

JSコード(s_calendar.min.js)

リンク:s_calendar.min.js

リンクファイルをご参照下さい。

入力フォーム(カレンダーピッカー)サンプル例


日数: 日間 日間

フィールドにマウスを当てるとカレンダーが表示され、日付をクリックするとフィールド上に代入されます。

両方の日付の間を計算して宿泊日数が表示されます。

入力補助カレンダーとしても大活躍

今回のサンプルはNightsCalculatorで両方の日付間を計算していますが、この部分は使わなくてもカレンダーは機能します。

上記から日数計算の部分をごっそり省いても、WEB来店予約フォームのサポートに使えますね。

javascriptを設置する際の注意

「Uncaught TypeError: Cannot read property '' of null」系のエラーが出る場合

headerで読込をしていて下記の様なエラーが出る場合は、jsファイルの読込を</body>の直前でおこないましょう。

headerで読込をすると、その時点ではbodyタグ内の内容を把握していない状態のためこのようなエラーが出る場合があります。

この場合は全て読込が終了した</body>終了タグ付近でjsファイルを読み込むと把握されるのでエラーが解消されます。

letよりもverを使う事

これは「javascript カレンダー」などのキーワードで、今検索上位表示されているWEBサイトで紹介されたjsコードによくあります。

このままコピペして使っても、シンタックスエラーが出る事が多いです。

原因:letが並んでいるコードのため

「let」は連続で使う事ができないので、jsコード内に「let」が並んでいる場合は全て「var」に変更しましょう。

javascriptカレンダーの掲載コードに使われている「let」の箇所を探して、そこだけ「var」書き換えてあげると良いです。

jsファイル内に日本語を記述した場合は文字コードを揃える

基本的にjsファイル内はutf8で書かれています。

jsファイル内に日本語の記載をした場合は、その文字コードとHTML内の文字コードを揃えておかないと文字化けをする事になります。

HTML内の文字コードを揃えるか、或いは下記の様に文字コード設定をする必要があります。

<script type="text/javascript" src="app.js" charset="utf-8"></script>

まとめ

以上いくつかのサンプルを元にjavascriptで簡単に実装できるWEBカレンダーをご紹介しました。

単にコピペしてももちろん表示できるものばかりですが、やはり中身の構造を知る事がjavascript上達の近道です。

まずはcssのクラス名を変更して、それにjavascript側を対応させる所から始めてみてはいかがでしょうか。

この記事をシェアする

一押し人気コーナー紹介

CSS関連記事