kdcsライブラリー

datepickerで第1・第3・第5など、毎週ではない休みを選択できないようにする記述。
追加（2025.1.31）指定した日付も選択できないようにするように変更

例は、翌日（明日から）2か月間選択可能で毎週木曜日と第1・第3・第5水曜日が定休日の場合

$(function() {
// 休日の指定
var disabledDates = ["2025-01-01", "2025-01-02", "2025-01-03"];

$('#calendar').datepicker({
    showOn: 'button',
    buttonImageOnly: true,
    buttonText: 'カレンダーから選択',
    buttonImage: 'https://fujita-megane.com/wp-content/themes/fujita-h2021s/images/ico_calendar.png',
    minDate: '1d', //明日から
    maxDate: '+2m', //2ヶ月間（約60日）が選択可能範囲
    dateFormat: 'yy年mm月dd日(D)', //年-月-日(曜日)

    beforeShowDay: function(date) {
        var day = date.getDay();
        var dateString = $.datepicker.formatDate('yy-mm-dd', date);
        var dateOfMonth = date.getDate();
        var weekOfMonth = Math.ceil(dateOfMonth / 7);
        // 木曜日かどうかをチェック
        if (day === 4) {
            return [false, "", "定休日です"];
        }
        // 水曜日かどうかをチェック（第1・第3・第5水曜日）
        if (day === 3 && (weekOfMonth === 1 || weekOfMonth === 3 || weekOfMonth === 5)) {
            return [false, "", "定休日です"];
        }
        // 指定した日付を選択できないようにする
        if (disabledDates.indexOf(dateString) !== -1) {
            return [false, "", "この日は選択できません"];
            }
            return [true, ""];
        }
    });
});

WordPressとjQueryのバージョン
※基本的にテーマをカスタマイズしているのでWordPress内部のjQueryは使用しない。

jQueryは公式からダウンロードするかcdnjsやgoogleなどから取得する
【cdnjs】
jQueryはこちら
jQuery-migrateはこちら

ページトップに戻るボタンをjQuery使わずに行う方法
※ios15以前では「behavior: ‘smooth’」が効かないため、

html

<button id="page-top-js"><i class="fa icon-up-open"></i>◆</button>

javascript

// ページトップ スクロール jQuery不要-------------------------------------------
const topButton = document.querySelector('#page-top-js');

topButton.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

window.addEventListener('scroll', () => {
  if(window.scrollY > 300) {
    topButton.style.bottom = '10px';
  } else {
    topButton.style.bottom = '-60px';
  }
});

css

#page-top-js{
    background-color: rgba(0,0,0,0.6);
}
#page-top-js:not(:target){
    filter: none;
    -ms-filter: none;
}
#page-top-js{
  display: block;
  position: fixed;
  z-index: 9999;
  bottom: -60px;
  right: 10px;
  width: 80px;
  padding: 20px 5px;
  background: rgba(78, 95, 185, 0.9);
  color: #fff;
  text-align: center;
  text-decoration: none;
  transition: .5s;
  border-radius: 5px;
}
#page-top-js:hover{ 
  background: rgba(72, 129, 217, 0.9);
}

ボタン要素をクリックし、cssのクラス（is_hidden）を対象の要素に付与する。
is_hiddenで要素を非表示にする。
ページを移動してもis_hiddenを維持するようにsessionStorageにデータを保存する。
セッションの期間のみ有効なのでサイドアクセスした場合は対象要素は表示される。

html

<div id="headline"><button id="hiddenButton">×</button>
<a href="<?php echo post_custom('permalink'); ?>">イベント開催 詳しくはこちら</a></div>
<!--/#headline-->

javascript
※複数のsessionStorageを扱う時は各変数名や（下記class名とconst key名）を変える
※記述は外部ファイルではなくfooter.phpのbody（閉じタグ）前に記述

const headline = document.getElementById('headline');
const button = document.getElementById('hiddenButton');
const key = 'class';
const value = 'is_hidden';
const data = sessionStorage.getItem(key);

if (data) {
headline.classList.add(value);
}

if (button) {
button.addEventListener('click', () => {
headline.classList.toggle(value);
if (headline.classList.contains(value)) {
sessionStorage.setItem(key, value);
} else {
sessionStorage.removeItem(key);
}
});
}

続きは実例を・・・
(続きを読む…)

ios15のsafari15.4からcssの「svh」が使用できるようになり、画面に表示されたアドレスバーを除いたビューポートの高さで表示できるようになっている。
「dvh」を使用するとアドレスバー有り無しでの切り替えも自動で行う。

ios14以前では「svh」が使えないためjavascriptを使って対応する

css

.hogehoge {
  height: 100vh; /* CSS変数をサポートしていないブラウザ用のフォールバック */
  height: calc(var(--vh, 1vh) * 100);
}

javascript

const setVh = () => {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
};

window.addEventListener('load', setVh);
window.addEventListener('resize', setVh);

javascript 別パターン

const setFillHeight = () => {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}
  let vw = window.innerWidth;
  window.addEventListener('resize', () => {
    if (vw === window.innerWidth) {
    // 画面の横幅にサイズ変動がないので処理を終える
        return;
        }
    // 画面の横幅のサイズ変動があった時のみ高さを再計算する
        vw = window.innerWidth;
        setFillHeight();
        });
    // 初期化
    setFillHeight();
    });

「-webkit-fill-available」を使ってcssのみで対応する方法もあるが、ネストされた要素には適用されないなどの問題もあるのであまり実用的ではない。

html{
  height: -webkit-fill-available;
}
body{
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

@supports (-webkit-touch-callout: none) {
html{
  height: -webkit-fill-available;
}
 
  body {
    min-height: 100vh;
    height: -webkit-fill-available;
  }
}