NotWiz-Calendar-Block

NotWiz-Calendar-Blockとは

カレンダーをサイトに表示するGutenberg用のBlockとなります。

特徴

  • ノーコーディングの簡単操作
  • CSSでカスタマイズ可能なスタイル構造

スクリーンショット

画像は開発中のものです。実際の表示と異なる場合が御座います。

通常表示

通常ではこのような表示となります。
良く見かけるカレンダー表をWebサイトで再現出来るようにしました。

フラット表示

ボーダーの無いフラットな感じのスタイルです。

曜日や日付は自動計算

年月を入力して適用すれば、曜日などは自動計算。
今年が、うるう年など、一切考える必要ありません。

ノーコーディング

イベントの設定は、
・日付を選ぶ
・タイトル、イベントのURLを書く
・背景色やテキスト色を選ぶ
だけ。
コードを書く必要は一切ありません。

サクッと対応

ノーコーディングなので、サクッと対応。
突然の臨時休業でもイベントを設定すれば、すぐにイベントが反映されたカレンダーに。

プラグインの入手方法

WordPress.orgからダウンロードされるか、WordPressの管理画面より検索を行ってみてください。

良くあるご質問

Q
イベント設定は、1つの日に1つだけしか出来ないのか?
A

そういった仕様になっています。複数イベントの対応は未定です。

Q
西暦表示には出来ないのか?
A

新年号の問題など、様々な事情もあるため、対応致しません。

Q
イベントのURLってどうやって使うのですか?
A

URLを設定したイベント日にリンクを挿入します。告知サイトなどへの誘導にお使いください。

Q
カレンダーの月を◯月表示にしたい
A

CSSで可能にしています。後述のカスタマイズ例をご覧ください。

Q
◯曜日の行だけ色を変えたい
A

CSSで可能にしています。後述のカスタマイズ例をご覧ください。

Q
ブロックが壊れた
A

1.0.0で旧暦や英語表記にした場合に、編集時にブロックが壊れる場合がある事を確認しました。1.0.1で修正しております。ただ、互換性が完全には取れないため、1.0.1にアップデートしてもブロックが壊れる場合、再度ブロックを新規に作成してくださいますよう、お願いします。今後のアップデートではブロックを壊さないように互換性を保った上で修正するようにいたします。

カレンダーのカスタマイズケース

月の表示を、◯月と言う表記にしたい

月の表示方式は必ず数字に設定し、下記を追加CSSで記述してください。

.nw-calendar__head .head-month:after {
	content: "月";
}

年の表示を◯◯◯◯年と言う表記にしたい

下記を追加CSSで記述してください。

.nw-calendar__head .head-year:after {
     content: "年";
}

各曜日の行の背景色などを変えたい

下記を追加CSSで記述してください。

/* 日曜日を表示している部分の背景を変えます */
.nw-calendar__weeks .week-sun {
  background-color: 変更したい背景色のカラーコード;
}
/* 各日の日曜日だけ背景を変えます */
.nw-calendar__days .day__week-sun {
  background-color: 変更したい背景色のカラーコード;
}

sunの部分を、下記の曜日に合わせた曜日記述に変更していただく事で、それぞれの曜日で対応されます。(曜日記述は後述しています)

空白の日の色等も変更されてしまいますので、必要に応じて、次の「空白の日の背景色を変更する」を参考に空白の日の設定も行なってください。

空白の日の背景色を変更する

.nw-calendar__days .day__fill {
  background-color: 変更したい背景色のカラーコード;
}

曜日記述について

各曜日のCSS記述は下記の通りとなっています。

  • sun(日曜日)
  • mon(月曜日)
  • tue(火曜日)
  • wed(水曜日)
  • thu(木曜日)
  • fri(金曜日)
  • sat(土曜日)

様々なカスタマイズ例

随時公開予定です。

縦型表示

.nw-calendar__weeks {
	display: none;
}

.nw-calendar__days li {
	float: none;
	display: block;
	width: 100%;
	height: auto;
	border: none;
	border-bottom: 1px solid #000;
}
.nw-calendar .day__number,  .nw-calendar .day__title {
	display: inline;
	text-align: left;
	padding: 0 8px;
}
.nw-calendar .day__number {
	display: inline-block;
	text-align: right;
	width: 100px;
}

.day__week-sun .day__number:after {
	content: "(日)";
}
.day__week-mon .day__number:after {
	content: "(月)";
}
.day__week-tue .day__number:after {
	content: "(火)";
}
.day__week-wed .day__number:after {
	content: "(水)";
}
.day__week-thu .day__number:after {
	content: "(木)";
}
.day__week-fri .day__number:after {
	content: "(金)";
}
.day__week-sat .day__number:after {
	content: "(土)";
}

カスタマイズのための各CSS仕様

下記のCSS仕様に合わせてカスタマイズを行う事で、自由に様々なカレンダーデザインを適用させられます。

.nw-calendar__head

年と月を表示するカレンダーのヘッダーエリアのclassとなります。divタグに定義されています。

.head-month

月を表示する為の文字装飾用classです。.nw-calendar__head内に存在します。spanタグに定義されています。

.head-year

年を表示する為の文字装飾用classです。.nw-calendar__head内に存在します。spanタグに定義されています。

.nw-calendar__weeks

曜日を表示する為のエリアのclassとなります。ulタグに定義されています。

.week-***

曜日を表示する為のエリアの日曜日の行エリアのclassとなります。.nw-calendar__weeks内に存在します。liタグに定義されています。
***の部分は、前述している各曜日記述となります。

.week-label

曜日を表示する為のエリアの日曜日の行エリア内のテキスト装飾用classとなります。.week-***内に存在します。spanタグに定義されています。

.nw-calendar__days

各日を表示するエリアのclassとなります。ulタグに定義されています。

.day__week-***

各日の曜日をスタイル設定する為に定義されたclassです。.nw-calendar__days内に存在します。liタグに定義されています。

.day__fill

空白の日のエリアのスタイルを設定する為に定義されたclassです。.nw-calendar__days内に存在します。liタグに定義されています。

.day__number

各日の日付をスタイル設定する為に定義されたclassです。spanタグに定義されています。

.day__title

各日のイベントをスタイル設定する為に定義されたclassです。spanタグに定義されています。

.day__link

各日のイベントリンクをスタイル設定する為に定義されたclassです。aタグに定義されています。