質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.35%

  • JavaScript

    17475questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    6177questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4288questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

縦型カレンダー スクロールで日付計算

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 331

somatech0428

score 3

カレンダーの日付が取れなくて困っています。

$(function(){
'use strict';
var $calendar = $('#calendar');
var myWeekTbl = new Array('日','月','火','水','木','金','土');    // 曜日テーブル定義
var myMonthTbl= new Array(31,28,31,30,31,30,31,31,30,31,30,31);    // 月テーブル定義
var myDate = new Date();
var myToday = myDate.getDate();    // 今日の'日'を退避
var todayMyMonth = myDate.getMonth();    // 月を取得(0月~11月)

function setCalender(l){
myDate = new Date(2018,l);    // 今日の日付データ取得
var myYear = myDate.getFullYear();    // 年を取得
((myYear % 4)===0 && (myYear % 100) !==0) || (myYear % 400)===0 ? myMonthTbl[1] = 29: 28;    // うるう年だったら...
  // 2月を29日とする
var myMonth = myDate.getMonth();    // 月を取得(0月~11月)
myDate.setDate(1);    // 日付を'1日'に変えて、
var myWeek = myDate.getDay();    // '1日'の曜日を取得
var myTblLine = Math.ceil((myWeek+myMonthTbl[myMonth])/7);    // カレンダーの行数
var myTable = new Array(7*myTblLine);    // 表のセル数を用意
for(var i=0; i<7*myTblLine; i++){
  myTable[i]='';    // セルを全て空にする
}
for(i=0; i<myMonthTbl[myMonth]; i++){
myTable[i+myWeek]=i+1;    // 日付を埋め込む
}

var source = '';
var td = '<div class="div-day">';
var tdC = '</div>';

for(i=0; i<myTblLine; i++){    // 表の「行」のループ
  for (var j = 0; j < 7; j++) {
    var mydat = myTable[j+(i*7)];
    if(todayMyMonth === myMonth && mydat === myToday){
      source += '<div class="today" id="today">' + mydat + tdC;
    }else if(j === 0){
      source += '<div class="div-day">' + mydat + tdC;
    }else if(j === 6){
      source += '<div class="div-day sat">' + mydat + tdC;
    }else{
      source += td + mydat + tdC;
    }
  }
}
var weekTr;
var tableSource = '<span class="flag"></span><table class="getid">' + '<tr><td colspan="7">' + myYear + '年' + (myMonth+1) + '月' + '</td></tr>' + source +'</table>';

  $calendar.append(tableSource);    // 表の作成開始
}
for(var l=0; l<99; l++){
  setCalender(l);
}

});

// 空の要素削除
$(function() {
     $("div.div-day:empty").remove();
     $("div.sat-d:empty").remove();
     $("div.sun-d:empty").remove();
});

   //今日の日付データを変数hidukeに格納
   var hiduke=new Date();
   var cale_date = document.getElementById('cale-date');


   //年・月・日・曜日を取得する
   var year = hiduke.getFullYear();
   var month = hiduke.getMonth()-5;
   var week = hiduke.getDay();
   var day = hiduke.getDate();


   $('#cale-date p').text(year + '年' + month + '月');
  <div id="cale-date">
  <div id="calendar">
    <div class="div-day">31</div>
  </div>
  <script src="./js/jquery.inview.min.js"></script>
#calendar div{
    width: 14.28%;
    height: 16vh;
    border-top:1px solid #CCC;
    /* border-left:1px solid #CCC; */
    border-right:1px solid #CCC;
    float: left;
    color: #7b7b7b;
    font-size: 14px;
    padding-top: 8px;
}

#cale-date p{
    position: fixed;
    top: 18px;
    left: 50%;
    font-size: 20px;
    color: #fff;
    transform: translateX(-50%);
    z-index: 9999;
}


レイアウトが崩れていて申し訳ありません。
なんとかこの縦型カレンダーをスクロールしたら日付を計算して、その当月がきたら一ヶ月進む、前月に行ったら一ヶ月戻るというようなものが作りたいです。

cale-dateここの日付の部分です。

ご助力いただけると幸いです。
どうかお願いいたします。

こちらが画像になります。
イメージ説明

