ジャコ Lab

プログラミング関連のメモ帳的ブログです

React

【FullCalendar x React】任意の付加情報を設定できるか調べた

予定に対して、タイトルとか以外に付加情報が設定できるか調べました 具体的には、 予定をクリックしたときに React Router を使って別のページに遷移させるための情報が欲しかったのがキッカケです。

【FullCalendar x React】まだ表現したいことがあった!予定の色を設定したい!

登録できて、削除できて、編集できて、移動できて、 これで調べることないかなーって思ってたのですが、まだありました・・・。 予定毎に色を付けたい! 正確に言うと予定の種類毎ではありますが・・・ 登録、削除、編集、移動 の記事は以下に貼っておきます…

【FullCalendar x React】登録済みの予定をドラッグ&ドロップで移動できるようにする

サッと予定を移動できるようにする! zako-lab929.hatenablog.com 昨日の記事では、プログラム上で日付を変えましたが、ドラッグ&ドロップで視覚的直感的に予定を移動できるようにします。 これもたった1つ設定を追加するだけで可能になります。

【FullCalendar x React】登録済みの予定のタイトルなどを変更する方法を調べる

昨日は 予定をクリックして削除 を行いました。本日は、削除ではなく編集を試みようと思います。 タイトル、開始日時、終了日時などを変えることを目標にします

【FullCalendar x React】予定をたくさん追加するとカレンダー枠が長くなる問題を解決できた

昨日 予定を登録できるようにした ところ、 予定を 追加しすぎるとカレンダーデザインが崩れる ことを発見しました。 今日は 登録済みイベントの削除や編集 みたいなことをやろうとしてましたが、 たくさん予定が登録されている場合の対策をしたいです。 こ…

【FullCalendar x React】ユーザーアクションをできるようにする

FullCalendar の続きです 今日は React の FullCalendar で、カレンダーに予定を登録できるようにしていきます

とりあえず FullCalendar をセットアップしてみる

カレンダーの画像は上手く生成できないんですかね? zako-lab929.hatenablog.com 昨日調べたカレンダーモジュールのうち FullCalender をセットアップしてみます。

Google カレンダーほど高機能は求めていないがとりあえずカレンダー機能を実装したいのでモジュールを探した

イメージとしては、カレンダーの枠をクリックすると予定を入れられる程度のものを考えています まずは、モジュールがないか探していきます。 フレームワークは React を採用しています。

Material UI の Theme のカラーパレットと Snackbar の variant の色を一致させたい

zako-lab929.hatenablog.com 先日、Snackbar の色変更の設定をしました。しかし、これは Theme で設定しているカラーパレットとは異なる色です。 variant プロパティ notistack.com notistack では5種類のバリアントが用意されています。 variant 設定した S…

Google Drive の Snackbar みたいにファイル削除後に元に戻すの動きを実現してみる

ユーザーアクションのついた Snackbar を実装します。 ふと、Google Drive の Snackbar みたいなものを表現してみようと思いました。 ちなみにこれは Notistack の Snackbar の機能ではなく、Material UI の Snackbar でもできるみたいです。

Snackbar のトランジションを変更したい

「トランジションを表現する画像」とのこと 今日も Snackbar です。デフォルトはスライドインでしたが、なんかうるさく感じてしまい変更したくなりました。

Notistack を使った Snackbar の設定方法

AI が考える今日のスナックバー デフォルトだと黒色で左下に出てきますが、変更方法を調べました zako-lab929.hatenablog.com 導入方法は、前回の記事をご参照ください。 ちなみに、アイキャッチ画像は、前回のプロンプトの続きで、デザインを変えてください…

React で積み重なる Snackbar を簡単に実装する (Material UI 使用)

「スナックバー」の画像の生成を依頼したら、まぁこうなりますよね アイキャッチ画像はこのまま採用するとして、右下とかにポコっと出てくるアレです。 実際に実装しようとしてコンポーネントを探していたわけなのですが、Material UI のドキュメントを読ん…

Free React Template (Dashboard) の Theme を追ってみる (2)

zako-lab929.hatenablog.com 続きです。

Free React Template (Dashboard) の Theme を追ってみる

Custom Theme は何度か見たことがある程度で深くは追ったことがないです

Material UI の Free React Template (Dashboard) を使う際にハマったこと

Material UI に優秀そうな Free Template を見つけたので使おうとしたらすぐに使えなかったので記事になりました

React Router の Outlet を使ってみる

私はよく Next.js を使っているので、自動的にルーティングをしてくれます。 React を使用する場合は、自分でルーティングモジュールを入れなくてはいけません。 偶然 React Router を試す機会があったのでメモ記事です。

地理空間モジュールの Turf.js と geolib を比較してみた

Turf.js 編 geolib 編

Tips:React で緯度経度の2地点間の距離を計算したい (2) - geolib 編

github.com geolib っていうモジュールもスターが多くて良さそうだぞ? ということで、本日は Turf.js とは異なる緯度経度計算モジュールを使ってみようと思います。 モジュール選定大事

Tips:React で緯度経度の2地点間の距離を計算したい - Turf.js 編

zako-lab929.hatenablog.com 昨日、 Google Map 上で距離が測れることを知りましたが、 本日は React 上で 緯度経度 を指示して距離を計算してみたいと思います。

Next.js で Redux を使う&ハマったこと

Redux とは、状態管理モジュールの1つで、 Fulx アーキテクチャの影響を受けて作られたものです。 Vuex の React 版みたいな感じです。 Vuex は Vue 用の状態管理モジュールです。 だいたい Store とか State などの単語が登場します Next.js プロジェクトに…

Next.js で obniz の心拍センサーを使ってみる

docs.obniz.com この記事も1ヶ月ほど前のハッカソンで使用したネタです。 初めて使ったのでまとめておきます。 Grove_EarHeartRate という心拍センサーを Web アプリ上から使うときのメモです。今回は React Component として使えるようにしました。

Next.js で obniz を使う際にハマったこと

急に diffusers 系じゃない記事になりますが、 普段は Web アプリがメインなのでこういう記事も書きます。 1ヶ月ほど前にハッカソンでハマって大変な思いをしたので、 まとめておこうと思います。