WordPressのイベントカレンダープラグイン
WordPressでイベント管理をしたい時、カレンダーが表示されて、該当の日付をクリックすると、イベントの詳細記事ページへ飛ぶプラグインです。
カスタム投稿にはなりません。
Event Calendar 3 について
このカレンダープラグインはphpのバージョンによって2種類あるので注意。
両方とも使っていますが、今のところ問題なく使えています。
バージョンとは関係なく、利用サンプルをご覧いただくと、
ライフサポート ワーカーズ・コレクティブ樹(アーブレ)さん。フッターの「講座スケジュール」で利用しています。
いたばし総合ボランティアセンターさん。トップページの「イベントカレンダー」で利用しています。
このいたばし総合ボランティアセンターさんの土日の色付けはCSS3を使いました。
E:nth-child(n) n番目の子となるE要素
E:nth-last-of-type(n) 後ろから数えてn番目のその種類の要素
cssソースは参考までに。template-functions.phpファイルのtableとtbodyにはクラスをつける必要があります。
#wp-calendar table.schemon tbody.anoc td { padding:5px 0; border:none; } #wp-calendar table.schemon tbody.anoc td { border-top:1px #bad966 solid; border-left:1px #bbeae8 solid; } #wp-calendar tbody.anoc tr:nth-child(1) td { border-top:none; } #wp-calendar td:nth-child(7) { background-color:#f8c1d4; } #wp-calendar td:nth-child(6) { background-color:#bdeafd; } #wp-calendar tbody.anoc tr:nth-child(1) td:nth-last-of-type(3) { background-color:#bdeafd\9; } #wp-calendar tbody.anoc tr:nth-child(1) td:nth-last-of-type(3):not(:target){ background-color:#ffffff\9; /* IE9 */ } #wp-calendar tbody.anoc tr:nth-child(1) td:nth-last-of-type(2) { background-color:#bdeafd; background-color:#f8c1d4\9; } #wp-calendar tbody.anoc tr:nth-child(1) td:nth-last-of-type(2):not(:target){ background-color:#bdeafd\9; /* IE9 */ } #wp-calendar tbody.anoc tr:nth-child(1) td:nth-last-of-type(1) { border-left:1px #fff solid; background-color:#f8c1d4; } #wp-calendar tbody.anoc tr:nth-child(2) td:nth-last-of-type(1) { border-left:1px #fff solid; background-color:#f8c1d4; } #wp-calendar tbody.anoc tr:nth-child(3) td:nth-last-of-type(1) { border-left:1px #fff solid; background-color:#f8c1d4; } #wp-calendar tbody.anoc tr:nth-child(4) td:nth-last-of-type(1) { border-left:1px #fff solid; background-color:#f8c1d4; } #wp-calendar tbody.anoc tr:nth-child(5) td:nth-last-of-type(1) { border-left:1px #fff solid; background-color:#f8c1d4; } #wp-calendar tbody.anoc tr:nth-child(1) td:nth-child(1) { border-left:none; } #wp-calendar tbody.anoc tr:nth-child(2) td:nth-child(1) { border-left:none; } #wp-calendar tbody.anoc tr:nth-child(3) td:nth-child(1) { border-left:none; } #wp-calendar tbody.anoc tr:nth-child(4) td:nth-child(1) { border-left:none; } #wp-calendar tbody.anoc tr:nth-child(5) td:nth-child(1) { border-left:none; } #wp-calendar table.schemon tbody.anoc td.pad { background-color:none; background-color:#fff !important; }