■カレンダーの仕様
・当月の6月前からカレンダーを生成(現在は2018年のはじめから生成)、2028年まで生成。
・月と月の間の日にちは開けず、詰めて縦に日にちを表示。
・下にスクロールして次の月を表示させて行く。
・ヘッダー部分に現在表示されている年月を表示させる。
・該当付きに1日がヘッダー部分に隣接したらヘッダー部分の日付が該当月の表示になる。該当月の1日がヘッダー部分から下に離れたら、前月の年月が表示される。
・ページを読み込んだら、現在の日付にリンクさせる

※コード参考元サイト:https://www.frontendmemo.xyz/entry/2017/02/04/044306
※目標アプリ:https://lifebear.com/

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Kosuke_Shibuya

    2018/07/14 15:10

    仕様を簡潔にまとめて質問本文に反映してください。

    キャンセル

  • somatech0428

    2018/07/14 15:46

    申し訳ありません。まだコーダー初心者なので、まとめられるかわかりませんが・・・追記してみます。

    キャンセル

  • Kosuke_Shibuya

    2018/07/14 15:47 編集

    この欄は、「質問への追記・修正の依頼」とタイトルにあるように、要件を追記する場所ではないのです。 プログラミングの初心者でも、「質問することの初心者」ではないと思います。

    キャンセル

回答 1

checkベストアンサー

0

まだまだプロダクトレベルの品質ではないと思うけど、参考程度に。

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #wrap {
                width: 280px;
                margin: 0 auto;
            }
            #calendar {
                border: 1px solid #F88;
                height: 197px;
                overflow-y: scroll;
            }
            #calendar table {
                border-collapse: collapse;
            }
            #calendar table th,
            #calendar table td {
                border: 1px solid #CCC;
                text-align: center;
                width: 2em;
            }
            #calendar table tr > td:first-child,
            #calendar table thead tr:last-child > th:first-child {
                background-color: #EEF;
            }
            #calendar table tr > td:last-child,
            #calendar table thead tr:last-child > th:last-child {
                background-color: #FEE;
            }

        </style>
    </head>
    <body>
        <div id="wrap">
            <p>----/--</p>
            <div id="calendar">

            </div>
        </div>
        <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">

            var data = [];

            function displayYM(y, m) {
                $('#wrap p').text(y + '年' + (m + 1) + '月');
            }

            /**
             * カレンダーを作る
             * @param {int} y 年
             * @param {int} m 月(0-11)
             * @param {int} y_end 年
             * @param {int} m_end 月(0-11)
             */
            function getCalendar(y, m, y_end, m_end) {
                displayYM(y, m);

                var first_dt_current = new Date();
                first_dt_current.setFullYear(y);
                first_dt_current.setMonth(m);
                first_dt_current.setDate(1);
                var first_day_week = first_dt_current.getDay(); // ○月1日の曜日

                // 1日を含む週の日曜日を取得
                first_dt_current.setDate(first_dt_current.getDate() - first_day_week);

                var next_dt = new Date();
                next_dt.setFullYear(y_end);
                next_dt.setMonth(m_end + 1);
                next_dt.setDate(1 + (6 - next_dt.getDay()));

                var table = $('<table>');
                var tbody = $('<tbody>').appendTo(table);

                while (first_dt_current < next_dt) {

                    // 日曜日なら行をたす
                    if (first_dt_current.getDay() === 0) {
                        var tbody_tr = $('<tr>').appendTo(tbody);
                    }
                    $('<td>').text(first_dt_current.getDate()).appendTo(tbody_tr);
                    if (first_dt_current.getDate() === 1) {
                        tbody_tr.addClass('has-first')
                                .data({
                                    y: first_dt_current.getFullYear(),
                                    m: first_dt_current.getMonth()
                                });
                    }

                    // 1日たす
                    first_dt_current.setDate(first_dt_current.getDate() + 1);
                }
                $("#calendar").append(table).find('tr.has-first').each(function (i, obj) {
                    data.push({
                        position: $(this).position().top - $("#calendar").position().top - 2,
                        y: $(this).data('y'),
                        m: $(this).data('m')
                    });
                });
            }

            $(function () {
                getCalendar(2017, 0, 2018, 11);

                $("#calendar").on('scroll', function (e) {
                    var scrl = $(this).scrollTop(); // #calendar のTOP
                    for (var i = 0; i < data.length; i++) {
                        if (i > 0 && scrl < data[i].position) {
                            var y = data[(i - 1)].y;
                            var m = data[(i - 1)].m;
                            displayYM(y, m);
                            break;
                        }
                    }
                });
            });
        </script>
    </body>
