HTMLでカレンダーを表示する方法とは【メンターが回答】

「HTMLでカレンダーを表示する方法とは。」という質問にTechAcademyの現役エンジニアが解決方法を回答しています。input type="date"とイベントハンドラの使い方をぜひ理解しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました。

 

田島悠介

質問に対して現役のエンジニアが回答していくシリーズだね!

大石ゆかり

今回はどういう質問でしょうか?

田島悠介

HTMLでカレンダーを表示する方法だね!実際に回答してもらった内容を紹介するね!

大石ゆかり

お願いします!

質問

HTMLでx年x月x日のカレンダーを表示し、日付をクリックしたら別リンクに飛ぶようにしたいと思っているのですが、どう書けば良いのでしょうか?

 

メンターからの回答

カレンダーを表示するには <input type=”date”> が単純です。これにイベントハンドラなどを追加して、「日付が選択されたら何かしらの処理を行う」という処理は以下のように書くことができます。

<html>
  <head>
    <script>
      function displaySomething(e) {
        var date = e.target.value
        alert('日付 ' + date + ' が選択されました。例えばここの処理を書き換えて画面遷移などさせましょう')
      }
    </script>
  </head>
  <body>
    <input type="date" value="2018-08-08" onchange="displaySomething(event)">
  </body>
</html>

Google カレンダーのように画面に常に広くカレンダーを表示したいのであれば、「FullCalendar」などのライブラリを使用するのもいいかと思います。

 

関連情報

FullCalendarを使ってカレンダーを表示する方法

https://techacademy.jp/magazine/9485

 

以上、HTMLでカレンダーを表示する方法について解説しました。

TechAcademyでは、現役HTML/CSSエンジニアのメンターが質問にすぐ回答します。

他にもPHPとHTMLをまとめてコメントアウトする方法をメンターが回答しているので、合わせてご覧ください。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

回答してくれたメンター

鵜澤 峻平(うさわしゅんぺい)

現在はフリーランスのエンジニアをしていてプログラミング歴は5年目になります、普段は Rails、Laravel、Node.js等を使って Web、モバイルアプリケーションを作成しています。開発実績としては、いくつかの Web サービス、コンシューマー向けモバイルアプリケーション、NPO サイトリニューアル、ロボット用プログラムなどがあります。

TechAcademyでメンターをはじめたのは、「プログラミングでやりたいことがある人を応援したい」、「講師と受講者が話し合って学び方を決めていく」に惹かれたからです。

 

田島悠介

HTMLでカレンダーを表示する方法について解説したよ。

大石ゆかり

本格的なカレンダーはHTMLだけでは難しいですか。

田島悠介

JavaScriptなどのプログラミング言語を使わないと厳しいね。

大石ゆかり

わかりました。ありがとうございます!

 

また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

CSSの書き方やWebデザインのスキルなど基礎から学ぶことができます。

独学に限界を感じている場合はご検討ください。