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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

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

Q&A

解決済

2回答

3073閲覧

Googleカレンダーみたいに作りたい。

manabunbun

総合スコア39

HTML5

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

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

0グッド

1クリップ

投稿2016/08/23 00:38

###前提・実現したいこと
Oracle+php+jqueryでGoogleカレンダーと同じ動作をする様なシステムを作成しています。
日付エリアの白い部分をクリックすると入力画面が表示され、すぐにそのリストが日付エリア内に
反映されるというものです。
更新と削除は、リストをクリックすると更新削除用の画面が表示されるというものです。

###発生している問題・エラーメッセージ
白い部分をクリックしても、何も反応がありません。
日付の部分をクリックしないと入力画面がポップアップしません。

エラーメッセージ

###該当のソースコード

コード <!doctype html> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <link href="./css/bootstrap.css" rel="stylesheet" /> <link href="./css/magnific/magnific-popup.css" rel="stylesheet" /> <link href="./css/tanemaki.css" rel="stylesheet" /> </head> <body> <div class="container"> <ul id="movemonth"> <li>&lt;</li> <li>&gt;</li> <li>月</li> </ul> <table class="table"> <thead> <tr> <th>日</th> <th>月</th> <th>火</th> <th>水</th> <th>木</th> <th>金</th> <th>土</th> </tr> </thead> <tbody> <tr> <td>&nbsp;</td> <td data-day=20160801 class="td"> <a href="tanemaki/tanemakidatainput/20160801/" class="inputlink1">1 <ul class="list"> <li><a href="tanemaki/tanemakidatainput/20160801/">ああああああああ</a></li> <li><a href="tanemaki/tanemakidatainput/20160801/">ああああああああ</a></li> <li><a href="tanemaki/tanemakidatainput/20160801/">ああああああああ</a></li> <li><a href="tanemaki/tanemakidatainput/20160801/">全て見る</a></li> </ul> </a> </td> <中略> <script src="./js/jquery-2.2.3.min.js"></script> <script src="./js/bootstrap.js"></script> <script src="./js/jquery.magnific-popup.js"></script> <script> $('.inputlink1').magnificPopup({ type:'iframe', alignTop:true, overflowY:'scroll', focus:'#hincd' }); </script> </body>![イメージ説明](308b716da758a6a3bb53bdf8c484455d.png) </html> --CSS(.scssファイル)-- /*テーブルデザイン*/ table.table { td { border:solid 1px #eeeef1; height:$tdheight; width:120px; a.inputlink{ display:box; width:100%; height:100%; z-index:1; position:relative; text-decoration:none; } .list{ position:absolute; margin-top:0; margin-left:0; z-index:2; list-style-type:none; } } }

###試したこと
aリンクをtdエリア内全体にかかるようにできたのですが、リストの部分が、下側にずれて、8日の部分の中に入ってしまったりしました。リストの部分を上に重なるようにできればよいのかなと思っています。

###補足情報(言語/FW/ツール等のバージョンなど)
html5
jquery-2.2.3
Bootstrap3.3.6
php7+Smarty
使用

よろしくお願いします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/08/23 01:09

scssではなく出力されたCSSを提示いただいたほうが回答しやすいと思います。
guest

回答2

0

自己解決

kei344さんご回答ありがとうございました。

言われた通りfullcalendarを試してみたのですが、カレンダーは表示されるのですが、日付のエリア(白い部分)をクリックしてもイベントが発生しませんでした。Demoプログラムは、発生していましたが。多分何か設定が悪いんだと思います。
登録したデータを表示させるのに、どこに記述すれば良いのか分からなくなったのでfullcalendarは諦めました。

日付エリアの白い部分をクリックしてポップアップ画面を表示させることは、諦めて「新規入力」という行を作成することにしました。

html一部抜粋

<table class="table"> <thead> <tr> <th>日</th> <th>月</th> <th>火</th> <th>水</th> <th>木</th> <th>金</th> <th>土</th> </tr> </thead> <tbody> <tr> <td>&nbsp;</td> <td data-day=20160801 class="td"> <div class="panel"> <div class="link"> <a href="tanemaki/tanemakidatainput/20160801/" class="inputlink1">1</a> </div> <div class="link"> <a href="tanemaki/tanemakidatainput/20160801/" class="newinput">新規入力</a> </div> <div class="link1"><a href="tanemaki/tanemakidatainput/20160801/" class="inputlink1"><span>■</span>A2 ああああ 34</a></div> <div class="link1"><a href="tanemaki/tanemakidatainput/20160801/" class="inputlink1"><span>■</span>A2 ううううううううう 56</a></div> <div class="link"><a href="tanemaki/tanemakidatainput/20160801/" class="inputlink1"><span>■</span>全て見る</a></div> </div> </td>

css

table.table td .panel {
display: flex;
flex-direction: column;
}
table.table td .panel .link1 {
font-size: 0.5em;
}
cssの件は、どちらが良いか迷ったので失礼しました。

本当は、fullcalendarを使用したほうが良いのでしょうが、使用せずに何とか自作して作成していこうという方針に決めました。

ありがとうございました。

投稿2016/08/25 06:28

manabunbun

総合スコア39

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

とりあえず指摘しておきます。

  1. a要素を入れ子に出来ない(a要素にa要素を入れることは出来ない)
  2. 予定が多ければ当然はみ出す
  3. display: box;は現在使われていないはず

【a 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/a

許可された内容 フローコンテンツ (インタラクティブコンテンツを除く)

【CSSのdisplay: box;ってどうなったんだっけ問題 - 俺、サービス売って家買うんだ】
http://www.ie-kau.net/entry/2015/08/04/CSSのdisplay%3A_box%3Bってどうなったんだっけ問題

とりあえず「はみ出さない」サンプル:https://jsfiddle.net/pzbLpy8j/1/


「Googleカレンダーと同じ動作をする様なシステム」なら、FullCalendarをカスタマイズするのが近道な気がします。

【FullCalendar - JavaScript Event Calendar (jQuery plugin)】
http://fullcalendar.io/

残念ながら標準では「ポップアップで編集」などは付いていませんが、比較的簡単にイベントが追加できる仕組みが整っています。

【dayClick - Documentation | FullCalendar】
http://fullcalendar.io/docs/mouse/dayClick/

投稿2016/08/23 01:42

編集2016/08/23 02:26
kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/08/23 02:13

ああすいません、a要素にa要素が入れ子になっているので、それを指摘したつもりでした。 書き換えておきます。
chiro.0519

2016/08/23 02:23

あ そうだったんですね。 すみません蛇足コメントしてしまって・・・
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問