</html>

                while (first_dt_current < next_dt) {

                    // 日曜日なら行をたす
                    if (first_dt_current.getDay() === 0) {
                        var tbody_tr = $('<tr>').appendTo(tbody);
                    }

                    var td = $('<td>').text(first_dt_current.getDate()).appendTo(tbody_tr);
                    var today = new Date();
                    if (today.getFullYear() === first_dt_current.getFullYear() &&
                            today.getMonth() === first_dt_current.getMonth() &&
                            today.getDate() === first_dt_current.getDate()
                            ) {
                        td.addClass('today');
                    }

                    if (first_dt_current.getDate() === 1) {
                        tbody_tr.addClass('has-first')
                                .data({
                                    y: first_dt_current.getFullYear(),
                                    m: first_dt_current.getMonth()
                                });
                    }

                    // 1日たす
                    first_dt_current.setDate(first_dt_current.getDate() + 1);
                }

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/14 18:29

    大変ありがとうございます!!
    さっそく当てはめさせていただきます!!

    キャンセル

  • 2018/07/14 18:31 編集

    プロダクトレベルじゃないって言ってるじゃないの。
    コピペしてはるだけならこんなめんどくさいことしたくないんだわ。
    コード書いてくれという依頼じゃん…

    キャンセル

  • 2018/07/14 18:40

    もちろん参考にさせていただくという意味です!
    ありがとうございます!!

    キャンセル

  • 2018/07/14 20:10

    すみません・・・
    図々しい発言かと思いますが、当日の日付はどうすれば判定できますでしょうか・・・

    キャンセル

  • 2018/07/14 22:39

    申し訳ありません・・・
    作りがまだ良くわからなくて

    キャンセル

  • 2018/07/14 22:41

    当日って実行している日付のこと?

    キャンセル

  • 2018/07/14 22:46

    そうです!
    実行している日付にidを付与したいです!

    キャンセル

  • 2018/07/14 22:48 編集

    当日という意味合いならそこにidつけるのはおかしい。idってただ一つのものを特定するものだし、性質を表すものなら、classでしょう。
    アクセスした日によって id が移動するのは不自然。

    キャンセル

  • 2018/07/14 22:50

    while の中で、td に 'today' とでもつければOK。
    似たような処理しているところあるので、そこを参考に。

    キャンセル

  • 2018/07/14 22:57

    繰り返し構文の中で条件式を作ろうと考えたのですが・・・

    var myDate = new Date();
    var myToday = myDate.getDate();
    var todayMyMonth = myDate.getMonth(); // 月を取得(0月~11月)
    var myMonth = myDate.getMonth(); // 月を取得(0月~11月)

    if(todayMyMonth === myMonth && 7 === myToday){
    $('td').addClass('today');

    }

    勉強不足で見つけられず、このようなものを追記したのですがうまくいきませんでした。

    キャンセル

  • 2018/07/14 23:02

    検索して見つかったコードの処理内容を理解しようとしています?
    それどう考えても条件おかしいでしょ。

    年月日それぞれが一致していないといけないのに、条件が二つしかないし。
    $('td') というセレクタじゃ、<td> 全てにclass が付与されてしまう。

    キャンセル

  • 2018/07/14 23:10

    すみません。
    条件式は正直、理解できていませんでした。
    セレクタは$('td')ではなく、<td class="today">を直接挿入するかたちになるのでしょうか。

    キャンセル

  • 2018/07/14 23:13

    > セレクタは$('td')ではなく、<td class="today">を直接挿入するかたちになるのでしょうか。

    「試しにやってみる」ことを繰り返しやることが理解の助けになると思います。どうせ人に聞いてさらっと終わらせてしまえばそれっきりですが、スクラップ&ビルドを繰り返すことが一番身につく。

    回答は追記しておいたけど、あえて見ないでやってみるのもいいんじゃない?

    キャンセル

  • 2018/07/14 23:23

    はい!あたって砕けて勉強いたします。
    ありがとうございます!!

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    17475questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    6177questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4288questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。