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

このQ&Aのポイント
  • datepickerを使ってカレンダーを表示する方法について解説します。
  • カレンダーの装飾設定や日本語化の方法も紹介します。
  • 画像付きカレンダーの表示や要素のカスタマイズも可能です。
回答を見る
  • ベストアンサー

datepickerを使ってカレンダーを表示出来た

datepickerを使ってカレンダーを表示出来たのですが、そのカレンダーを付属画像の右側にある カレンダーのようにしたいです。大まかで構いません。 コードは共有サイトwandleboxで下のURLにあります。 styleタグ内のcssにて 「/* カレンダーの装飾設定 */」にて曜日の日付などは赤や青で表示されるようにコード書いています。 付属画像のように普通の日にちの数字を四角くして、背景に色を付けたいです。また、<前次>という 文字を消去して、その下にある2021年と12月のセレクトボックスに色を付けたいです。 大まかで構いません。どうコードを書いたらよいでしょうか? 回答よろしくお願いいたします。 scriptタグ内で「// カレンダーを日本語化します。以下。」でカレンダーを日本語化しています。 ソースコード共有サイト https://wandbox.org/permlink/QhIxDZ8RwQ3smiOb

  • CSS
  • 回答数2
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • dell_OK
  • ベストアンサー率13% (740/5646)
回答No.1

日にちの四角については、こちらでスタイルシートを読み込んでみてください。 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> こちらを参考にしました。 https://www.fenet.jp/dotnet/column/engineers/6618/

hayosat
質問者

お礼

ありがとうございました

その他の回答 (1)

回答No.2

細かい調整以前に そもそも、jquery-ui.cssを読み込んでないので ベースとなる表示さえできてない状態ですね。 datepickerの導入を参考にしたサイトをよくみて <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script> の下にでも <link rel="stylesheet" href="{参考にしたサイトに書いているjquery-ui.cssのURL}"> を入れる必要があります。

hayosat
質問者

お礼

ありがとうございました

