utamaro’s blog

誰かの役に立つ情報を発信するブログ

javascript

シンプルなカレンダーフォームを作る方法

日付選択をする際にでてくるあのカレンダーを作る方法を紹介します。 documentではdomに属性をつけてオプションを指定しているのがほとんどですが、属性をつけるとごちゃごちゃするので、jsに書きます。 準備 以下のライブラリが必要です。 リンクを付けまし…

javascriptのreduceを使って配列を更新する方法

reduceを使用すると、ある配列を使って単一の値を計算したい場合に使えます。 いくつかreduceを使った例を紹介します。 配列内のデータを加算する var datas = [1,2,3,4,5] var result = datas.reduce(function(num, item) { // numの初期値は0 return num +…

javascriptでカレンダーを作成する

html、css、javascriptを使ってカレンダーを作成します。 この記事では、htmlとcssの部分についてはcodepenで見つけたデザインを使用しています。 なので、javascriptをメインで紹介したいと思います。 参考にしたデザインはこちらです。 https://codepen.io…

frappe-ganttでグラフを更新する方法

frappe-ganttのドキュメントからチャートの更新apiを探してみたのですが、見つけられませんでした。 issueを見てみたところ、解決策が見つかったので紹介します。 https://github.com/frappe/gantt/issues/44 jsfiddleにコードを公開してくださっているので…

frappe-ganttを使ってガントチャートを作成する方法

ガントチャートを作成するライブラリは多くありますが、今回紹介するのはfrappe-ganttというライブラリです。 github.com ↓のようなチャートを作成できます。 残念ながら、マウス操作でタスクを追加することはできません。自分で実装することはできそうなの…

frappe chartを使ってグラフを更新する方法

frappe chartを使ってグラフを更新する方法と、ドキュメントに載っているサンプルを書いています。 最終的に↓ができます。 html、javascriptをコピペするといくつかのサンプルも確認できます。 導入 まずはインストールします。 npm install frappe-charts …

可変グリッドレイアウトをMuuriで実装する

画面サイズを変えると、中のグリッドがグリグリと動く画面を作ってみます。 github.com npmでインストールします。 npm install muuri 注意事項 ドラッグして要素を動かす場合は以下のライブラリをインストールする必要があります。 npm install hammerjs np…