Come creare un calendario nell'app Reactjs

Blog

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;

Questo è il titolo dell'immagine

Questo è il titolo dell'immagine

Riepilogo

In questo articolo, ho discusso su come creare FullCalendar in un'applicazione React.

Grazie per aver letto!

#react #reactjs #javascript