Pikaday.jsの土日と指定日(祝日etc)の色分け表示
カレンダーを実装する必要があって、Pikaday.jsを利用しました。
2ヶ月間表示など、色々と欲しい機能が付いていて助かったのですが
「土日祝を表示・選択させない」必要があり、少しソースを調整したのでメモ。
調整した内容
1) render functionに土日と祝日の判定を入れる
render: function(year, month, randId) { var opts = this._o, now = new Date(), days = getDaysInMonth(year, month), before = new Date(year, month, 1).getDay(), data = [], row = [], holidays = []; // 指定日(祝日)を設定 holidays.push(new Date(2016,11,23), new Date(2016,11,29), new Date(2016,11,30)); setToStartOfDay(now); if (opts.firstDay > 0) { before -= opts.firstDay; if (before < 0) { before += 7; } } var previousMonth = month === 0 ? 11 : month - 1, nextMonth = month === 11 ? 0 : month + 1, yearOfPreviousMonth = month === 0 ? year - 1 : year, yearOfNextMonth = month === 11 ? year + 1 : year, daysInPreviousMonth = getDaysInMonth(yearOfPreviousMonth, previousMonth); var cells = days + before, after = cells; while(after > 7) { after -= 7; } cells += 7 - after; for (var i = 0, r = 0; i < cells; i++) { var day = new Date(year, month, 1 + (i - before)), isSelected = isDate(this._d) ? compareDates(day, this._d) : false, isToday = compareDates(day, now), isEmpty = i < before || i >= (days + before), dayNumber = 1 + (i - before), monthNumber = month, yearNumber = year, isStartRange = opts.startRange && compareDates(opts.startRange, day), isEndRange = opts.endRange && compareDates(opts.endRange, day), isInRange = opts.startRange && opts.endRange && opts.startRange < day && day < opts.endRange, isDisabled = (opts.minDate && day < opts.minDate) || (opts.maxDate && day > opts.maxDate) || (opts.disableWeekends && isWeekend(day)) || (opts.disableDayFn && opts.disableDayFn(day)), isHoliday = (day.getDay() === 0 || day.getDay() === 6); // 土日を設定 if(!isHoliday) { for(var j = 0; j < holidays.length; j++) { // 指定日を判定 isHoliday = (holidays[j].getFullYear() === day.getFullYear() && holidays[j].getMonth() === day.getMonth() && holidays[j].getDate() === day.getDate()); if(isHoliday) { break; } } } if (isEmpty) { if (i < before) { dayNumber = daysInPreviousMonth + dayNumber; monthNumber = previousMonth; yearNumber = yearOfPreviousMonth; } else { dayNumber = dayNumber - days; monthNumber = nextMonth; yearNumber = yearOfNextMonth; } } var dayConfig = { day: dayNumber, month: monthNumber, year: yearNumber, isSelected: isSelected, isToday: isToday, isDisabled: isDisabled, isEmpty: isEmpty, isStartRange: isStartRange, isEndRange: isEndRange, isInRange: isInRange, showDaysInNextAndPreviousMonths: opts.showDaysInNextAndPreviousMonths, isHoliday: isHoliday // プロパティを設定しておく };
2) pikaday.cssに追加する
.holiday { color: red; } .is-disabled .pika-button.holiday, .is-outside-current-month .pika-button.holiday { color: red; } // 選択させない .is-holiday { pointer-events: none; cursor: default; }
3) 308行目辺りでisHolidayを利用して、classを設定する
if (opts.isEndRange) { arr.push('is-endrange'); } return '<td data-day="' + opts.day + '" class="' + arr.join(' ') + ' ' + (opts.isHoliday ? 'is-holiday' : '') + '" aria-selected="' + ariaSelected + '">' + '<button class="pika-button pika-day ' + (opts.isHoliday ? 'holiday' : '') + '" type="button" ' + 'data-pika-year="' + opts.year + '" data-pika-month="' + opts.month + '" data-pika-day="' + opts.day + '">' + opts.day + '</button>' + '</td>';
こんな感じで出来る。
VagrantでScala環境を構築した時のメモ
OS
Vagrant Cloudから、CentOS6.7を選択
config.vm.box = "box-cutter/centos67"
Java
ScalaはJDKが必要なので、Vagrantの起動時にJDKのインストールを行うようにProvision Shellスクリプトを追記
config.vm.provision :shell, :inline => "sudo yum install java-1.8.0-openjdk -y" config.vm.provision :shell, :inline => "sudo yum install java-1.8.0-openjdk-devel -y"
Javaのバージョン確認
[vagrant@localhost ~]$ java -version openjdk version "1.8.0_101" OpenJDK Runtime Environment (build 1.8.0_101-b13) OpenJDK 64-Bit Server VM (build 25.101-b13, mixed mode)
Scala
ScalaをDLして、解凍してPATH設定するまでをProvision Shellスクリプトに追記
config.vm.provision :shell, :inline => "sudo wget http://downloads.lightbend.com/scala/2.11.8/scala-2.11.8.tgz -P /usr/local/lib/" config.vm.provision :shell, :inline => "sudo tar zxvf /usr/local/lib/scala-2.11.8.tgz -C /usr/local/lib/" config.vm.provision :shell, :inline => "sudo ln -s /usr/local/lib/scala-2.11.8 /usr/local/lib/scala" config.vm.provision :shell, :inline => "echo 'export SCALA_HOME=/usr/local/lib/scala' >> /etc/profile.d/scala.sh" config.vm.provision :shell, :inline => "echo 'export PATH=$PATH:$SCALA_HOME/bin' >> /etc/profile.d/scala.sh" config.vm.provision :shell, :inline => "source /etc/profile.d/scala.sh"
Scalaのバージョン確認
[vagrant@localhost ~]$ scala -version Scala code runner version 2.11.8 -- Copyright 2002-2016, LAMP/EPFL
まとめると、VagrantFileはこんな感じに
config.vm.box = "box-cutter/centos67" config.vm.provision :shell, :inline => "sudo yum install java-1.8.0-openjdk -y" config.vm.provision :shell, :inline => "sudo yum install java-1.8.0-openjdk-devel -y" config.vm.provision :shell, :inline => "sudo wget http://downloads.lightbend.com/scala/2.11.8/scala-2.11.8.tgz -P /usr/local/lib/" config.vm.provision :shell, :inline => "sudo tar zxvf /usr/local/lib/scala-2.11.8.tgz -C /usr/local/lib/" config.vm.provision :shell, :inline => "sudo ln -s /usr/local/lib/scala-2.11.8 /usr/local/lib/scala" config.vm.provision :shell, :inline => "echo 'export SCALA_HOME=/usr/local/lib/scala' >> /etc/profile.d/scala.sh" config.vm.provision :shell, :inline => "echo 'export PATH=$PATH:$SCALA_HOME/bin' >> /etc/profile.d/scala.sh" config.vm.provision :shell, :inline => "source /etc/profile.d/scala.sh"
参考にさせていただいた
VagrantでLaravelの環境構築時のメモ
Composerの作業はVagrantで作成した仮想環境上で行う
Gitは事前にインストールしておく
VirtualBoxのインストール
下記からOSに合うものをDLしてインストール
Downloads – Oracle VM VirtualBox
Vagrantのインストール
下記からOSに合うものをDLしてインストール
Download - Vagrant by HashiCorp
下記コマンドを実行して、LaravelのBoxを追加する
vagrant box add laravel/homestead
Laravel Homesteadをクローン
cd ~/ git clone https://github.com/laravel/homestead.git Homestead
Homesteadの設定ファイルを作成するためにHomesteadディレクトリ内でコマンド実行
cd ~/Homestead bash init.sh
Homestead.yamlを編集
vi ~/.homestead/homestead.yaml
ip: "192.168.10.10" -- 接続時のアプリのIP memory: 2048 cpus: 1 provider: virtualbox authorize: ~/.ssh/id_rsa.pub -- sshファイル keys: - ~/.ssh/id_rsa -- sshファイル folders: - map: ~/Main/Php/Laravel/Code -- ローカルマシンのコードディレクトリ to: /home/vagrant/Code -- 仮想環境上のコードディレクトリ sites: - map: homestead.app to: /home/vagrant/Code/blog/public -- サイトディレトリ
foldersはローカルマシン上と仮想環境上で同期される
※Laravelでblogというプロジェクト名で作成する予定なので、 /home/vagrant/Code/blog/public
という指定にしてる
サイトをhostsに登録
sudo vi /private/etc/hosts
192.168.10.10 homestead.app
を登録
sshファイルを作成
cd ~/.ssh ssh-keygen
Vagrantを起動
cd ~/Homestead vagrant up
無事に起動できたら vagrant ssh
で接続できるか確認する
Laravelアプリケーションを作成
vagrant ssh
で仮想環境にssh接続する
Composerを使って、Laravelプロジェクトを作成する
cd ~/Code composer create-project laravel/laravel blog
作成できていれば、 http://homestead.app
にアクセスすると、Laravelのスタートページが開く
その他
Windows10 PHP Apacheの環境設定メモ
初歩的だけど、とりあえず忘れないようにメモしておく
Windows10 x64環境で実施
PHP
1.公式ページからDL
Windows downloadsからThreadSafe版をDL(IISで構築する場合はNonThreadSafeらしい)
2.解凍したファイルをCドライブ直下へ
ファイル名を「php」とかにリネームして、Cドライブ直下へ移動
「php.ini-production」をコピーして、「php.ini」とリネーム
3.環境パスを通す
環境設定を開いて、PATHに「C:\php」を通す
4.コマンドを叩いてみる
「php -v」とかでバージョンを出してみる
Apache
1.Visual C++ ランタイムをインストール
x64版をDLしてインストール
2.ApacheをDL
Apache VC11 binaries and modules download
3.解凍したファイルをCドライブ直下へ
解凍したファイル内の「Apache24」フォルダをCドライブ直下へ移動
4.binフォルダ内でコマンドを叩いてインストール
Apache24\binでコマンドプロンプトからコマンドを叩く「httpd.exe -k install」
「アクセス許可で禁じられた方法でソケットにアクセスしようとしました」エラーが出たので、「netstat -ano」で調べつつ
サービスの「World Wide Web 発行サービス」を無効にしたら、インストール完了した
5.ApacheMonitorでスタート
Apache24\binフォルダ内にあるApacheMonitorを起動して、StartボタンでApache起動
http://localhost/にアクセスして、「It Works!」が出ればOK