ReactJS-Reactカレンダーのスタイルを設定する方法

MasoodS

を使用してreact-calendarパッケージをインストールしました

npm install react-calendar

しかし、私はそれをどのようにスタイリングするか、またはそれにいくつかの色を与えるかがわかりません。react-calendar --npmの手順では、それに関する情報は提供されていません。このパッケージを使用したことがある人がここで私を助けてくれるかどうか疑問に思いました。これは私が持っているコードです:

import React, {Component} from 'react'
import Calendar from 'react-calendar'
export default class EventModifier extends Component {

    state = {
        date: new Date(2018, 6, 1)
    }

render(){
let calendar = <Calendar onChange={this.onChange} value={this.state.date} onClickDay={(value) => alert("day" + value + "clicked")}/>
return(
<div>
{calendar}
</div>
)
}
}
モスタファトゥーラッド

メインのReact-Calendar要素に「react-calendar」とともに追加されるclassNamepropを使用します。必要に応じてカレンダーのスタイルを設定するために使用できます

<Calendar className={['c1','c2']}/>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

カスタムマテリアルUIコンポーネントのreactjs(16.13.0)コードで適切なリダイレクトを実行する方法は?

分類Dev

Reactjsを使用してフルカレンダーで複数のイベントを表示する方法

分類Dev

Reactjs-インラインスタイルを正しく設定する

分類Dev

reactjsでテキスト入力プレースホルダーの色を設定する

分類Dev

クラスオブジェクトを使用してReactjsで機能的なステートレスコンポーネントのスタイルを設定する方法

分類Dev

reactjsでformik形式の初期値にプレフィールドデータを設定する方法

分類Dev

ReactJS-reactコンポーネントのスタイルとクラスを変更する方法は?

分類Dev

ReactJSアプリケーションでAzureActive DirectoryB2Cのb2clogin.comへのリダイレクトURLを設定する方法

分類Dev

レンダーReactJSで2つの入力プレースホルダーを動的に作成する方法

分類Dev

reactJS で reactstrap ドロップダウンをカスタマイズする方法

分類Dev

ReactJsのマップ関数内のコンポーネントをレンダリングするために個々の状態を設定する方法

分類Dev

レンダリングされたテーブルのステータスを切り替える方法-ReactJs

分類Dev

フルカレンダーheaderToolBarのスタイルを設定する方法

分類Dev

ReactJSがローカルホストでのみグラフのデータ値をレンダリングするのはなぜですか?

分類Dev

reactjsのインラインスタイルにベンダープレフィックスを適用するにはどうすればよいですか?

分類Dev

WPFカレンダーからBlackoutDatesのスタイルを設定する方法

分類Dev

空のデータをレンダリングするreactJS

分類Dev

ReactJSツリー構造の入力にフォーカスを設定する

分類Dev

フルカレンダーREACTJS-逆バックグラウンドイベントへのドラッグを無効にする方法

分類Dev

reactjsでカスタムスタイルをantdDatePickerに設定できません

分類Dev

Material UI Next(reactjs)のカスタムテーマにブレークポイントを追加する

分類Dev

reactjsのコンポーネントに動的にpropを設定する方法

分類Dev

Reactjs onClick:リスト内のクリックされたボタンの状態を設定する方法

分類Dev

ReactJS-テーブルに行のドロップダウンを設定する

分類Dev

Material-table#1204-Groupbarのフォントをカスタマイズする方法、reactjsのページ付け-Materialtable

分類Dev

スタイルのReactJS配列をテストする方法

分類Dev

reduxでreactjsのロード状態を設定する方法

分類Dev

reactjsを使用してレンダリングで変数を設定する方法は?

分類Dev

reactjsでsetIntervalを設定する方法

Related 関連記事

  1. 1

    カスタムマテリアルUIコンポーネントのreactjs(16.13.0)コードで適切なリダイレクトを実行する方法は?

  2. 2

    Reactjsを使用してフルカレンダーで複数のイベントを表示する方法

  3. 3

    Reactjs-インラインスタイルを正しく設定する

  4. 4

    reactjsでテキスト入力プレースホルダーの色を設定する

  5. 5

    クラスオブジェクトを使用してReactjsで機能的なステートレスコンポーネントのスタイルを設定する方法

  6. 6

    reactjsでformik形式の初期値にプレフィールドデータを設定する方法

  7. 7

    ReactJS-reactコンポーネントのスタイルとクラスを変更する方法は?

  8. 8

    ReactJSアプリケーションでAzureActive DirectoryB2Cのb2clogin.comへのリダイレクトURLを設定する方法

  9. 9

    レンダーReactJSで2つの入力プレースホルダーを動的に作成する方法

  10. 10

    reactJS で reactstrap ドロップダウンをカスタマイズする方法

  11. 11

    ReactJsのマップ関数内のコンポーネントをレンダリングするために個々の状態を設定する方法

  12. 12

    レンダリングされたテーブルのステータスを切り替える方法-ReactJs

  13. 13

    フルカレンダーheaderToolBarのスタイルを設定する方法

  14. 14

    ReactJSがローカルホストでのみグラフのデータ値をレンダリングするのはなぜですか?

  15. 15

    reactjsのインラインスタイルにベンダープレフィックスを適用するにはどうすればよいですか?

  16. 16

    WPFカレンダーからBlackoutDatesのスタイルを設定する方法

  17. 17

    空のデータをレンダリングするreactJS

  18. 18

    ReactJSツリー構造の入力にフォーカスを設定する

  19. 19

    フルカレンダーREACTJS-逆バックグラウンドイベントへのドラッグを無効にする方法

  20. 20

    reactjsでカスタムスタイルをantdDatePickerに設定できません

  21. 21

    Material UI Next(reactjs)のカスタムテーマにブレークポイントを追加する

  22. 22

    reactjsのコンポーネントに動的にpropを設定する方法

  23. 23

    Reactjs onClick:リスト内のクリックされたボタンの状態を設定する方法

  24. 24

    ReactJS-テーブルに行のドロップダウンを設定する

  25. 25

    Material-table#1204-Groupbarのフォントをカスタマイズする方法、reactjsのページ付け-Materialtable

  26. 26

    スタイルのReactJS配列をテストする方法

  27. 27

    reduxでreactjsのロード状態を設定する方法

  28. 28

    reactjsを使用してレンダリングで変数を設定する方法は?

  29. 29

    reactjsでsetIntervalを設定する方法

ホットタグ

アーカイブ