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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Turf.js 編 geolib 編

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

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

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

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

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