Come creare un calendario nell'app Reactjs
In questo articolo, spiegherò come creare FullCalendar in un'applicazione ReactJS.
Prerequisiti
- Conoscenza di ReactJS
- Codice di Visual Studio installato
- Nodo e NPM installati
Crea un progetto React.js
Per creare un nuovo progetto ReactJS, apri il prompt dei comandi e inserisci il seguente comando.
npx create-react-app reactpartone Installa FullCalendar
Ora installa fullcalendar usando i seguenti comandi
npm install @fullcalendar/core npm install @fullcalendar/react @fullcalendar/daygrid npm install @fullcalendar/timegrid Ora installa Bootstrap in questo progetto usando il seguente comando.
chiave di cancellazione del dizionario Python
npm install --save bootstrap Ora apri il file index.js e aggiungi il riferimento Bootstrap.
import 'bootstrap/dist/css/bootstrap.min.css'; Ora vai alla cartella src e crea un nuovo componente 'Calendar.js' e aggiungi il seguente riferimento per il plug-in fullcalendar,
import '@fullcalendar/core/main.css'; import '@fullcalendar/daygrid/main.css'; import FullCalendar from '@fullcalendar/react'; import dayGridPlugin from '@fullcalendar/daygrid'; Ora aggiungi il seguente codice in questo componente
import React, { Component } from 'react' import '@fullcalendar/core/main.css'; import '@fullcalendar/daygrid/main.css'; import FullCalendar from '@fullcalendar/react'; import dayGridPlugin from '@fullcalendar/daygrid'; const events = [{ title: 'Today', date: new Date() }]; export class Calendar extends Component { render() { return ( FullCalendar In React Application ) } } export default Calendar Ora apri il file App.js e aggiungi il seguente codice,
import React from 'react'; import logo from './logo.svg'; import './App.css'; import Calendar from './Calendar' function App() { return ( ); } export default App; Ora esegui il progetto usando 'npm start' e controlla il tuo risultato,
reagire ai passaggi di avanzamento nativi
Ora vai alla cartella src e crea un nuovo componente 'Calendar1.js' e aggiungi il seguente codice.
import React, { Component } from 'react' import FullCalendar from '@fullcalendar/react'; import dayGridPlugin from '@fullcalendar/daygrid'; import timeGridPlugin from '@fullcalendar/timegrid'; import '@fullcalendar/core/main.css'; import '@fullcalendar/daygrid/main.css'; import '@fullcalendar/timegrid/main.css'; const events = [{ title: 'Today', date: new Date() }]; export class Calendar1 extends Component { render() { return ( FullCalendar In React Application ) } } export default Calendar1 Ora apri il file App.js e aggiungi il seguente codice,
import React from 'react'; import logo from './logo.svg'; import './App.css'; import Calendar1 from './Calendar1' function App() { return ( ); } export default App; 
Riepilogo
In questo articolo, ho discusso su come creare FullCalendar in un'applicazione React.
Grazie per aver letto!
#react #reactjs #javascript