関連するQ&A

  • googleカレンダーの表示について

    スマホで友人たちとグループを作り、 googleカレンダーで予定の共有をしようと思います 友人たちのカレンダーは予定が(画像1)のように表示されるのですが 私のカレンダーは(画像2)のようになります 私のは色も選択できませんので 重要度などの色分けをしたくてもできません もしかしたらバージョンが違うのかもしれませんが 変更の方法もわかりません 友人たちのように表示する方法がおわかりの方、 助けてください 私のスマホはAndoroid5.1です

  • WordPressの質問(q10093310)の続

    スタンプ画像を送信する機能をデータベースに格納したいのですが、格納した数字と画像URLを結び付ける方法が分かりません。 アドバイスお願い致します。 ※最新のコード https://wandbox.org/permlink/A4VLYzAR2h4uYYRh

    • ベストアンサー
    • PHP
  • Googleカレンダーが妻と双方向で共有できない

    夫の私はノートPCとスマホで共に同じGmailアドレスでGoogleカレンダーを利用しています。 したがって、ノートPCで記入しても、スマホで変更しても双方向で内容が反映されます。 また、私のノートPC(Win10)のGoogleカレンダーの設定には「共有」があるので、「特定のユーザーと共有」に妻のGmailアドレスを明記して「変更および共有の管理権限」を付加しています。 妻のタブレット(Andoroid4.2.2)には、私が書き込んだGoogleカレンダーを見ることはできますが、そのGoogleカレンダーに妻が書き込んだり変更したりしても、私のノートPCのGoogleカレンダーには反映されません。妻のタブレットのGoogleカレンダーの設定には「共有」という項目はありませんが、設定-全般に妻のGmailアドレスを入力し、その下の項目の「予定」と「リマインダー」に妻の好みの色を、そして更にその下には私のGmailアドレスを入力しています。 Googleカレンダーを私と妻で完全に共有して、互いに(双方向で)スケジュールを書き・変更することはできないでしょうか? よろしくお願いします。

  • ペイントで表示された色を表す記号を調べたい

    ウインドうぞ付属のペイントで画像を作っています。 この画像に使った色をサイトでの表示にしたいのですが、6けたの# のコードがわかりません。 ペイントの色の編集 では 赤R 255     緑G 251   青U 251 なのです。 #から始まる6けたの記号を入れたらこの色になる、というサイトはたくさんあるのですが、 数字三つを入れて、#の記号に変換されるのが見つかりません。 キーワードがあってないのかもしれません。 カラーコード ペイント 色 数字 10進法 16進法 変換 表示 こういうキーワードで探してるのですが、見つけきれません。 #のコードを調べるサイトのようなものを。ご存知の方、何かキーワードがわかる方、教えてください。

  • googleカレンダーの利用

    Googleカレンダーを自身で制作したHPに導入したいのですが、具体的な導入方法がわかりません。googleの開発ガイドを参照したのですが英語版のページしか見つかりません。 http://code.google.com/intl/ja/apis/calendar/developers_guide_protocol.html 日本語で解説されたページ、本等の情報がありましたら教えて下さい。

  • 画像を表示するための一番適切なタグは何?

    (例) <div id="TOP">空</div> <div id="MID">たくさんのコンテンツ</div> <div id="BTM">空</div> #TOPは背景画像の一番上 #MIDは真ん中の画像をリピートさせる #BTMは背景画像の一番下 このような組み合わせでページを作成したいことがあります。 例えばこのOKWaveの質問欄の灰色の部分です。(PC版) 記載したコードではdivタグを使用していますが divタグは要素のグループ化に用いるものなので向いていないと思います。 pタグは1つの段落を示すのでそれも不向きかなと・・・ そんなこんな考えていたら意味のない装飾のためだけの画像を入れるのに向いているタグってないんじゃないかな?って思えてきました。 皆さまのご意見をお聞かせ下さい。

    • ベストアンサー
    • HTML
  • 日本語表示のホームページをアジアで見るためには?

    当方IBMホームページビルダーでサイトを作成しましたが、日本語表示のサイトであるためか韓国・香港・台湾からそのホームページへアクセスしても日本語部分が文字化けしています。 画像は見れますが、日本語テキスト部分がすべて文字化けしているのです。 この問題を解消するための技術を教えていただけませんか? サイト内に何か特別のタグが必要でしょうか。

  • WordPressの質問(q10245849)の続

    回答が遅れてしまい申し訳ありません、こちらが最新の質問になります。 質問入力画面に画像をアップロードした場合と動画をアップロードした場合で大きさが変わってしまうのですが、統一することは可能でしょうか? こちらは以前 dell_ok さんにお聞きした覚えがあり難しいとアドバイスを頂いた記憶があるのですが… 質問入力画面にファイルをアップロードする場合クリックして選択する方法だけでなくドラッグ&ドロップも追加することは可能でしょうか? ※最新コード https://wandbox.org/permlink/IM6IiiwxaS6eXwXY

  • WordPressの質問(q10187929)の続

    blob を使いファイルアップロード機能を考えてみたのですが、画像と動画をどのように識別させるのかが分かりませんでした。 データ URI 形式で表示する方法と、Blob URL で表示する方法の2種類があるようです。 Data URI で動画を表示する方法は対応ブラウザの関係で避けた方が良いと思っております。 アドバイスお願い致します。 ※blob.php にコードを追加いたしました。 ※最新コード https://wandbox.org/permlink/PSXWslcYugaPqtjK ※参考サイト https://mixltd.jp/blog/how_to_make_thumbnail_from_input_video/ https://lab.syncer.jp/Web/JavaScript/Snippet/17/ https://qiita.com/azu369yu/items/8998e1e1536a5acfb7b3

    • ベストアンサー
    • PHP
  • iPodTouchにGoogleカレンダーを同期したいのですが・・・

    現在、Googleカレンダーで予定を管理しています。 iPodTouchのカレンダーと同期させて、いつでもどこでも見れるようにしたいのですが、何か良い手段はないでしょうか? 当方、PCはWindows環境ですので、 GoogleカレンダーとOutlookを同期させて、 Outlook→iTunes経由→iPodTouch がよいかと思い、下記2つについては試してみました。 ・Google Calendar Sync http://www.forest.impress.co.jp/article/2008/03/06/googlecalendersync.html http://journal.mycom.co.jp/articles/2008/04/14/gcs/index.html ・Plaxo http://www.itmedia.co.jp/bizid/articles/0707/10/news108.html 上の2つともなかなか使い勝手は良かったのですが、 一番上のカレンダーしか同期できなかったのであきらめました。 「仕事」「プライベート」など複数カレンダーを使っていますので。 またこのサイトも参考にしましたが、有料だったり日本語対応に問題があるソフトが多いようです。 http://g.1o4.jp/calendar-sync.html 最後に要件をまとめますと、以下のとおりです。 【要件】 ・GoogleカレンダーとiPodTouchを同期したい ・WindowsのPC環境対応 ・Googleカレンダー内の複数カレンダーと同期できる ・できればフリーソフト希望(少額ならシェアウェアでもいいです) ・日本語が文字化けしないで使える 何か良い解決案を知ってる方がいましたら、教えてください。 よろしくお願いします。

専門家に質問してみよう