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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

2回答

5048閲覧

FullCalendar(v5.5.1)で当日から始まる1週間のカレンダーを作りたいです

tmkky

総合スコア5

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2021/01/25 16:54

javascriptライブラリのFullCalendar(5.5.1)を使用して1週間分のカレンダーを作成しています。
現在、1週間分のカレンダー表示は出来ていますが、当日始まりに出来ません。
今は、日曜日始まりの週間カレンダーしか表示出来てません。

実現したいのは、
・当日から始まる1週間分を表示させたい。(例えば今日が1/26であれば、1/26~2/1までのカレンダーを表示させたい。)
・過去の日付には遷移できないようにしたい。
の2点です。
(PHPは客先事情で使えません。HTMLとJavascriptだけで実現したいです。)

現状のコードは以下のとおりです。

Javascript

1 document.addEventListener('DOMContentLoaded', function() { 2 var calendarEl = document.getElementById('calendar'); 3 4 var calendar = new FullCalendar.Calendar(calendarEl, { 5 locale: 'ja', 6 headerToolbar: { 7 left: 'prev,next today', 8 center: 'title', 9 right: 'timeGridWeek' 10 }, 11 initialView: 'timeGridWeek', 12 businessHours: true, 13 editable: true, 14 selectable: true, 15 slotMinTime: '09:00:00', 16 slotMaxTime: '22:00:00', 17 events: [ 18 ] 19 }); 20 21 calendar.render(); 22 });

HTML

1<div id="calendar"></div>

イメージ説明

お知恵をお貸しください。
よろしくお願いします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

・当日から始まる1週間分を表示させたい。(例えば今日が1/26であれば、1/26~2/1までのカレンダーを表示させたい。)

・過去の日付には遷移できないようにしたい。

カレンダー生成時のパラメーターを2つ追加。firstDayに今日の曜日(getDayの数値)、validRangestart: 今日(を示す値)を設定すると、お望みの挙動になるかと。

JavaScript

1 firstDay: (new Date()).getDay(), 2 validRange: { 3 start: new Date() 4 },

投稿2021/01/26 01:18

Daregada

総合スコア11990

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

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

tmkky

2021/01/26 01:59

バッチリ・完璧・パーフェクトです! ありがとうございました!! 大変助かりました!!!
guest

0

ぐぐっただけですが、下記はどうでしょうか。
https://fullcalendar.io/docs/visibleRange
https://fullcalendar.io/docs/firstDay

投稿2021/01/25 17:01

68user

総合スコア2005

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

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

tmkky

2021/01/26 02:00

ありがとうございます。 参考になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問